ツールの最近のブログ記事

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>

ダウンロード

 

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

パワーポイントTips　- イラストレーターで編集

yama5
(2009年6月26日 14:04)

デザイナーと名乗っていると、地味に多いのがパワーポイントのデザイン。

オブジェクトを整列させても、イマイチ揃わないし、キレイに作れないって思ってるデザイナーさんが多いですが、パワーポイントはイラストレーターのデータをインポートできるのでその気になればイラストレーターとほぼ同等のデザインを再現できます。

 

イラストレーターで「ファイル」→「書き出し...」でemf、またはwmfで書き出したファイルを、パワーポイントで「挿入」→「図」→「ファイルから」で読み込めばOK。線や塗りもパワーポイント上で編集できるベクターデータ扱いです。色もRGBで作っておけばそのまま持っていけます（私の確認した範囲では・・・）。

 

ただし...

グラデーションやアルファ、ドロップシャドウなどが使われたデータはビットマップに変換されます。文字も詰め情報が反映されますが、パワポ上で編集しようとすると詰め情報が破棄されます。フォントの有無も関係すると思うので思い切ってアウトラインにするのが良いかと。

グラデはパワーポイント上で編集すればいいし、アルファはパスファインダでバラして塗り替え、ドロップシャドウはアルファ値が反映できないけどブレンドにしちゃえば、ほぼ同じものが出来るはず。

全部、イラストレーターで作っちゃうと、後々の編集が面倒だったり、そもそも他者が編集する前提だと厳しいので、ワンポイントのイラストなんかが主な使い道にはなると思うけど。

 

［追記］

パワーポイントにビットマップ画像を貼り付ける場合、どうしても半透明が必要でない限りpng形式は避けた方が無難。資料として配布する際にパワーポイントからPDFに変換することが多いと思いますが、画像のフチにグレーの線が出たり、画像が荒れ気味になります。

ビットマップ画像はbmp形式が最もキレイにPDFに変換できるようです。また、bmp形式の画像はファイルサイズが大きくなりがちですが、パワーポイントに貼り付けた際に圧縮されるらしく、元のファイルサイズよりも小さくなります。

 

Mail Distributorで添付ファイル

yama5
(2009年5月26日 17:01)

同一内容のメールをまとめて送信する必要があったのでMail Distributorを使ったんだけど、添付ファイルがあると送信エラーって言われました。

最初は添付するファイルをデスクトップに置いてたけど、Cドライブ直下に移動したらイケた。良くある「ファイルパスに日本語が混じるとダメ」系でした。使用したMail Distributorのバージョンは5.5。

ザックリと検索した限りでは、同様の事例が見当たらなかったので、メモ。

 

« その他 | メインページ | アーカイブ