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

2009年9月30日

昨日は、「2009モバイルASP・SaaS最新事情」に参加してきました！

「2009モバイルASP・SaaS最新事情」

ゲストとして、お話をされていたのは、こちらのお三方です。

• 井上英昭氏（ビートレンド株式会社 代表取締役）
• 中谷健一氏（トリムタブジャパン有限会社 代表取締役）
• 吉田悟美一氏（株式会社イオス 代表取締役/CEO デザイナー/ モバイルマーケター）

このセミナーでは、モバイルのASP・SaaSをテーマにいろんなお話が聞けました。

デザインに力を入れたモバイルサイト構築ASP【Rockbird-ロックバード】を提供されているイオスの吉田さんには、お話の途中で、共同運営中の「モバイルデザインアーカイブ」ならびにその書籍である「モバイルデザインアーカイブの本。」をご紹介いただきました。

モバイルデザインアーカイブの本。―携帯Webコレクション
	春日出版 2009-08 売り上げランキング : 3198 おすすめ平均 Web業界に貢献する書籍 よくできています。 時代の流れにピンポイントにマッチした一冊 Amazonで詳しく見る by G-Tools

お話の中で、特におもしろかったのは、中谷さんのお話でした。

キーワードだけ挙げると、「黄金のゴキブリ」、「3つの時期」など。

「黄金のゴキブリ」は、ゴキブリに例えては、ほんとはだめなんですが、初期の投資の時期を超えて、信頼醸成の時期を迎え、数名のお客様から信頼を得れるとすると、その先には、もっと多くの潜在的な顧客が待ち受けている。

というお話です。

そう、台所などで、ゴキブリを1匹見つければ、家の中には、数十匹、数百匹いると思えっていうお話から来てます。

あとは、ビートレンドの井上さんのお話。

クラウド、SaaS利用のメタファー表現が印象的でした。

ASP・SaaSを避けるユーザの理由の1番目が「セキュリティーについての不安」らしいです。

自分たちで、セキュリティーを担保する方が、かえって「危険」だと井上さんはおっしゃっていました。

わかりやすい例えをされて、「自分たちで、金庫を買って管理するよりも、銀行に預金したほうが、安全かつ安価」という説明でした。

ふむふむ、納得。

そうした点で、クラウド・SaaSのメリットですね。

クラウドコンピューティングについては、国内の大手ベンダーであるNSSOLさんが、ちょうど、自社サイト内で、連載をしてるみたいです。

『クラウドコンピューティング連載 クラウドコンピューティングとは』

参考になりますね。

あとは、仮想化なども参考になりますね。

• SaaS
• クラウド
• モバイルASP
• 仮想化

2009年9月26日

このWeb制作ブログにアクセスいただく際に、「au エミュレータ」や「ソフトバンク エミュレータ」という検索クエリが一番多いです。

あと、趣味で、ケータイサイトデザイン集「モバイルデザインアーカイブ」を運営してるということもあり、ケータイサイト制作を始める際のお役立ちリンクをまとめてみました。

ケータイサイトをPCで確認

大手3キャリアともに、純正のエミュレータ（シミュレータ）が存在します。

• NTTドコモ iモードHTMLシミュレータ
• NTTドコモ iモードHTMLシミュレータII
• au Openwave SDK 6.2K
• au Openwave SDK 6.2Kのダウンロード
• ソフトバンク ウェブコンテンツヴューア

ドコモの「iモードHTMLシミュレータII」について補足しておきます。

901iシリーズ以降のiモード対応HTML、Flash、デコメールテンプレートや、901iSシリーズ以降のPDF、902iシリーズ以降のトルカ、906iシリーズ以降のデコメアニメなどが確認できるようになっています。

ケータイ端末のディスプレイ

各キャリアのケータHTMLの仕様

一度は、各キャリアの仕様説明ページを読んでおく必要があります。

• NTTドコモ iモード対応HTMLのバージョン
• au EZfactory
• ソフトバンク Mobile Creation

また、各キャリアごとにページ容量が異なるため、それにも注意しなくてはいけません。

また、画像ファイルについても留意する必要があります。

■ドコモ
GIF、JPEG。
ただし、あまりにも古い機種の場合、GIFしか表示できません。

■au
GIF、JPEG、PNG、BMP。

■ソフトバンク
JPEG、PNG。

また、「GARAKU FP Server Expansion」というフリーソフトも便利です。

以下、引用します。

