デザイナーのやまぴーです。

今日は非常に便利なCMSツールの１つであるWordPressについて、
より便利に使うためのプラグインを、一部ですが紹介します。

＜オススメプラグイン＞

1. 管理系

AddQuicktag
HTMLエディターを使う際、タグをボタン1つで入力できるようにします。
任意のタグを追加可能です。下記のような形で使えます。

やすです。

今回はプログラムから iTunes を操作出来る iTunes COM for Windows SDK
の基本を紹介してみます。 リリースされたのはだいぶ前なんですけども。

1. 何が出来るか

簡単に言えば、iTunesのオリジナル機能を作れます。

フォルダの曲から自動でプレイリストを作る、存在しない曲をライブラリから消す、
今デスクトップで流してる曲の情報をリアルタイムでウェブに表示など。
ちなみにサイブリッジでも実際に使用しています。

音楽再生数ランキング
http://live.cybridge.jp/music/lank.php

以下のリンクに使えるインターフェースや関数の一覧など載ってますが、
発想次第で色々と面白いものが作れそうです。

http://cuzic.net/iTunesLib/index.html

2. 使ってみる

それでは実際に使ってみましょう。 SDK を使用するには
Apple Developer Connection への無料登録が必要です。

https://connect.apple.com/

ログインの後、以下の順に進むと zip を取得できます。

Downloads > Developer Tools > iTunes COM for Windows SDK

解凍すると SampleScripts フォルダの中に
以下の 3つが入っているので試してみましょう。

CreateAlbumPlaylists.js
RemoveDeadTracks.js
RemoveUserPlaylists.js

なお、これは WSH (Windows Script Host) で動くので
普段 js ファイルを Dreamweaver などと関連付けてる人は
system32 の cscript.exe に関連付けさせるか、
コンソールから以下のように起動できます。

cscript CreateAlbumPlaylists.js

蛇足ですが、テキストファイルに start と書いて cmd.bat で保存して実行すると
そのディレクトリからコマンドプロンプトが起動します。

また、関数のドキュメントは iTunesCOM.chm にあるので参考に。

3. サンプルの解説

CreateAlbumPlaylists.js に軽くコメントを書いてみました。
これだけでアルバムから自動でプレイリストを作れるって便利ですね。
自分用にいろいろカスタマイズ出来そうです。

var iTunesApp = WScript.CreateObject("iTunes.Application");
var mainLibrary = iTunesApp.LibraryPlaylist;
// ライブラリの指定、一般的には My Music フォルダ
var mainLibrarySource = iTunesApp.LibrarySource;
var tracks = mainLibrary.Tracks;
var numTracks = tracks.Count;
var i;
var albumArray = new Array();

// アルバムのリストを生成
for (i = 1; i <= numTracks; i++){
   var currTrack = tracks.Item(i);
   var album = currTrack.Album;
   if ((album != undefined) && (album != "")){
      if (albumArray[album] == undefined){
      albumArray[album] = new Array();
   }
   // アルバムへ曲を追加
   albumArray[album].push(currTrack);
   }
}

// アルバムごとにプレイリストを生成
for (var albumNameKey in albumArray){
   var albumPlayList;
   var trackArray = albumArray[albumNameKey];
   // プレイリストの生成
   albumPlaylist = iTunesApp.CreatePlaylist(albumNameKey);
   for (var trackIndex in trackArray){
      var currTrack = trackArray[trackIndex];
      // 曲の追加
      albumPlaylist.AddTrack(currTrack);
   }
}

4. 今後

個人的には、iPhone のようにアルファベットをクリックすると
そのアーティストが絞込み検索される機能を作ろうと思ってます。
例えば B をクリックすると以下のアーティストが表示される、みたいな。

Black Eyed Peas
Blink 182
Brandy

完成したらこちらで紹介したいと思います。 それではまた。

前回はモバイルXHTMLでのサイト制作の下準備について取り上げましたが、今回は具体的なスタイルの記述方法について書かせていただこうと思います。
前回の記事は下記なので、まだご覧になっていない方はそちらを先に。3キャリアの中で癖のあるdocomoのCSS仕様についても軽くまとめています。
モバイルでXHTMLを用いてデザイン性のあるサイトを制作する方法（準備編）

3キャリアのCSSの特徴

さてさて、まずは3キャリア間で使えるCSSの記述方法についてです。

i-mode
・外部 css は非対応
・インラインの css のみ対応（リンクまわりのみ内部参照に対応）
・疑似クラスは link　visited　focus に対応

EZweb・Yahoo!ケータイ
・疑似クラスは link　visited　に対応

基本的に、
・非対応のスタイルは無視して表示される

