2009年1月の記事一覧｜WEB制作・WEB開発のTips＆News Kamimoto.biz Labs

2009年1月31日

今日、ヨドバシアキバで本を物色していたら、タイトルがおもしろそうな本を発見。

上流工程で成功する人、つまずく人

ちょこっと立ち読み。

ただ、技評SE新書のシリーズは、ちょっと外れも多いんですよね～

例えば、

わがSE人生に一片の悔いなし

これはひどかった。

まぁ、また立ち読みしてみて、よければ買うとしよう。

• ディレクション
• 上流工程
• 技評SE新書
• 書籍

2009年1月29日

livedoor開発者ブログで告知されていた

第一回 ライブドア テクニカルセミナーのお知らせ

が大人気みたいです。

そんなに注目を集めるようなセミナー内容かなぁーと思ってたんですが、やっぱり、Winnyの金子さんのネームバリューなのかも。

最後の演目。
【ゲスト講演】「配信の技術と法的問題」
金子 勇氏 (Winnyの開発者)
壇 俊光氏 (金子氏の専任弁護士）

他の内容は下記。

【講演1】「プラクティカル Cicindela」
【講演2】「インサイド livedoor Blog」
【講演3】「ライブドアのネットワークとトラフィック」

一応、自分は滑り込みで申込受付まではいけました。

が、結局、抽選にて受講できるかが決まると。

• Cicindela
• blog
• livedoor
• オープンソース
• セミナー
• レコメンド

Web制作・開発のための今日のブックマークです。

・大幅な高速化を実現! 流れるインタフェースのjQuery 1.3登場
jQuery1.3が先日でましたが、それをわかりやすくまとめているマイコミさんのエントリーです。

・OpenPNE 3.0リリース
この業界にいると、SNSと聞いたら、mixiよりもこちらを思い浮かべる人も多いかと思いますが、OpenPNE。
メジャーバージョンアップですね。

以下が、主な特長みたいです。

1. レイヤー分離：プラグイン等の開発を容易にするため、目的別にOpenPNEのレイヤーを分離した。
2. 外国語対応：辞書ファイルの追加により外国語対応を可能にした。まずは英語、中国語に対応予定。
3. 各種APIの搭載：3種類のAPIを用意し、各種目的に応じてSNSをよりカスタマイズしやすくした。
4. OpenID対応：Yahoo!、mixiなどが発行するOpenIDを使い、OpenPNEにログインできるようにした。

OpenPNEはプラットフォームになる！多彩なＡＰＩを搭載したOpenPNE3.0をリリース

• OpenPNE
• jQuery
• オープンソース

2009年1月27日

2009年1月のテーマは、Flash Liteなんですが、ちょうどおもしろそうな連載がありました。

gihyo.jpでケータイFlashゲーム制作レクチャーっていうのをやっているみたいです。

第17回　パズルゲームレクチャー（3）オリジナルパズルを考える！

おもしろい。
Flash Liteの勉強になる。

ということで、メモ代わりにまとめてみました。

『ケータイFlashゲーム制作レクチャー』
・第1回 ケータイFlashゲーム　制作レクチャーの始まり！

・第2回 ゲームをデザインする

・第3回 アクションゲームレクチャー(2) ゲームの舞台，ステージを作る

・第4回 アクションゲームレクチャー(3) キャラの作成と当たり判定

・第5回　アクションゲームレクチャー（4）　ゲーム制作の仕上げ

・第6回　Adobe取材レポ！！

・第7回　カードゲームレクチャー（1）　カードとそのアニメーション

・第8回　カードゲームレクチャー（2）　スクリプトを仕込む！！

・第9回　カードゲームレクチャー（3）めくったカードとその判定！！

・第10回　カードゲームレクチャー（4）　いよいよ完成！！

・第11回　マップ冒険ゲームレクチャー（1）ゲームの王道 マップ冒険ゲームをFlashで作る！

・第12回　マップ冒険ゲームレクチャー（2）PCの移動とマップスクロールを作る!

・第13回　マップ冒険ゲームレクチャー（3）マップ上のイベントを作る！

・第14回　マップ冒険ゲームレクチャー（4）イベントの作成～そして！！

・第15回　パズルゲームレクチャー（1）お手軽パズルゲームを作る！

・第16回　パズルゲームレクチャー（2）パズルを完成させる！

・第17回　パズルゲームレクチャー（3）オリジナルパズルを考える！

ちょっとまだ少しずつしか見てないですが、後でまとめて見よう。

• Flash Lite
• gihyo.jp

2009年1月25日

Web制作・開発のための今日のブックマークです。

・GoogleのAjax APIをその場で試せる『AJAX APIs Playground』がとてつもなく便利
GoogleのAjax API群をブラウザ上で試すことができるというとんでもなく便利なサイト。
AJAX APIs Playground

・The Designers Republic 倒産！！
インタビューで答えているコメントは、クリエイティブ企業にとって、本当に大事なポイントだと思う。
『会社が大きくなり、メジャークライアントと仕事をするうちに、いわゆるアカウントマネジメントなどの代理店業務を行うことが必要となり、さらに大きな仕事を続けるために、本意でない仕事をやらなくてはいけなくなった』

• googleajaxapi
• デザイン
• 経営

2009年1月23日

Web制作・開発のための今日のブックマークです。

今日は、WordPressのテーマ、IPv6ブログパーツ、オバマのブログです。

・WordPressのテーマ作成を超効率化するジェネレーター
昨年末から、WordPressがまたまた流行り始めました。
Movable Typeからの移行の記事が出てたりしましたからね。

・IPv4/IPv6のアクセス比率を可視化するブログパーツが公開
あんまり注目を浴びない気もしますが、まぁおもしろいんではないかと。

・米大統領の公式サイト、オバマ氏就任で更新--切り替え作業で不手際
注目はやはり、ホワイトハウス初のブログでしょう。

• WordPress
• ブログ
• ブログパーツ

2009年1月22日

オープンソースSNSエンジンとしてある意味枯れたと呼ばれるぐらいの技術になったかもしれないOpenPNEですが、いまだ公式解説本は出ていませんでした。

それが、2009年1月下旬に発売されるようです。

OpenPNEオフィシャルガイドブック

発売元のマイコミのサイト。

と、ここで、すでに出ているOpenPNEの書籍をまとめてみました。

OpenPNEによるSNSサイトの構築

OpenPNEではじめる自作SNS入門

OpenPNEでつくる！最強のSNSサイト

OpenPNEカスタマイズによるSNSサイトの構築と運営

• OpenPNE
• SNS

2009年1月20日

前回のIA分科会第1部ライブIAのご紹介に引き続き、IA分科会第2部のグループワークです。

前回までのおさらい。
WebSig24/7 【IA分科会】 第1部　ライブIA　調査
WebSig24/7 【IA分科会】 第1部　ライブIA　アウトプットまで

こちらは、比較的簡単にまとめます。

■お題
与えられたテーマは、東京都民銀行のリニューアルでした。

■気づきのまとめ
他チームの発表も含めてのまとめ。

・教科書サイトは同じものを採用しても、プロセスが違うと全然アウトプットも違ったものになる
・ペルソナ設定の粒度の違いが、最終的なアプローチの違い・広がりを生んでいる（結果的にそれがサイト全体の"余計な"広がりを生むというか、画面設計上苦しくなる原因にもなりうる）
・IAはユーザビリティを考えるための手段というだけではなく、その過程がアイデアの源泉となりうるという副次的な価値もある

だいたいがこんな感じでしょうか。

とりあえずのまとめでした。

• IA
• websig

前回のIA分科会レポートに引き続いて、IA分科会の第1部についてのレポートです。

4.ニーズを知る
■ターゲット
まずは、ターゲットについて考えます。

すべての案件に対していえる普遍的な事柄として、

• 当事者


• 関係者


• 利用者

この三者について、考えていく必要があります。
が、基本的には、当然「利用者」としての立場になります。

■ペルソナ
最初の手法として、まずは「自分をペルソナ」にします。
一番イメージがしやすいからです。

自分が該当案件のユーザーになったと思い、ペルソナ例として考えます。

■自分ペルソナ以外のニーズを探る
自分が想像していたニーズを持ったユーザーは、当然、世の中に多数存在していると思います。

そうしたニーズを拾い上げるために、様々な媒体のトピックを調査します。

例えば、「SNS」でニーズを探る。
関連のあるコミュニティで、トピックスを見る。
こうしたことから、ターゲットの属性を割り出すことができます。
そして、自分が知らなかった（ユーザーとして思いつかなかった）ニーズを知ることができます。

あとは、Youtubeなども参考になるでしょう。

5.AIDMAに落としてみる
上記のニーズ、ペルソナを昔からの消費者行動の仮説である「AIDMAの法則」に落としていきます。

1. Attention （注意）
2. Interest （関心）
3. Desire （欲求）
4. Memory （記憶）
5. Action （行動）

例えば、都庁のサイトを考えるケースで、1つのニーズとして、「引っ越した」を考えたとき。

■Attention （注意）
行動：場所を見る
要件（サイトの仕様）：アクセスマップ

■Interest （関心）
行動：手続きを見る
要件（サイトの仕様）：手続きの掲載

■Desire （欲求）
行動：簡単だとわかる
要件（サイトの仕様）：簡単にする工夫

■Memory （記憶）
行動：場所と方法を覚える
要件（サイトの仕様）：印刷

■Action （行動）
行動：役所に行く
要件（サイトの仕様）：－

ここで、一つ考えないといけないのが、

• プロセス・フロー


• 情報構造

プロセス・フローと情報構造は違うものであり、あくまでも「情報構造」の中に「プロセス・フロー」が存在しています。

6.情報構造
情報構造を知るためには「サイトマップ」を調べます。
その際に、サイトマップの第一階層までを見ることにします。

ここで、有用なやり方は「タグ付による整理」です。

普遍的とまでいえるレベル（＝より上位が存在しない）までまとめることで、初めて第一階層のラベリングが可能になります。

ここまで、まとめた後、最初に定義した教科書サイトと比較します。

7.画面設計
ようやくアウトプットの段階になりました。

先ほど定義した情報構造をAIDMAのプロセス・フローへと落としていきます。

画面設計とは、すなわち要素の配置です。
作り終えたら、「ペルソナとしての自分」が使えるかどうかチェックします。

ここで大事なのは、「自分が使えないと、100%誰も使えない」ということです。

また、仮説があって初めて、統計情報がいきるようになります。
したがって、常に「自分が使う」という立場の仮説を持つようにしましょう。

以上が、第1部でした。

続いて、第2部「グループワーク」をまとめてみようと思います。

• IA
• websig

2009年1月19日

ということで、月曜日になってしまいましたが、
WebSig24/7 【IA分科会】の第1部ライブIAについてまとめます。

1．調査・勉強
案件により、業界などの背景も異なる。
また、当然、インフォメーション・アーキテクトである自分自身についても、その業界についての経験の有無、また知識の深さは業界によって異なる。

したがって、まずは、前提知識を収集することから始める必要がある。
#当然、あらかじめ（十分に）知ってる場合は、スルーしてOKだと思います。

■ランキング
まずは、ランキングについて調べる。
対象は、ユーザビリティ調査など。

有名どころだとゴメスあたりが調べやすい。

まずは、今回の案件が属する業界の中で、「優秀というお墨付き」を得ているサイトを知る。

ここでのチェックポイントは下記。

・ランキングの歴史をさかのぼる　⇒　2008年→2007年→...
ランキングというものは、その年によって指標が変わる。
つまり、サイトの要件でのウェイト付けが変わる。
＝　ニーズが変わっている。

・ネット全体の流れとの比較
案件の業界動向で、「カテゴリによる検索の占める面積が減っている」傾向が見受けられたとする。
それを見て、「そう言えば、Yahoo!もディレクトリ検索をさげて、ロボット検索を最上位に持ってきたな」という推測をするような例が挙げられる。

変化の指標としては、

• ラベルとかの変遷


• 面積の大きさの変遷

2．自分の中の教科書を作る
クリエイターの作るモチベーションは、「作りたいものを作る」ことに集約される。

となれば、さきほどのランキングなどの客観的な評価を調べたからといって、必ずしも1位のサイトをお手本にする必要はない。

客観的なサイトの中から、ある程度絞り、最後は「自分の感性にあう好きなサイト」を作るべきだ。

そして、このサイトを「教科書」という位置づけにする。

また、注意としては、今回の案件のクライアントとなるサイトは見ないようにする。
なぜならば、変な偏見を持ってしまう可能性があるから。

3．実体験とWebをオーバーラップさせる
実体験とWeb上での動線を重ねる＝オーバーラップする。

一番の理想は、実際に足を運んで、写真を撮るのがいいのだが、それが不可能な場合、検索エンジンの画像検索などで調べてみるのもいい。

例えば、東京都のサイトが案件だった場合、利用するシーンを考えてみる。

例えば「引っ越し」

市役所に行く
↓
フロアマップを見る
↓
申請書を書く
↓
標識を見る（住民課を探す）
↓
カウンターへ行く

「4．ニーズを知る」に続きます。

• IA
• WebSig

2009年1月18日

Movable Typeの分科会以来、2度目のWebSig24/7のセミナーの参加。

結論からいうと最高だった。

過去にいろいろと受けてきたセミナーの中でもかなりの上位にランクイン。

まぁ、そもそもの目的意識が高かったというのもあるだろう。

ということで、自分用のまとめとしての意味合いプラス、
これから、IA（インフォメーション・アーキテクチャ）を学ぼうとする人に少しでも役に立てばいいなと。

#ちなみに、IA分科会のVol.3ということなので、過去に2回開催されてたと思うんですが、私は参加してないです。残念。

まずは、昨日のセミナーの基礎情報。

WebSig24/7のIA分科会 Vol.3ページから引用。

■開催日時2009年1月17日（土）

■構成
○第一部　本邦初公開 リアルタイムにIAの思考を追うライブIA
IA界のキーパーソンであり、この分科会の第一回からそのノウハウを共有してくれているネットイヤーグループのIAである坂本貴史さんが、情報設計のプロセスについて、頭の中で考えたことを口にしながらリアルタイムに構築していくことで、その構築プロセスを見ていきます。

○第二部　グループワーク
特定のサイトを題材に、目的と狙い、与件を設定して情報アーキテクチャの設計を行ってみよう
・誰が、なにを、どのように
・情報アーキテクチャの設計
・ナビゲーションとフローを考える
・サイト構造（ハイレベルサイトマップ）を考えよう
・画面（トップと基本フレーム）を考えよう
・コンテンツプランを考えよう
対象とするサイトについては現在鋭意考え中です。

■スピーカー
坂本貴史
ネットイヤーグループ株式会社　UXDチーム　ディレクター/インフォメーションアーキテクト
http://bookslope.jp/blog/

#坂本さんのブログ、おもしろいです。

■タイムテーブル
12:30 受付開始
13:00 開演
13:00〜18:00 IA分科会
18:20 片付け

#1部は、だいたい1時間半ぐらい？
2部のグループワークに重点が置かれた進行でした。

ということで、2部構成でした。

次のエントリーでは、1部で行われたライブコーディングならぬ、ライブIAを書きます。
で、明日ぐらいに体力があれば、2部のグループワークから、個人的に得たものをメモとして残そうかなと。

【追記】
まとめました。

こちらから。
WebSig24/7 【IA分科会】 第1部　ライブIA　調査
WebSig24/7 【IA分科会】 第1部　ライブIA　アウトプットまで
WebSig24/7 【IA分科会】 第2部　グループワーク

• IA
• WebSig

2009年1月17日

WEBプロデューサー的な今日のブックマークです。

今回のブックマークは3つ。

・第4回　わかりやすい棒グラフ作成のポイントと棒グラフの限界
これは勉強になるというか、思い出すのに最適。
大学時代、経済統計学をやっていまして、その関係で、こういうのはよく使った記憶があります。

棒グラフ、ヒストグラム。
そして、時系列データ、積み上げ棒グラフ。
それぞれのグラフが、何に向いていて、何に向いていないのか。
よくまとめられていると思います。

・mixiではじめる今どきのネットビジネス
えーと、よくmixiで、ちょろちょろやっている輩向けの商材ですね。

・IPアドレスの闇売買が始まると，インターネットは崩壊する
IPv4からIPv6への移行のためのお話。

• mixi
• グラフ

2009年1月16日

Web制作・開発のための今日のブックマークです。

まずは、jQuery。

・jQuery 1.3登場、競合プロジェクトと協力模索するSizzle投入
待ちに待ったjQueryの最新版。

マイコミジャーナルより引用。

jQuery 1.3における注目の機能は次のとおり。

• 新しいCSSセレクタエンジンSizzleの搭載


• 新しいAPIマニュアルjQuery API browserの提供


• jQuery twistを使ったイベントデリゲーションの実現


• 高速なポジション計算を可能にするためにオフセットまわりの処理を改善


• 高速なHTMLアペンディングを実現するためにHTMLインジェクション処理を改善


• イベントハンドリングを簡略化するためにイベント処理を改善

・2009年、押さえておきたいウェブデザインの10のトレンド

この中から、個人的に注力したい点は、

2.よりユーザーとの対話が可能なユーザーインターフェイス。
6.ポップアップは使用しないで、ダイアログボックスなどを使用する。
9.スムーズにスライドするコンテンツ。

かなと。

6、9を見る限り、今年もAjaxには力を入れないといけないですね。

• jQuery
• ウェブデザイン

2009年1月13日

Web制作・開発のための今日のブックマークです。

・[JS]jQueryのプラグイン33+1選 -2009年1月

コリスさんがまとめてくれた2009年1月現在のjQueryのプラグイン選。
勉強になる。
まさに、Ajax開発者、jQuery愛好家必見ですね。

・Firefoxの動作を記録して再生できるアドオン「iMacros for Firefox」

MS-Excelのマクロのような動作記録をFirefoxで行ってくれるアドオン。
以前、務めていたECの会社で、MS-Accessで開発された在庫システムを動かす際に、Yahoo!ショッピングのストアマネジャーにログインして、在庫のCSVデータをアップするというのがあったのだが、それをローカルのアプリケーションで行っていた。
これを使えば、同じような環境がFirefoxで再現できますね。

• Ajax
• EC
• Firefox
• jQuery
• アドオン

2009年1月11日

Web制作・開発のための今日のブックマークです。

・ActionScript日記 - 高速化についてまた調べてみた

今年の自分のテーマの中に、Flashがあります。
なので、必然的にActionScriptもテーマなんですよねー

• ActionScript

2009年1月10日

OFGさんのFlash Liteサンプルサイトがいい。

最終更新日：2008/7/10と、ちょくちょくと更新なさっているみたいです。

携帯用Flash サンプル置き場

• 占い：乱数とフレーム移動のみ
• 計算ゲーム：数値の足し算のみ
• テキスト入力サンプル：テキスト入力ボックスに入力された文字列を変数に格納し、再利用する
• fscommand2サンプル：fscommand2関数で携帯電話の時刻や電池残量を取得して表示させるサンプル

Flash Liteを始めたばかりの方は、参考になるのでは？？

• サンプル

2009年1月 9日

携帯版のFlashであるFlash Liteでは、Flashとの違いがいくつかあります。

今回ご紹介する「滑らかな動きを実現する」方法だと、

例えば、Flashだと、

縦の縮尺を変更する場合、

_yscale += (目標の縮尺比率 - _yscale) / 縮尺のスピード;

という一連の動きをonEnterFrameで繰り返し行えば目的の縮尺になるつれてそのスピードが遅くなることで、滑らかに拡大・縮小が行われます。

ただ、Flash Liteなので、onEnterFrameは使えません。

そこで、フレーム1とフレーム2の間で、行ったり来たりします。
#目標の値にくれば、そこで終わります。

1フレーム目：_yscale += (目標の縮尺比率 - _yscale) / 縮尺のスピード;
2フレーム目：gotoAndPlay("1フレーム目のラベル名");

これで、Flash Liteでも滑らかに動かすことが可能です。

• アクション

2009年1月 7日

検索でしよぅしたキーワードをハイライト表示しているサイトはよく見かけると思います。

それを実現するためのJavascriptライブラリのご紹介です。

「searchhi.js」

導入はいたって簡単で、searchhi.jsをダウンロードし、以下のように記述するだけです。

<script src="http://yourdomian/searchhi.js" type="text/javascript"></script>

<style type="text/css">

.searchword {background-color: yellow}

</style>

• JavaScript

WEBプロデューサー的な今日のブックマークです。

・ウェブデザインの印象を決める「タイポグラフィー」とは？

フォントのお勉強。
こういうのすごい弱いです。

・20の優れたAjax効果
Ajaxのディレクトリマネージャーは、クライアントへの提出用には最適かも。

・モバイルSEO・携帯SEOならインターネット広告代理店:株式会社サンフィニティー
モバイルSEO...についてではなくて、デザインがいいなと。

• ブックマーク

2009年1月 5日

「ブログパーツを研究したいなぁ」と最近思っています。

アイデアと少しの技術があれば作れるし、しかもコミュニティというか、データを使ったインタラクティブな物も楽しめる。

大規模ではないので、どちらかというと個人・小規模で開発が可能。

魅力的だ。

ということで、まずはいろんなブログパーツを楽しむところからスタート。

その点、最高の題材が、カヤックさんの「無料ブログパーツ：ブログパーツのポータルサイト　Blog Deco【ブログデコ】」

で、いろいろと試してみよう。

• カヤック
• ブログ
• ブログパーツ

2009年1月 3日

WebSig24/7（ウェブシグ・トゥウェンティーフォー・セブン）というWeb制作者のためのセミナー・イベントがあります。

ぼくもMovable Typeのものは、一昨年参加したことがあります。

そんな中、2009年最初は、IA分科会による非常に興味深いセミナーのようです。

IAとは、ご存知の通り、インフォメーション・アーキテクトの略なんですが、この類は自分向けの資料ではなく、最終的には他者（公開後、そのWebサイトを閲覧するすべての人）向けの知識・設計技術であるため、体系的に学んだ方が正解だと思います。

我流ではどうしても周りへの影響がマイナスにいくのではないかと。

ぼくは、立場上、営業・ディレクター的な動きなのですが、開発者にとっても非常に価値のあるテーマではないでしょうか？

おすすめです。

【IA分科会】明日から実践できるIA　Vol.3　ユーザー目的からユーザーフローを導き出す

• IA
• WebSig

2009年1月 2日

Flashは、ウェブ制作の中でも、いろんな要素が求められ、非常にハードルが高い部分もある技術です。

単純に、プログラム・デザインという棲み分けができず、両方の能力が高いレベルで求められることにも起因しています。

そんな中、PC向けのフルFlashサイトの制作を覚えるのはすぐにはいかないかもしれませんが、携帯用のFlash＝Flash Liteなら、比較的に少ないactionscriptで対応が可能です。

そこで、Flash Liteの書籍で、新しいものだけをまとめてみました。

携帯Flashスクリプト入門

携帯Flashサイト＆ゲーム制作入門

携帯Flashサイトデザイン入門

Flash for mobile

• FlashLite

2009年1月 1日

2009年が来ました。

あけまして、おめでとうございます。

さっそくですが、2009年の予想の第一弾「会員制サイトへのイーコマースの提示」

昨年（2008年）、mixiがAPIを公開しました。

また、mixiを使っている人はtwitterなどの影響で減っていると思います。
これは、何も人数だけではなくて、頻度・時間を単位にしてもこの傾向は出ていると思います。

アルファブロガーのような存在を活かしたmixiを基盤としたECサイトなどは、非常に面白いのではないかと思っています。

• EC
• SNS
• mixi

こちらで紹介してるWEB制作・WEB開発は、各種サービスサイトでご相談ください。各種ライブラリ（Prototype.js、script.aculo.us、jQuery）によるAjax開発、Movable Typeサイト制作のサイトへぜひ一度アクセスしてみてください。

• サイトマップ
• お問い合わせ
• ホームページ制作
• Web制作アイデア
• HTMLコーディング
• SEO
• SEO対策情報ブログ
• ウェブデザイン
• twitterデザイン
• twitterサービス
• twitter情報
• 動画まとめ