こんにちは。
デザイナーのYKKです。

今回は意外と使いこなせていない、IllustratorでのJavascriptについてご紹介します。

Photoshopと同じく、Illustratorにもスクリプトを読み込んであらゆる作業を自動化できる機能が備わっています。
Javascriptが書ける人もそうでない人も、簡単ですぐに使えるのでぜひ活用してみましょう。

Javascriptがわからない方は、
無料で配布されているJSデータを利用するのが便利です。

よく利用させていただいているこちらのサイトからいくつかご紹介します。

イラレで便利
http://d-p.2-d.jp/ai-js/pages/01_scripts/path_object/

どのスクリプトも、Illustratorを使っていると遭遇する面倒な作業を簡単にしてくれるものばかりです。
特に私の場合はクリッピングマスクを頻繁に使うので、マスク関連のスクリプトは大変重宝しています。

Javascriptの読み込み

ダウンロードしてきたJSの置き場所（読み込み方法）は2通り。

スクリプトフォルダ内に入れる場合

Illustratorをインストールしたアプリケーションフォルダ内の、
プリセット＞ja_JP　にJSデータを置きます。

再起動後、Illustratorのプルダウンメニュー、
ファイル＞スクリプト　から指定できるようになります。

任意の場所を指定したい場合

Illuistratorのプルダウンメニューから、
ファイル＞スクリプト＞その他のスクリプト　からスクリプトファイルを指定します。

では、スクリプトでどういった事ができるかを見ていきましょう。

スクリプトを実行する

マスクに入れる.js

すでにマスクを切った画像に、更に画像を追加するスクリプト。
クリッピングマスクを選択した状態で、【マスクに入れる.js】を読み込ませるとマスクに画像を追加できます。



マスクの解除や再クリッピング化をしなくても、スクリプトひとつで画像を追加することができます。

入れ替え.js

すでにマスクを切ったクリッピングマスクを変更するスクリプト。


それぞれのクリッピングマスクを選択した状態で、【入れ替え.js】を読み込ませるとマスクが入れ替わります。
いちいちマスクの解除をしなくて済みますね。

テキストばらし.js

ひとつのテキストを行単位にわけるスクリプト。

テキスト連結.js

Illustratorは高機能が故に使いこなせないと効率が悪くなってしまうツールだと思います。
機能拡張をしてこそのツールでもあるので、頻繁に使用する機能や面倒だと思った作業があればすぐ、スクリプトを探してみると解決できるかもしれません。
バージョン毎にJSが対応していないことがあるのでそこだけ注意が必要です。

何かを描画してくれたり色味に影響を与えるもの等のデザインに特化したスクリプトや、

WUNDES.com　JS4AI　※英文
http://www.wundes.com/JS4AI/index.php

s.h's page - [Illustrator] JavaScript scripts
http://park12.wakwak.com/~shp/cgi-bin/wiki.cgi/view/JavaScript_scripts

スクリプトを書く人用のスクリプトというものもあるので、
利用してみようという方や、書いてみようという方はいろいろ探してみると面白いですよ。

プログラマの kon.T です。

前回はサイトの多言語化について解説しましたが、今回は多言語化に伴う「タイムスタンプの最適化」について触れようと思います。まずあなたが管理しているサイトにはさまざまな記事があり、これらに更新時間を示すタイムスタンプが表示される状況を想像してみてください。

このサイトを日本語・中国語の２言語対応にすれば、きっと中国からのアクセスも見込めるでしょう。しかしタイムスタンプが日本時間で表示された場合、１時間の時差がある中国からの訪問者は更新時刻を勘違する危険性があります。そこでサイトの多言語化には、時間の管理も必要となってくるわけです。本稿では会員マイページで、世界中のタイムゾーンを設定できる仕組みについて紹介します。

サーバ時間の取得

日本国内のサーバは日本時間に設定されているのが普通です。そしてサイト上での「時間」は、プログラムが置かれているサーバの設定に依存します。それではまず最初に、サーバの標準時をチェックしてみましょう。サーバに設定されたタイムゾーン情報を取得するには、date_default_timezone_get() 関数を使います。

echo date_default_timezone_get();
echo "<br />". date('Y-m-d / H:i:s');