docomoのみ外部CSSに対応していないので、基本的にインラインでCSSを書いていきます。これがちょっと面倒です！

具体的なスタイル指定について

文字色

<span style="color#008CD6;">テキスト</span>

ちなみにdocomoの絵文字は上記の画像のように平面になっており、文字色の指定も反映します。
デフォルトの文字色を使いたい場合は色指定をしているspanで絵文字をくくらないようにしないといけないので少し厄介ですが、
文字と絵文字を色を合わせたり、イメージにより合う色を設定することも出来るので上手く使いこなしてください！


上記は例文。デフォルトの絵文字とちょっと色が違う事に気づいてもらえたら嬉しいです。
ちなみにシカータくん絵文字は私のお手製です笑

文字サイズ小

<span style="font-size:xx-small;">テキスト</span>

文字サイズ大

<span style="font-size:xx-large;">テキスト</span>

それぞれx-small,x-largeの値も設定可能ですが、au端末だとデフォルトの文字サイズから変化しないため、それぞれワンランク上（下）の値を設定するのが良いと思います。

blink要素

<span style="text-decoration:blink;"><blink>テキスト</blink></span>

docomo端末のみblinkが使用できないため、spanにCSSを記述します。そして他端末用にblinkタグをネストします。

marquee要素

<span style="display:-wap-marquee;"><marquee>テキスト</marquee></span>

こちらもblink要素と同じです。docomoのスタイル用のspanの中に、marqueeタグをネストします。

背景指定

<div style="background-color:#008CD6;">テキスト</div>

float指定

<img style="float:left;" src="test.gif" align="left" />
テキストテキスト<br />
<div style="clear:left;"></div>

auのみfloat指定が使えないので、au用にalign="left"を指定しています。
clearはdiv要素もしくはspan要素のみ可能です。


モバイルXHTMLで主に使うスタイル指定は上記になります。
モバイルのコーディングはまだまだ奥が深く、端末に依存した仕様もまだまだ見受けられますが、私は現在上記のような形でコーディングしています。
記事の内容についてはサイブリッジのモバイルチームで検証した結果ですので、少しでも参考にしていただければ幸いです。

こんにちは。逆から読んでもきつつきです。


前回、GoogleAnalyticsAPIの記事を書かせていただきましたが、データを眺めてもパッとデータの解釈ができないことがあります。
そこで今回は、グラフを描くPHPライブラリ｢PHPlot｣を使ったグラフの描き方について書きます。

PHPlotについては調べるといくつか記事が出てきますが、一通り関数が紹介されているこちらのページがオススメです。

PHPlotの使い方

アクセス解析情報や会員情報などの集計ページをグラフィカルに作ることが可能ですね。

グラフを描く

まずは基本的なところから。棒グラフを書くサンプルコードです。
(ライブラリのロードなどは省略しています。)

        // データの作成
        for($i = 0;$i < 20;++$i){
       
            $plot_data[$i] = array(
                        $i,
                        900+rand(0,200),
                        450+rand(0,100),
            );
        }
       
        // グラフの作成
        $graph = new PHPlot(700,200);
        $graph->SetPlotAreaPixels(60,0,650,170);
        $graph->SetNewPlotAreaPixels(0,10,700,200);
       
        // グラフの種類
        $graph->SetPlotType("bars");
        $graph->SetLineStyles(array("solid","solid"));

        // データの指定
        $graph->SetDataType("text-data");
        $graph->setDataValues($plot_data);
       
        // ラベルの設定
        $graph->SetYLabelType("data");
        $graph->SetPrecisionY(0);
        $graph->SetYTitle("data1,data2", "plotleft");

        $graph->SetXDataLabelPos( 'plotdown' );
        $graph->SetXTickPos( 'none' );
        $graph->SetXTickLabelPos( 'none' );   

        // 凡例の指定
        $graph->SetLegend(array("data1","data2"));
        $graph->SetLegendPixels(75,15);

        // 描画
        $graph->DrawGraph();

いろいろと設定していますが、最初に紹介したURLをご覧いただければ、関数の機能はほとんど分かると思います。

グラフを描く(2)

