Proceesingとは、デザイン用のプログラミング言語で、JAVAでできている。
言語としては、かなりシンプルでわかりやすい。外部からデータを取得できるので、ビジュアライザとして使うことも可能。

このJavascript版として、2,3年前にリリースされた。JAVA版とメソッドがほとんど変わらないので、日本語ドキュメントもあって、何気に便利。習得するコストは、低いのではないかと思った。ただ、やっぱり独自の言語なので、クセはあるけどJavascriptが分かれば簡単に覚えられるレベルだと思う。

Proceesing.js公式サイト

日本語版のリファレンス関連した記事

• jQuery.Deferredってなんとなく便利のような気がする
• Google Maps API V3が面白い！
• Google Map API V3のマニュアルの日本語化
• phoneGapの可能性
• WordPressチートシート

「AJAXサイトをクローラブルにする – 検索エンジンフレンドリーなAJAX実装方法」という記事が掲載されていた。

「#」だけでなく「#!」をつけることでキャッシュされる仕様になっているみたい。
※古い記事なので、知っているよっていう感じでしたら、スルーしてください。

branberyheag.jpを実装するときは、Javascriptで動的にURLを変更してクロール時には、ビュアなURLにしていた。
もちろんHTML5ならこの問題も解決するようなAPIもあるけど、IEには対応していない。

素直にこれを使うというのも素直でいいと思うけど。
現実的に無理なら堅実に考えて実装を考えてもいいのかもね。関連した記事

• カスタム投稿を使ってサイト構築の資料
• [AS3]オブジェクトの重なり順制御するには・・・
• Flexのスクロールバーをデザインする
• wordpressでページテンプレートを選択できるようにするには・・・
• 「JavaScriptを高速化する6つのテクニック」という記事を読んだ

function testFunc(){

return{x: 90, y: 10}

}

var hoge = testFunc();

hoge.x  // 90

hoge.y //80

というような感じになる。これを覚えていると座標の計算とか値が複数あったときにすごい役に立つ。関連した記事

• Javascriptの配列を空にする方法
• Windowの一番下までスクロールされたことを取得する方法
• Javascriptで文字列検索をする
• HTML5のカスタム属性について
• 画像にbase64をかけてhtmlやCSSに埋め込む

<img src="http://hogehoge.jp/hoge.png">

と書いていたものを

<img src="data:image/png;base64,iVBORw0KGgo....">

と書けるようだ。

オンラインツールでひとつひとつ変換するのもいいけど、PHPで変換すればアップロードのみで対応ができそう。

<?php
$img = file_get_contents( 'http://hogehoge.jp/hoge.png' );
if ( $img !== false ) {
$img = base64_encode( $img );
}
?>

上記はあくまでもサンプルだけど、これを関数にしてhtmlに埋め込んで、base64にしてキャッシュすればかなり軽量化されるかもしれない。
未検証だけど・・・

「<img src=”data:image/png;」のpngの部分を適宜変える必要があるので、下記のような判定が必要。

<?php
...
static protected function getDataType( $img_link ) {
switch( exif_imagetype( $img_link ) ) {
case IMAGETYPE_GIF      : $res = "gif"; break;
case IMAGETYPE_JPEG     : $res = "jpg"; break;
case IMAGETYPE_PNG      : $res = "png"; break;
//          case IMAGETYPE_SWF      : $res = ""; break;
//          case IMAGETYPE_PSD      : $res = ""; break;
//          case IMAGETYPE_BMP      : $res = ""; break;
//          case IMAGETYPE_TIFF_II  : $res = ""; break;
//          case IMAGETYPE_TIFF_MM  : $res = ""; break;
//          case IMAGETYPE_JPC      : $res = ""; break;
//          case IMAGETYPE_JP2      : $res = ""; break;
//          case IMAGETYPE_JPX      : $res = ""; break;
//          case IMAGETYPE_JB2      : $res = ""; break;
//          case IMAGETYPE_SWC      : $res = ""; break;
//          case IMAGETYPE_IFF      : $res = ""; break;
//          case IMAGETYPE_WBMP     : $res = ""; break;
//          case IMAGETYPE_XBM      : $res = ""; break;
default : $res = false;
}
return $res;
}
?>

オンラインツールもあるので、これもメモ。

Image to data URI convertor
http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/

WordPressテンプレートやWebサービスを作るときに役に立つと思う。

参考にしたサイト

• http://d.hatena.ne.jp/moogme/20090814/p3
• http://kaworu.jpn.org/kaworu/2008-04-06-1.php
• http://tokkono.cute.coocan.jp/blog/slow/index.php/xhtmlcss/reduce-http-requests-using-data-uris/
• http://css-tricks.com/5970-data-uris/

関連した記事

• Proceesing.jsが何気に面白い
• jQuery.Deferredってなんとなく便利のような気がする
• twitterの画像のURLを取得する
• HTML5のカスタム属性について
• FlexFTP

ということで、これでアクセストークンが取得できたので、自分の写真を取得できるようになった。これでまたなんか作りたいな。
シンプルにスライドショーとかでもいいけど、もっとなんか面白いことやってみたいな。。。関連した記事

• Windowの一番下までスクロールされたことを取得する方法
• simple XMLで名前空間を取得する方法
• 久々にflashに感動した
• Flexで縦書きする方法ってあったんだｗ
• [AS3.0][JS]クロスドメインに対応する

複雑な処理とかする場合は、使える。
どこかの案件で試してみようかな。

参考になったサイト