日本時間に設定されているサーバであれば、次のように表示されるはずです。

Asia/Tokyo
2012-01-16 / 13:50:03

Wikipediaによるとタイムゾーンは現在約40種類存在し、そのうち日本は日本標準時(JST)を採用しています。また日本標準時はUTCよりも９時間進んでいるため「UTC + 9」、「UTC + 9:00」などと表記されます。ちなみに UTC とは協定世界時のことで、GMT（グリニッジ標準時）とほぼ同一のものです。ただユーザーの中には「グリニッジ標準時＝英国時間」と思ってしまう人も多いため、後述するサマータイムの絡みからも「GMT +9」ではなく「UTC +9」という表記にした方が無難な気がします。

さて PHP 上でのタイムゾーン区分はどうなっているのかというと、実に540種類に分かれます。これはPHPが主要な都市ごとに標準時を定めているためです。

例えばヨーロッパの場合は大きく西ヨーロッパ標準時(WET / UTC + 0:00)、中央ヨーロッパ標準時(CET / UTC + 0:00)、ヨーロッパ標準時(EET / UTC + 0:00)の３つに分かれ、ドイツ、オーストリア、チェコ、ポーランドの４カ国は共に CET に属します。これらの国々はまったく同一の時間で動いているのですが、しかしPHP上では次の４種類に分かれてしまいます。

Europe/Berlin（ベルリン＝ドイツ）
Europe/Prague（プラハ＝チェコ）
Europe/Vienna（ウィーン＝オーストリア）
Europe/Warsaw（ワルシャワ＝ポーランド）

同一のタイムゾーンであっても、サマータイムの実施は国ごとや州ごとに異なる場合があるためにこうなっているのでしょうね。もちろんサイト設計の際に、これらすべてのPHPタイムゾーンを考慮する必要はありません。

タイムゾーンの変更

サーバには一つの定まったタイムゾーンが設定されています。会員（ユーザー）毎に時刻の見え方を変えるには、設定されているタイムゾーン自体を一時変更する必要があります。この一時的な変更には date_default_timezone_set() 関数を使います。

echo date_default_timezone_get();
echo "<br />";
echo date('Y-m-d / H:i:s');
echo "<br /><br />";

date_default_timezone_set("Europe/Berlin");
echo date_default_timezone_get();
echo "<br />";
echo date('Y-m-d / H:i:s');

実行結果

Asia/Tokyo
2012-01-16 / 13:50:03

Europe/Berlin
2012-01-16 / 05:50:03

この例ではまず date_default_timezone_get() で現在のサーバに設定されているタイムゾーンを表示して現在日時を表示。次にタイムゾーンを中央ヨーロッパ標準時（ベルリン）に変更し、改めて日時情報を表示しています。date_default_timezone_set()によって変更されたタイムゾーンは、PHPファイルを実行している間のみ有効ですので、このプログラムを何度実行しても同じ結果が得られるはずです。

サマータイム処理の実装

太陽の出ている時間帯を有効に利用する目的で、現行の時刻に一定の時間を加減する仕組み、あるいはその時刻をサマータイムと呼ぶのはご存知の通り。そして時間を扱う以上、この仕組は組み入れざるを得えないでしょう。しかしサマータイムは地域ごとに取り扱いが違うので注意が必要です。

サマータイムは現行時刻から１時間差っ引くのが通例ですが、場所によっては１時間ではなく30分であったり15分だったりもします。またサマータイムの開始・最終日も異なれば、日本のようにサマータイムを採用していない地域もあるなど、その運用は大きく異なります。そこでまずは該当の日時、あるいは現在日時が、現地でのサマータイム中にあるのか否かを判別しなければなりません。

サマータイム判定は date() 関数を使うことで簡単に知ることができます。

date('I');
if(date('I') == 0){ echo "通常時"}
if(date('I') == 1){ echo "サマータイム中"}

返り値が「0」であれば通常時、「1」であればサマータイム中を意味します。ではサマータイム中である 『2011年8月7日13時10分15秒』 のベルリン時間を表示してみましょう。

date_default_timezone_set("Europe/Berlin");
echo date_default_timezone_get();
echo "<br />";