今度は折れ線にしてみました。そして軸が右側です。
サンプルコードはこちら。

        // データの作成
        for($i = 0;$i < 20;++$i){
       
            $plot_data[$i] = array(
                        $i,
                        (45+rand(0,10)),
                        (20+rand(0,10)),
            );
        }
        // グラフの作成
        $graph = new PHPlot(700,200);
        $graph->SetPlotAreaPixels(60,0,650,170);
        $graph->SetNewPlotAreaPixels(0,10,700,200);

       
        // グラフの種類
        $graph->SetPlotType("Lines");
        $graph->SetLineStyles(array("solid","solid"));
        $graph->SetDataColors(array('orange', 'blue'));

        // データの指定
        $graph->SetDataType("text-data");
        $graph->setDataValues($plot_data);
       
        // ラベルの設定
        $graph->SetYLabelType("data");
        $graph->SetPrecisionY(0);

        $graph->SetYTickIncrement(10);
        $graph->SetPlotAreaWorld(0,0,null,100);

        $graph->SetYTickPos("plotright");
        $graph->SetYTickLabelPos("plotright");
        $graph->SetYTitle("data3,data4", "plotright");

        $graph -> SetXDataLabelPos( 'plotdown' );
        $graph -> SetXTickPos( 'none' );
        $graph -> SetXTickLabelPos( 'none' );   

        // 凡例の指定
        $graph->SetLegend(array("data3","data4"));
        $graph->SetLegendPixels(75,15);
       
        // 描画
        $graph->DrawGraph();

もう少しスマートにも書けそうですが、最終的に次のようなグラフを作りたかったので、少し細かく設定をしています。

グラフを合成する

グラフを重ねたサンプルは探しても見つからず、1枚に2つのグラフを描いているサンプルを辛うじて発見できたので、そこからいろいろとやってみました。

ポイントは、まずPHPlotのインスタンスを生成した直後に

        $graph->SetPrintImage(0);

を実行することです。これで

        $graph->DrawGraph();

を実行しても、描画データがバッファリングされて出力されません。
この状態で2つのグラフを描画した後に、最後に

        $graph->PrintImage();

とします。
2度目の描画は1度目のグラフに上書きされるので、Y軸の補助線(グレーの水平破線)やデータラベルを消したり、凡例を作成するタイミングを工夫したりしなければなりません。

細かい部分は、サンプルコードをご覧ください。

        // データの作成
        for($i = 0;$i < 20;++$i){
       
            $plot_data[$i] = array(
                        $i,
                        900+rand(0,200),
                        450+rand(0,100),
            );
        }
       
        // グラフの作成
        $graph = new PHPlot(700,200);
        $graph->SetPrintImage(0);
        $graph->SetPlotAreaPixels(60,0,650,170);
        $graph->SetNewPlotAreaPixels(0,10,700,200);
       
        // グラフの種類
        $graph->SetPlotType("bars");
        $graph->SetLineStyles(array("solid","solid"));

        // データの指定
        $graph->SetDataType("text-data");
        $graph->setDataValues($plot_data);
       
        // ラベルの設定
        $graph->SetYLabelType("data");
        $graph->SetPrecisionY(0);
        $graph->SetYTitle("data1,data2", "plotleft");
        $graph->SetPlotAreaWorld(0,0);

        $graph -> SetXDataLabelPos( 'plotdown' );
        $graph -> SetXTickPos( 'none' );
        $graph -> SetXTickLabelPos( 'none' );   

        // 凡例の指定
        $graph->SetLegend(array("data1","data2","data3","data4"));
        $graph->SetLegendPixels(75,15);

        // 描画
        $graph->DrawGraph();
       

        // データの作成
        for($i = 0;$i < 20;++$i){
       
            $plot_data[$i] = array(
                    "",
                    (45+rand(0,10)),
                    (20+rand(0,10)),
            );
        }
       
        // グラフの種類
        $graph->SetPlotType("Lines");
        $graph->SetLineStyles(array("solid","solid"));
        $graph->SetDataColors(array('orange', 'blue'));
        $graph->SetDrawYGrid(false);

        // データの指定
        $graph->SetDataType("text-data");
        $graph->setDataValues($plot_data);
       
        // ラベルの設定
        $graph->SetYLabelType("data");
        $graph->SetPrecisionY(0);
        $graph->SetYTickIncrement(10);
        $graph->SetPlotAreaWorld(0,0,null,100);
        $graph->SetYTickPos("plotright");
        $graph->SetYTickLabelPos("plotright");
        $graph->SetYTitle("data3,data4", "plotright");

        $graph -> SetXDataLabelPos( 'plotdown' );
        $graph -> SetXTickPos( 'none' );
        $graph -> SetXTickLabelPos( 'none' );

        // 凡例の指定
        $graph->SetLegendPixels(-200,-100);
       
        // 描画
        $graph->DrawGraph();
       
        $graph->PrintImage();

GoogleAnalyticsAPIでデータを取得して、PV数に直帰率を重ねたりとかできますね。グラフの種類もいくつかありますが、いろいろと組み合わせてみるとおもしろそうです。