いつからかわからないけど、Chromeでローカルのファイルを開くとウインドウサイズを一定以下に縮めることができないっぽい。
手元のPCだと1374px以下のサイズに出来ない。
タブを切り替えて小さくすれば一時的に小さく出来るけど、ウインドウサイズを変えようとドラッグすると1374px以上にされちゃう。
ぺライチのレスポンシブのページを作ってる時にウィンドウサイズを小さくできなくて困ったのでメモ。
URLが省略されちゃうとか最近、微妙な仕様変更が気になる印象。
Webの最近のブログ記事
テストサーバと本番サーバでリンクを書き換えたいとか、テストサーバでは一部の文字を置換したいけど、HTMLに手を入れちゃうと本番サーバにアップロードする前に修正しなきゃならないので、大変・・・。そう思ってました。
Apachのモジュールを調べたら、mod_substituteとかmod_layoutとかmod_ext_filter辺りが置換してくれそうなんですが、レンタルサーバでは動きませんでした、Xamppでも・・・
そもそもhttp.confを書き換えられない環境も多いです。
調べたら.htaccessからcgiをキックできる方法がありました。
.htaccessに「Action text/html /replace.cgi」のように記述するとCGIが動くので、ちょっとした置換処理を行うPerlを書きましょう。
もちろんCGIのパーミッションを変更する必要はありますが。
詳しくはココを参照してください。
CGI動かしちゃうので、サーバの負荷を考えるとテストサーバ用と思った方がいいです。
サーバの仕様、設定にも依存しますので、動かない場合もあります（ロリポップでは動きました）。
Action以降を書き換えれば、CSSやJavaScriptでも動くと思いますし、画像をゴリゴリ書き換えることも出来るんでしょうね、多分。
8月6日（土）にグランシップ静岡で開催されたCSS Nite in SHIZUOKA vol.2に参加しました。
今回は運営委員として撮影を担当しましたので、メモを取れず、あまりまとめられないので、Togetterのリンクにて代用します。
全体の感想としては、今回、皆さん、話が上手でした。
岡村さんはスライドの密度が濃く質疑応答がすばらしかったですし、白方さんは経営寄りの話ながらボクを含むWeb制作者の気持ちを引き寄せる内容でしたし、神森さんの話を聞いている内に普段はテキストエディタを使用しているボクがDreamWeaverのデザインビューでのやり方を考えるようになりました。
皆さん、自分のやり方、やっている事に対する強い自信が伝わってきました。
細々と進めている個人プロジェクトを完成させねばと強く思った一日でした。
9月24日に三島にて開催されたCSS Nite in SHIZUOKA, Vol.1に参加してきました。 メモしたことをまとめました。
●HTML5とIE9
（小山田さん―株式会社ピクセルグリッド）
IE9のベータ版が公開され、HTML5の実装状況がわかったため、IE9の実装にあわせてHTML5を使ってみては？という提案。
また、現状はIE6も踏まえ、html5media.js（videoタグ、audioタグをIEで使えるようにするライブラリ）、PIE.htc（IEでborder-radiusやshadowを使えるようにするライブラリ）、svginhtml.js（IEでSVGを使えるようにするライブラリ）などを使う方法もあるとのこと。
●Movable Typeを使用したCMS構築のTIPS
（工藤さん―デジタルアシスト）
MTの具体的な実装例の紹介。if分岐を使用して偶数エントリーのみ処理する方法、FlashやJQueryとMTの連携方法など。
●ライトニングトーク
○HTML5モバイルアプリ用フレームワーク Sencha Touchの紹介
（藤田さん―ジャストプレイヤー株式会社）
Sencha Touchではbodyタグは空、JSON形式にて画面を登録するらしい。
○新JIS規格ウェブコンテンツ（JIS X 8341-3:2010）について
（軍司さん―グローバルデザイン株式会社）
読み飛ばしリンクはフォーカスを合わせた際には見える形にしなくてはならないらしい。
○iUIを使ってサクッとiPhone最適化
（牛田―株式会社 中部システム）
iUIはiPhone向けのフレームワークとしては一番手軽らしい。「iBBDemo」というiPhoneエミュレータを使用したとのこと。
○Geolocation周りで考えるべきこと
（室園さん―サイバーエリアリサーチ株式会社）
位置情報は検索結果のフィルタとして機能する。マッシュアップアワードにAPIを提供しているとのこと。
○5分で紹介するa-blog cms
（山本さん―有限会社アップルップル）
a-blog cmsの紹介。他のCMSとの違いとして管理画面のカスタマイズが簡単とのこと。
●去年から今年の前半までを振り返る! 2010年上半期海外Webデザイントレンド
（原さん―株式会社エフエックスビイ）
2009年のトレンドを復習しつつ、2010年上半期のトレンドを総括。基本的に2009年のトレンド（見立て、リボン、モノトーンのアイコンなど）は継承しつつ、手の込んだ小さめのアイコンなどいくつか新しい傾向も見られるとのこと。
以前、LPOサービスの売込みが来た時に、JavaScript＋アクセス解析で同じようなことが出来るんじゃないかなぁと思って、作ったのが元です。
その後、仕事で使いそうで、使わずに1年以上、放置。勿体ないので最近の検索エンジンにも対応させて、公開します。
機能
- 検索サイトからアクセスがあった場合に検索キーワードによって表示を切り替えることが出来ます。
- Javascriptのみで動作します。
- キーワードと対応する文字列（HTMLも可）を指定したIDの要素に表示。
- 対応している検索エンジンはGoogle、Yahoo、MSN、goo、Infoseek、Fresheye、Ask.jp、百度、Bing。
- 動作にはecl.js（Escape Codec Library :: 様々な文字コードでURLエンコード/デコードできるライブラリ）が別途必要になります。
- サーバサイドの管理画面はないため、どのような効果があったかはアクセス解析ツールで確認する必要があります。キーワード毎にパラメーター付きの画像を呼び出して、リンク先のURLにもパラメータを付与すれば、アクセスログに記録されるので、後々のアクセス解析時に便利です。
- 検索エンジンにインデックスされたページでなければ、動作を確認できませんが、FirefoxのLive HTTP headersアドオンにて擬似的に動作を確認できます。
使い方（サンプルソース）
<html>
<head>
<script src="ecl.js"></script><!-- Escape Codec Library -->
<script src="simplelpo.js"></script><!-- simpleLPO -->
<script>
function setLPO() {
var s = new simpleLPO(); // まず、インスタンス生成
s.init('forLPO', { // 書き換える要素のID
'html' : '<p><a href="#">HTML!</a></p>', // 'キーワード''表示するHTMLのソース'
'javascript' : '<p><a href="#">JavaScript</a></p>'
})
}
window.onload = setLPO; // オンロード後に呼び出し
</script>
</head>
<body>
<div id="forLPO"><!-- ココが検索キーワードによって変わる --></div>
</body>
</html>
※商用、非商用共に自由にお使いください。なお、本プログラムを使用して被ったいかなる被害においても作者は責任を負いません。自己責任の下でご利用ください。
最近、他人のPCで数日間作業する機会があって、自分自身が使ってるPCとかなり環境が異なり、ほぼデフォルト設定だったので、ある意味新鮮でした。
常用するアプリケーションはそれぞれ違うはずだし、同じアプリケーションを使っていても設定が違うことも多いはず。
ということで仕事で使ってるPCの環境を公開。OSはXPです。
Adobe製品 設定編
仕事柄、Adobe製品をよく使うんだけど、ショートカットやアクションの設定は人によってかなり違うはず、メインが印刷かWebかでも違うはずだし。頻繁に使うPhotoshopとFlash、Illustratorは設定をイジッてるけど、その他のAdobe製品はほぼデフォルトのままで使用してます。
PhotoshopとFlashの主な設定は以下の通り（Illustratorはepsを表示するようにしてるくらい）。
○Photoshop CS3
カラーモードをRGB化、インデックス化するアクションをショートカットに割り当て、自前のテキスト書き出しのスクリプトを常用。その他、フリーのブラシやシェイプを登録してます。
○Flash CS3
「ビットマッププロパティをまとめて設定」、「クラス指定でリンケージ書出し」、「シンボルに変換」のコマンドを追加して使ってます。CS4は買ったけど、遅すぎて、常用してません。ショートカット類はビックリするくらい使ってません（覚えられない）。
フリーソフト編
長い間使い続けてるソフトもあるけど、より便利なものがあれば変えたいところ。
以下、常用してるフリーソフト一覧（FFFTPとかベタなのは省いてます）。
○TeraPad（テキストエディタ）
HTML、CSS、Javascript、Perl、PHP、提案書の下書きやアイデア出しのメモなど、いろいろな用途で使用。5、6年は使い続けてるはず。通常、Dreamweaverではコーディングしないし、ブラウザ・メーラ以外でもっとも利用頻度が高いソフト。
実際にボクが仕事をしてるところを見たことがある人は知ってると思うけど、黒バックの緑文字で使用してます。正規表現は使えないし、置換は遅いし、Grepもできないけど、アローキーでの画面スクロール速度が加速しない、控えめな半角スペースの表示あたりが使い続けてる理由。サクラエディタも併用してるけど、上記の2点が気になって常用エディタにはなっていません。
○Top Style Lite（CSSエディタ）
日本語が化けるけど、コレに慣れちゃったので他のCSSエディタが使えない。見かけがシンプルで、キチンとインデントしてくれるのが便利。もっと便利なのがあれば、変えたいと思っています。
○Flash Develop（Flash開発環境）
WindowsでFlashやる人にはおなじみかもしれないけど、主にActionscript用エディタとして、Flash CS3とセットで使用。速さとオートコンプリート、各種ショートカットのおかげでFlash CS3単体ではActionscriptを書かなくなりました。
○AN HTTPD（Webサーバ）
サーバサイドでプログラムが動かない場合は大抵、コレで動作確認。Apacheはあまり得意ではないので。
○Executer（コマンドランチャー）
FFFTPやAN HTTPDは確実にコレで起動してます。ブラウザ類も略称で一式登録してあるので、動作確認時にまとめて起動するのに便利。
○Devas（テキスト置換）
正規表現が使えて、拡張子で対象ファイルを制限できるので昔から常用。置換できない場合はキチンとエラーダイアログが出るので安心。
○Flexible Renamer（ファイル名変更）
ファイル名変更だけでなく、タイムスタンプも変更できるので、差分データを納品するときに便利。
○Subversion（バージョン管理サーバー）＋TortoiseSVN（Subversionクライアント）
Subversionをインストールできるサーバを持っていないので、ローカルにリポジトリを作って使用。そのため、バックアップというよりは単なるバージョン管理として使用してます。バージョン管理もDiff程度しか使わないため、ブランチとかイマイチわかってません。
大体、こんな感じのPCを使ってます。
忘れないようにIE7のみメイリオで表示するスタイル指定をメモ（IE7用のハックを使用しているのでdoctypeに注意）。
*:first-child+html body {
font-family: 'メイリオ',Meiryo !important;
}
メイリオは他の書体と比較すると文字サイズや行間がかなり違って見えます。
文字サイズは大きく、行間は狭めてあげると良いです。ただし、当然ながらメイリオがない場合にもそのスタイルが適用されるので要注意。
いろんなところから集めたソースの断片を組み合わせて、代替スタイルシートを使った文字サイズ変更Javascriptを作ったのだけれど、Win IEの文字サイズが最大、最小の設定になってると、「文字を大きく」ボタンを押したつもりが、なぜか文字が小さくなったりする（逆もアリ）現象が発生。
Win IEの文字サイズはCSSで80%、100%、150%にしてあったところを50%、100%、200%にしてみたらちゃんと文字が大きくなった。なんか計算間違えたのか？ビル。
よく使うのでAdobe Photoshop CS3自動化作戦を見て、Photoshop内のテキストをテキストファイルに書き出すスクリプト作った。
ちょっと遅いけど、便利。
以下、ソース。使い方は上記の自動化作戦を参考に。
CR = String.fromCharCode(13);
savename = File.saveDialog("保存するファイル名を入れてください");
if (savename) {
var fileObj = new File(savename);
var flag = fileObj.open("w");
if (flag == true) {
writeLayerName(activeDocument);
fileObj.close();
} else {
alert("ファイルが開けませんでした");
}
}
// レイヤーセット内にレイヤーが含まれる限り書き出し（再帰）
function writeLayerName(layObj) {
var n = layObj.artLayers.length;
for (var i=0; i<n; i++) {
if (layObj.artLayers[i].kind == LayerKind.TEXT) {
txt = layObj.artLayers[i].textItem.contents;
fileObj.write(txt+CR+"---------"+CR); // レイヤー間の区切りにハイフン追加
}
}
var ns = layObj.layerSets.length;
for (var i=0; i<ns; i++) {
writeLayerName(layObj.layerSets[i])
}
}
ちょっと遅いけど、便利。
以下、ソース。使い方は上記の自動化作戦を参考に。
CR = String.fromCharCode(13);
savename = File.saveDialog("保存するファイル名を入れてください");
if (savename) {
var fileObj = new File(savename);
var flag = fileObj.open("w");
if (flag == true) {
writeLayerName(activeDocument);
fileObj.close();
} else {
alert("ファイルが開けませんでした");
}
}
// レイヤーセット内にレイヤーが含まれる限り書き出し（再帰）
function writeLayerName(layObj) {
var n = layObj.artLayers.length;
for (var i=0; i<n; i++) {
if (layObj.artLayers[i].kind == LayerKind.TEXT) {
txt = layObj.artLayers[i].textItem.contents;
fileObj.write(txt+CR+"---------"+CR); // レイヤー間の区切りにハイフン追加
}
}
var ns = layObj.layerSets.length;
for (var i=0; i<ns; i++) {
writeLayerName(layObj.layerSets[i])
}
}
ページ数が万単位のサイト手掛けた時も大活躍だったアイツ。
全面的に信用してたのに・・・ 見逃しやがった。
PHPページのリンクを全然取得できなかった。っていうかQuickFormが吐き出すjavascriptのプルダウン部分の入力チェックのところでコケルみたい。2バイト文字とか入ってないし、原因不明。もしやXenu氏はJavascriptを解釈しようとしてるのかな。
うわー、QuickFormいろいろ使えねー、っていうか何か鬼門。早く新しいメールフォーム作んないと。
やっぱり個人的にPHPよりもPerlが好き。