$target_date = mktime(13,10,15,8,7,2011);
echo date('Y-m-d / H:i:s', $target_date);
echo "<br />";

$summer_chk = date("I" , $target_date);
if($summer_chk == "0"){ echo "通常時";}
if($summer_chk == "1"){ echo "サマータイム中";}

実行結果

Europe/Berlin
2011-08-07 / 13:10:15
サマータイム中

この例ではまず date_default_timezone_set()でタイムゾーンを中央ヨーロッパ標準時（ベルリン）に変更し、確かに変更されたことを確認するために date_default_timezone_get(); をエコーしています。次に該当日時のUnixtimeを取得し、さらにこの日時を定型フォーマットで表示。そして最後にこの日がサマータイム中であるか否かを判定しています。

間違いやすいのですが、この場合は「8月7日の13時10分15秒のベルリン」がサマータイム中であることを示しています。またここで表示している時間はサマータイム中であることから、すでにベルリンの標準時より「1」を引いた時間であるということを理解してください。

日時データの保存

各記事の更新日時をデータベースやファイルに保存する際、記事を入力した「個々の会員にとって標準時」で登録すると処理がややこしくなってしまいます。そこでシステム内での日時データは一つのタイムゾーンに統一し、表示するときにその都度、会員の設定に合わせた調整を行う方がよいわけです。

しかしサーバが日本時間に設定されているからといって、日本時間を基準にすべきでないでしょう。今後もし日本がサマータイムに対応すれば内部計算が合わなくなってしまいますから。そこで日時データはサマータイムの影響を受けないUTC、あるいは Unixtime で保存するのが正解のような気がします。

会員ごとの標準時設定

時間情報を正確に表示するには、「個々の会員にとっての標準時」を事前に登録する必要があります。調べてみたところ、サマータイムを加味すると６０種類のタイムゾーンに分かれるようです。これが正しいかどうかは別として、右図のようなタイムゾーンリスト作成して見ました。内部構造は次の通り。

<OPTION value="Asia/Brunei"     >UTC +08:00 中国、シンガポール</OPTION>
<OPTION value="Asia/Irkutsk"    >UTC +08:00 ロシア第7標準時 - IRKT</OPTION>
<OPTION value="Asia/Tokyo"      >UTC +09:00 日本、韓国、パラオ </OPTION>
<OPTION value="Asia/Yakutsk"    >UTC +09:00 ロシア第8標準時 - YAKT</OPTION>
<OPTION value="Australia/Darwin">UTC +09:30 ノーザンテリトリー（豪）</OPTION>

マイページではまず会員が設定したタイムゾーンを読み取り、date_default_timezone_set() 関数でタイムゾーンを変更します。これでマイページは、会員が設定したタイムゾーンで稼働することとなります。

おわりに

表示日時をタイムゾーンに合わせて変化させる場合は、表示中のタイムゾーン情報を表示した方がユーザーに優しいと言えるでしょう。

2011-08-07, 13:0:15 (UTC+0100)

例えば上記の例は、協定世界時より1時間遅いタイムゾーンを基準として表示しています。ただこれだとサマータイムが加味されているのか否か解かり辛いため、下記のような表記が望ましいでしょう。

2011-08-07, 13:0:15 (WET: Western European Time, UTC+0100)

↑※西ヨーロッパ時間で UTC+0100 なので、これはサマータイム中ということになります。

今回は会員が事前にタイムゾーンを設定する、マイページの例を取り上げました。精度は多少落ちますが、接続元のIPやブラウザ表示言語を読み取ることでも、ユーザーのタイムゾーンを推定することが可能です。

こんにちは。デザイナーのツチヤです。
年明け最初の更新となります。
今年もどうぞよろしくお願いいたします！

前回、前々回とHTMLとCSSでは実現が厳しい「縦方向中央のレイアウトをjQueryで簡単に行う」という記事をご紹介しましたが、今回は「ブロック要素の高さを揃えるJavascriptライブラリ」をご紹介したいと思います。こちらもデザイナーにとって、HTMLとCSSのみでは実現が難しい悩みの種のひとつだと思います。
そこで、今回は公開されている既存のライブラリの3つを使用してサンプルを作成してみました。

ライブラリ１：heightLine.js

