Javascriptの最近のブログ記事

PreprosでJavaScript圧縮

yama5
(2014年8月 7日 18:48)
PreprosはWindowsでWeb制作をするときに非常に便利なツールです。

SassやLessのコンパイルや画像の最適化、Chromeのエクステンションと連携してオートリロードなどにも対応していますし、JavaScriptの圧縮・結合にも対応しています。


公式サイトのヘルプにも記載はありますが、JavaScriptの圧縮についてまとめます。

ファイルの先頭に別のjsファイルを結合したい場合
//@prepros-prepend foo1.js
//@prepros-prepend foo2.js
「//」も含めて記述します。
複数のファイルを読み込めますが、上記の記述の場合、foo2.jsが先頭、foo1.jsがその次に記述されます。

ファイルの末尾にjsファイルを結合したい場合
//@prepros-append bar.js
同様に「//」も含めて記述、こちらも複数のファイルを読み込めます。記述順は記載順のままです。

minifyしたくない場合
ファイル名を「foo.min.js」のように「min.js」を含める。
ライセンス表記を残したい場合にどうぞ。

※ver. 4.0.1での挙動です。


あとPhotoshopでpngを書き出した場合にIE6以下で表示できない（今は気にしなくてもよいとは思いますが、アルファチャンネルが荒れるとかではなく、IEで読み取れないExifが含まれてるっぽい）画像になることがありましたが、Preprosの画像最適化で解消できました。

簡易LPOライブラリ simpleLPO

yama5
(2009年7月17日 12:55)

以前、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>

ダウンロード

 

※商用、非商用共に自由にお使いください。なお、本プログラムを使用して被ったいかなる被害においても作者は責任を負いません。自己責任の下でご利用ください。

サイトオープン（仮）

yama5
(2009年7月14日 18:01)

一部の人にはすでに知らせてましたが、仕事用のサイトをオープンしました。

http://www.linnet.jp

直接、依頼があるとも思えないので、情報量は少なめに。
現状、IE6以下だとまともに動きません。

技術的にはクライアントサイドではJQueryとSWFAddress、GoogleMap、その他いくつかのJQueryプラグイン。
サーバサイドは軽量フレームワークmentaを使用（ほんの数行のコードを書いただけだけど）。

SWFAddressをFlash以外で使ったのは初めてだったけど、アンカーリンクをクリックした時の挙動がIEとそれ以外で違ったので、手間取った。
IE以外は「#」の後ろに「/」が必ず入るんだけど、IEはhrefに指定したままの値になる。
本来はスクリプトでURLを割り当てるんだろうけど、違う使い方をしたからかも。
仕方ないので、一旦、違うアンカーリンクに飛ばしてから、URLを変更して、無理矢理にブラウザ間の挙動の差をなくした。

あとはGoogleMapを貼り付けて動かしてみたり、画面切り替えのモーションをつけてみたり。
お陰で表示がもっさりする事があるので、手が空いた時に調整します。

その前にこのブログを何とかします。

一括置換でprototype.jsのコンフリクト回避

yama5
(2009年4月 6日 20:29)

現在、作成中のサイトのテンプレートには独自のDOM関連のJavascriptがあらかじめ組み込まれていて、普通に作る分には、助かるんだけど、一般に出回ってるライブラリを使おうとするとコンフリクトする。

今回、Lightbox使おうとしたら、案の定、prototype.js中のメソッドがコンフリクトしたので、JQuery.jsのLightboxに変更して、Firebugs使いながらゴニョゴニョとカスタムして完成！って思ったら、IEで動かない・・・。よくよく確認してみると、OperaでもSafariでもChromeでも動かない。Firefoxでしか動かない！

どうもクリックイベントを割り当てるトコが怪しいので、alert使って処理を追っていく。クリックイベントはブラウザによって処理のタイミングと挙動がバラバラなので、厄介。一時間ぐらい経っても一向に目途が付かないので、思い切ってprototype.jsに戻って、コンフリクトしてたメソッド名を一括置換したら、あっさり動きました。

prototype.jsはコンフリクトしやすいけど、一括置換で意外と簡単に回避出来ちゃうので便利。

« Flash | メインページ | アーカイブ | PHP »