• jQueryのDeferredとPromiseで応答性の良いアプリをー基本編
• jQueryのDeferredとPromiseで応答性の良いアプリをー実践編
• jQuery.Deferredって何

関連した記事

• Proceesing.jsが何気に面白い
• phoneGapの可能性
• お仕事用サイト「Branberyheag!!.jp」をローンチしました〜
• Web Worker とWeb Storageの組み合わせで何ができるか考えてみた
• JavaScriptの多次元配列と連想配列

デベロッパーライセンスを取得アカウントは、別に作った方がいい。
英語表記じゃないと有償版の認証が通らないので、iTunesなどで使っているものとは別の方がいい。

支払い情報も英語表記で、入力する。
ライセンスをカートに入れて、購入手続きをする時に、自分の住所を入れるところがある。
ここも英語表記で入力する。ここも英語で入力しないと認証が通らない。
↑自分は、ここで日本語で入れたためにライセンスの認証が通らなかった。

もし、ライセンス認証がうまく行かなかった場合は、、、
認証失敗するとFAXで自分の身分証明書を送ってください、と英語で出るけど
やりとりにものすごい時間がかかるので、デベロッパーサポートセンターに連絡した方が早い。

サポートセンター電話番号一覧 

電話だと一瞬で終わってしまう。
原因は、デベロッパー登録したときの住所と支払い時に入れた情報が同じでないとこういうことが起こるらしい。

ちなみに、円高の影響でライセンス料は8400円だった。関連した記事

• Titanium Mobileでなんかを作ろう
• iPhoneアプリのアイデアに悩む
• Javascriptで文字列検索をする
• adobe AIRでのBasic認証
• WordPressのログインフォームをテンプレートに実装する方法

HTML5では、カスタムできる属性がある。

書式は

<h1 data-hoge="hoge">タイトル</h1>

というような感じでかけるようだ。かなり便利でしょ！

参考サイト

http://havelog.ayumusato.com/develop/html/e158-html5-custom-data-attribute.html

属性を作るにはルールがあって、最初「data-」をつけないといけない。

HTML5で作るんだったらぜひ、これを使ってみたい。

 関連した記事

• 画像にbase64をかけてhtmlやCSSに埋め込む
• Javascriptで複数の戻り値を返す方法
• HTML5についていろいろと調べてみた
• カスタム投稿を使ってサイト構築の資料
• Javascriptの配列を空にする方法

<li><h2>ログイン</h2>
<?php if (is_user_logged_in()) : ?>
Welcome! <?php global $current_user; echo $current_user->display_name ?>さん<br />
ログアウトは &raquo; <a href="<?php echo wp_logout_url() ?>&amp;redirect_to=<?php echo esc_attr($_SERVER['REQUEST_URI']) ?>">こちら</a>
<?php else : ?>
<form method="post" action="<?php echo wp_login_url() ?>?redirect_to=<?php echo esc_attr($_SERVER['REQUEST_URI']) ?>">
<p><label for="login_username">ユーザー名：</label><br />
<input type="text" name="log" id="login_username" value="" /></p>
<p><label for="login_password">パスワード：</label><br />
<input type="password" name="pwd" id="login_password" value="" /></p>
<p><input type="submit" value="ログイン" /></p>
</form>
<?php endif; ?>
</li>

これをうまく組み替えて使うと良いみたい。
デフォルトのテンプレートぽい作りになっているので、適宜、自分のテンプレートに合うように作ればいい。

管理画面に行かせないようにするには

function mts_check_login() {
global $current_user;

get_currentuserinfo();
extract($current_user->wp_capabilities);
if ($subscriber) {
wp_redirect(get_bloginfo('url'));
}
}

add_action('admin_init', 'mts_check_login');

これをfunction.phpに入れておく。
これで管理画面に行けないようすることができるみたい。実用性はかなりあるので、メモ。

参考したサイト

「WordPress ログインフォームをページ上に表示してログインするには」
http://web.mt-systems.jp/archives/354関連した記事

• wordpressでページテンプレートを選択できるようにするには・・・
• WordPress3.0機能メモ　 featured image アイキャッチ画像
• simple XMLで名前空間を取得する方法
• 画像にbase64をかけてhtmlやCSSに埋め込む
• Instagram api にアクセスできた

お仕事用サイト「Branberyheag!!.jp」を公開。

最初は、自分のポートフォリオサイトを作るつもりなかったのですが、段々、システムが出来上がってくると、いい感じの完成度になってしまって、これを単純に公開するのも勿体ないなと思って、自分用のサイトにしてみた。

技術的な話をするとWordPressでできていて、カテゴリー、ページ、記事というようなシンプルな構成でできあがっている。ただ、ページ遷移は、なくてJQueryのload()を使って、HTMLを呼び出している。戻る、進むボタンを有効にするため、ハッシュタグをURLに組み込んで、あとはプラグインでの処理を行っている。

あとは、スライドショーは、Arrayに画像のパス、サイズをつっこんで、ページおくりしたときに呼び出している。DOMを操作して、消えたり出したりするよりは、処理が速いような気がする。

これを作ったときにいろいろとTipsが溜まったので、ネタを公開していきたい。

これ、フェーズ１なんで、もう少し手直しと機能を追加する予定。

以前やった、クライアント案件で、この技術を使えばもっといいものができたとこれを作りながら思った。いつか修正したいけどね。関連した記事

• コミュニティサイト「すきなばしょ」プレリリース
• 「instagram Wall」を作った
• jQuery.Deferredってなんとなく便利のような気がする
• WordPress3.0にバージョンアップしたら、テンプレートJavascriptエラーになった
• JQueryプラグイン「skroll.js」