http://blog.webcreativepark.net/2007/07/26-010338.html
「heightLine.js」を使用する事により、ブロックレベル要素（li要素）の最大の高さに統一されます。使い方が3つ用意されていますので、制作物に合うものを選択します。

＜メリット＞

高さを揃える場合はこちらのライブラリが定番という方も多いと思います。
ネット上で多く紹介されており、安心感があります。

＜設置方法＞

配布元より「heightLine.js」をダウンロードします。
head内にheightLine.jsを読み込みます。

<script type="text/javascript" src="heightLine.js"></script>

＜サンプル＞

height_sample/height_sample1.html
配布元の「使い方3」を使用したサンプルです。
heightLineParentというclass名をul要素に付与します。
2つのheightLineParentの装飾を変えたい場合、外側にdivを追加します。

ライブラリ2：fixHeight.js

http://www.starryworks.co.jp/blog/tips/javascript/fixheightjs.html
高さを揃えたい要素の親要素に「fixHeight」というクラスを付与すれば、行ごとのグループを自動で判断して高さを揃えてくれるjQueryプラグインです。
使い方が3つ用意されていますので、制作物に合うものを選択します。

＜メリット＞

タイトルの高さ、テキスト内容の高さをどちらとも揃えたいデザインに最適です。

＜設置方法＞

jQueryを使用していますので準備します。
配布元より「fixHeight.js（fixHeight-v2.0.js.zip）」をダウンロードします。
head内にjQueryと「fixHeight.js」を読み込みます。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="fixHeight.js"></script>

＜サンプル＞

height_sample/height_sample2.html
配布元の「使い方3」を使用したサンプルです。
行ごとにタイトル部分とテキスト部分の高さを揃える事ができます。

ライブラリ3：jquery.tile.js

http://urin.take-uma.net/Entry/16/
http://urin.take-uma.net/Entry/13/
指定した複数の要素の高さを、その中の最大の高さに揃えるjQueryプラグインです。

＜メリット＞

とても軽量で、class名を自由に指定したい場合にオススメです。

＜設置方法＞

jQueryを使用していますので準備します。
配布元より「jquery.tile.js」をダウンロードします。
head内にjQueryと「jquery.tile.js」を読み込みます。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.tile.js"></script>

＜サンプル1＞

height_sample/height_sample3_1.html
配布元の「使用方法1」を使用したサンプルです。
上記＜設置方法＞に追記します。

$(function(){

$(".box ul li").tile();

});

.boxを内包するli要素の最大の高さに統一されます。

＜サンプル2＞

height_sample/height_sample3_2.html
配布元の「使用方法2」を使用したサンプルです。
上記＜設置方法＞に追記します。

$(function(){

$(".box ul li").tile(3);

});

.boxを内包するli要素の高さを各行の最大に揃えます。列数を引数に指定します。
当サンプルでは3列ですので3を指定しています（tile(3);部分）。


以上になります。
今回サンプルとして紹介させていただいたライブラリの配布元の方々に感謝したいと思います。ありがとうございました。

今後もシンプルだけどかゆいところに手が届くようなTipsをご紹介していければと思います！

こんにちは！ねまっちです！

今回はLinuxのコマンド入力時に知っておきたいショートカットをまとめてみました。

カーソル編

コマンドライン操作は、キーボードで文字入力を行うため、長い入力の後に修正するのはけっこう面倒です。
そこでカーソル移動を楽にしてくれるショートカットキーを紹介していきます。

カーソル移動のショートカット

入力キー	アクション
Ctrl + a	カーソルを行頭へ移動します。
Ctrl + e	カーソルを行末へ移動します。
Ctrl + f / →	カーソルを1個右へ移動します。
Ctrl + b / ←	カーソルを1個左へ移動します。

カーソルで削除するショートカット

入力キー	アクション
Ctrl + d / DEL	カーソル上の一文字を削除します。
Ctrl + h / BackSpace	カーソルの左一文字を削除します。
Ctrl + k	カーソルから行末までを削除します。
Ctrl + u	1行すべて削除します。

コマンド履歴の活用編