GARAKU FP Server Expansion は、オリジナル画像を用意するだけで携帯電話の各キャリア＆機種に最適な容量の画像に自動調整し、配信するサーバ・ミドルウェア・モジュールです。

Flash Liteについて

■Flash Lite 1.0
容量制限は20KB。

■Flash Lite 1.1
現在の主流です。
Flash4をベースに、容量制限は100KB。

■Flash Lite 2.0
Flash7をベースに、容量制限は150KB。
ただし、ドコモ端末では採用されていません。

■Flash Lite 3.0
Flash8ベースで、FLV（Flashビデオ）にも対応しています。
最新機種でのみの対応です。

また、再生方法は、「インライン再生」、「インタラクティブ再生」2種類あり、それぞれ用途が異なります。

・インライン再生
HTML内に含み、キーイベントが使用できません。

・インタラクティブ再生
直接、swfを参照し、キーイベントを使用することができます。

以上、まとめてみました。
iPhone、Androidなどのスマートフォンも日本の中で、ある程度の地位を占めるようになってきました。

でも、ガラパゴスと呼ばれた日本のケータイでも、もっともっといいケータイサイトが出てくればいいなと思います。

• まとめ
• ケータイサイト
• モバイルサイト
• リンク集
• 制作

2009年9月25日

Can't call method "entry_based" on an undefined value

というMovable Typeでのエラーがでてきました。

最初は、「このMovable Typeのエラーはなんだろうなー」ってことで、びっくりしたんですが、下記のMTタグが原因のようです。

<$mt:ArchiveTitle$>

テンプレートの種類によりけりで、エラーが発生します。

たとえば、「検索結果」テンプレート。
#当たり前か...

ただ、テンプレートの保存時には、エラーが出なくて、実行段階で初めて出てくるので、気づくのに厄介なんですよねー

ということで、Movable Typeネタのメモでした。

• MT
• Movable Type
• ムーバブルタイプ

2009年9月20日

龍球インクの中川 宗典さんのセッションが非常におもしろかったのでまとめておきます。

タイトル「予算の関係で？プロに頼めない場合に、自分たちで撮影する場合のテクニック＆アイデア」

シチュエーションとしては、プロに頼むだけの予算がない場合で、そうしたケースにおいて「後々困らないようにするための現場でのテクニック」が主題でした。

■前提
撮影に入る前の大前提として、今回の撮影は下記のどちらに比重が置かれているかを確認する。

• とりあえず写っていることが最重要（例：集合写真）
• アーティスティックに雰囲気を残すことが最重要（例：スピーカーへのプレゼント）

当日の撮影が終わった後に焦らないようにするために、「バリエーションを増やす」ことを謳われていました。

■PART1「縦＋横」
同じ立ち位置で、連続して、とりあえず縦と横の両アングルで撮影しておく。
こうすることで、実際のサイト制作時に、ページレイアウトに依存することなく、写真が確保できる。

■PART2「振り向く」
180度振り向くのではなくて、身体をねじる。つまり、やや確度をつけてみる。
たとえば、演壇に向かって撮影したら、少し向きを変えて、聴衆を撮影するなど。

■PART3「引き＋寄り」
これは、単純に、ズームイン・ズームアウトのことです。

■PART4「ハイアングル」
台に乗り、上から撮ってみる。

■PART5「後ろ姿」
後ろ姿を撮ってみる。
これだけで、スピーカーの違った魅力が出せる。

■PART6「『盗撮』風」
ちょっと離れた所から、「盗撮」しているように撮ってみる。
意外な側面・魅力が出せる。

■PART7「集合写真では連写する」
被写体が1人ではなくて、複数の場合、どうしても誰かが目をつぶったりしてしまう。
そうした際の選択肢を増やすために、常に「連写する」ことを忘れない。

残りは、RAWデータのお話でした。
これは、制作時の工数を抑えるというメリットがあり。など。

うーん、濃いなぁ。

• CSS Nite
• カメラマン
• セミナー
• 写真
• 撮影
• 銀座

2009年9月18日

Google Chrome 3の安定版が登場していたので、ちょっと遅くなったけどインストール。

Google Chrome 3 ダウンロード

「Google Chrome 3」安定版公開、新規タブを改善、テーマも導入

「Google Chrome 3」安定版では、JavaScriptのパフォーマンスは前回の安定版に比べて25％改良されたという。

HTML5にもどんどん対応してる。

今度、HTML5を勉強するので、ちょっとずつ試していきたいところ。