「history」とコマンドを入力すると、これまで使用したコマンドの履歴一覧が表示されます。
historyコマンドは基本なので、皆さんもよく使われてるかと思いますが、
長いコマンド入力等でもコマンド履歴をたどり再利用する事により時間短縮につながります。

historyコマンド

オプション
-a	bashのセッションが開始されてから現在までに入力されたコマンド行を履歴ファイルに追加する
-c	コマンドの実行履歴を消去する
-d	履歴番号offsetの実行履歴を削除する
-n	履歴ファイルから読み出されていない行を，現在の履歴に加える
-r	指定された履歴ファイルを読み出し，現在の履歴と置き換える
-w	指定された履歴ファイルに現在の履歴を上書きする

historyを活用できるショートカット

入力キー	アクション
Ctrl + p / ↑	実行したコマンドを順番に表示します。
Ctrl + n / ↓	↑でたどった履歴を逆に表示します。
!!	直前に実行したコマンドを表示します。
!n	historyの履歴番号を「n」部分に指定すると該当のコマンドが表示します。

historyコマンド応用編

コマンド一覧の絞り込み

OSの種類にもよりますが、historyコマンドの履歴一覧はデフォルトの設定で500件～1000件表示されます。
その中から以前使った履歴を探すのはちょっと一苦労しそうです。
前回使用したコマンドを覚えているのであれば下記のようにコマンドを入力して絞り込むことも出来ます。

例)「pwd」コマンドを使用した場合

root@username $ history | grep pwd

上記の結果には「pwd」という文字列が入っている一覧が表示されます。

コマンド履歴の表示内容を変更する

※今回の内容を使用するためには、「bash 3.0」以降である必要があります
各ユーザのHOMEディレクトリ内の「.bashrc」ファイルに以下の記述をすることで表示内容を変更することができます。

入力項目	表示内容
HISTTIMEFORMAT='%y-%m-%d %T'	実行した日時を表示します。
HISTIGNORE=ls:history	historyにlsコマンドを記録させない設定です。
HISTSIZE=1000	ファイルに表示する件数を指定できます。
HISTFILESIZE=1000	ファイルに保存できるコマンドの件数を指定できます。

ちなみにhistoryの結果は、各ユーザのHOMEディレクトリ内の「.bash_history」に保存されています。

以上です。
今回の様なショートカットや「history」コマンドは基本ながら、皆さんは十分に使いこなしているでしょうか？
うまく利用していけば開発スピードがぐんと上がるはずです。ぜひお試しください。
ありがとうございました。

入社して一年が経ちました、プログラマーの二宮です。

最近、javascriptを触る機会が多いです。

主にjQueryを使って開発をしていますが、jQueryだけでは足りない機能を、
Sugarというビルドインオブジェクトを拡張してくれるライブラリも併用して使っています。

Sugarライブラリ

http://sugarjs.com/

使い方

使い方は簡単で、ダウンロードしたSugarファイルを読み込むだけで使えます。
jQueryやprototype.js等、他のライブラリと一緒に読み込んでも、
不具合が出る事がないように設計されているようです。

対応ブラウザ

対応しているブラウザも豊富で、
IE6～、Firefox、Opera、Safari、Chrome等に対応しています。

使用例

PHPと比べても文字列を指定数で切り捨てる処理を、
同じような書き方で実現出来ます。

[PHP＋Smarty]
{$hoge|truncate:40:"...":true}

[javascript＋Sugar＋jquery-tmpl]
${hoge.truncate(40,"...",true)}

他にも便利な機能はたくさんあり、String、Number、Array、Date、Object、Function、RegExp等のビルドインオブジェクトが拡張されています。

日付整形の例

最近使った例で言うと、twitterの日付を整形する際、twitterAPIからは、

Wed Dec 21 06:11:32 +0000 2011

といった文字列がきますが、整形するのはとても簡単で、以下のメソッドを使うだけです。

Date.create("Wed Dec 21 06:11:32 +0000 2011").format("{MM}月{dd}日 {HH}:{mm}"); // 12月21日 15:11

サイト自体は英語ですが、説明もとてもわかりやすく書いてありますので、
使い方を間違える事は少ないです。

他にもメソッドはたくさんあり、便利過ぎて手放せないライブラリになってます。
javascriptを使った開発の際は、是非利用してみてください。