あと、Google Chrome への最大の要望は、「『タブの固定』をオンにさせてほしい」ってこと。

タブを横へ移動させようとすると、いつも、下にずれて、別ウィンドウになる。。

わずらわしい。

それ以外は、Firefoxとの併用で抜群の活躍を見せているんだけどね。

• Google
• Google Chrome
• HTML5

2009年9月 9日

最近、モバイルサイト制作関連のブログエントリーが、はてブとかでもホッテントリに入ってたりして、うれしい限りです。

・『モバイルサイトの作り方』制作に役立つサイトをまとめてみた。

モバイルデザインアーカイブもご紹介いただきました。
ありがとうございます。m(_ _)m

どちらかというと、プログラマーさん向けの内容ですね。

・いまからでも遅くない！ケータイデザインの基礎固め

カヤックの方が書かれていて、かなり話題にもなった記事です。

ケータイデザインの基礎が学べます。

• デザイン
• モバイル

2009年9月 6日

webでは、今も昔もポップアップを使いたくなるときがあります。

今回、ちょうどよさげなのがあったのでご紹介。

jQueryで作るポップアップウィンドウ「prettyPhoto.js」

今回は、モバイルデザインアーカイブのお問い合わせで、iframe版を使用しました。

「サイト掲載依頼」を選択し、表示される『モバイルサイトのデータをアップロードいただけます。』をクリックしてください。

lightbox風の表示で、別のファイルをiframe表示してくれます。

導入は簡単です。

下記のように、jQueryとprettyPhoto.js、CSSを読み込み、prettyPhoto用のスクリプトを読み込みます。

今回のiframeは下記のようなソースになります。

Google.com

• jQuery
• prettyPhoto
• ポップアップ

jQueryとprototype.js を同時に使う際は、ときどきあるかと思います。

jQuery、Prototype.jsともに、書式が似てるために競合（コンフリクト）してしまいます。

たとえば、こんな感じです。

$('id_name');

これを解除するために、jQueryの $(); を違う名前に変えて使用します。

通常、headタグの中に下記を読ませますが、その際に2行JavaScriptを追加するだけです。

読ませる順番も、Prototype.js、jQuery、コンフリクト回避のスクリプトの順になります。

• Prototype.js
• jQuery

今回、仕事で、jQueryでのtableの行の表示・非表示を行ったので、それのメモです。

JavaScriptのソースは下記です。

クライアント案件でも結構出くわしますよね。知ってると便利です。

$("#radio01").click(function() {
    $("#row").show();
});
$("#radio02").click(function() {
    $("#row").hide();
});

• JavaScript
• jQuery
• table
• tr

2009年9月 3日

待ちに待ったヒトも多いと思われる、「Movable Type 5」のベータ版がいよいよ出ました。

ウェブサイト管理の新標準。Movable Type 5 : Movable Type

メジャーバージョンアップ。

titleタグにもあるように、今回は「ウェブサイト」を意識した設計。

MT3がブログ。
MT4がブログ＋サイト。

そして、MT5でウェブサイトに重点を置いたソフトウェアへ。

という印象。

昨日は、sixapartのパートナーであるProNetを集めてのMT5説明があったらしい。

sixapartのサイトでは、MT5の新機能として以下が大きくあげられている。

• ウェブサイトが更に構造的に管理できるように


• 「テーマ」機能


• 更新履歴の管理


• カスタムフィールドの強化


• 管理画面の新デザイン

ということで、とりあえずインストール。

まずは、sixapartのサイトからダウンロード。

Movable Type 5.0 ベータ

下の方に「Movable Type 5.0 Beta 1 日本語ビルドをダウンロード (MT-5.0b1-ja.zip)」とあるので、そちらから。

続いて、ファイルをアップし、mt.cgiを叩く。

基本的には、MT4のインストールとほぼ同じです。

画面の遷移だけアップしておきます。

パスを指定。

サーバ環境のチェック。

あらかじめ作成しておいたデータベースを設定します。

その後、自動でインストールが走ります。

MT5の管理画面です。

Hello!Movable Type5.

が、完全にWordPressですね(笑)。
ちょっとショック。。。

デフォルトのテンプレート（テーマというのか）が、2つ。

• クラシックウェブサイト
• プロフェッショナルウェブサイト

キャプチャは、プロフェッショナルウェブサイトの方です。

ということで、まずは入れてみましたという感じ。

これから、ちょっと遊んでみようかなと。

• MT5
• Movable Type

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

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