TAKASHI LOG

いつもは、youtubeやustreamいって埋め込みコードひろってくるだけの安易な運用をしてるんですが、（変に手間かけてもしょうがないし）、ちょっと複雑な与件がでてきたのでYouTube JavaScript Player API リファレンスと格闘しながらなんとか埋め込んでみました。 ustreamの場合も含めてまとめてみます。 ■やりたいこと ・表示サイズが小さいので、youtubeのコントロールバーを非表示にしたい ・ページのアクセントとしての使用なのでミュートした状態にしたい ・上記同様の理由で自動で再生させたい さっそくやっていきます。 いろいろすったもんだのあげく、今回の与件は埋め込みプレイヤーのパラメータ設定では できそうにないので、jsのAPIとswfobjectで実装します。 まずお約束ですが、swfobjectをダウンロードしてきます。 サンプルをみるとバージョン2.1を使ってるみたいなんだけど、 お客さんのサーバにすでにあったバージョン2.0でも動きました。たぶん最新の2.2でも問題なく動くと思います。 ヘッドタグの中身はこんなかんじです。 function onYouTubePlayerReady(playerId) { if(playerId == “player1″){ player1 = document.getElementById(“myplayer1″); play(); } } function play() { if (player1) { player1.setVolume(0); } } ボディタグの方はこんな var flashvars = {}; var params = { allowScriptAccess: “always” }; var attributes = { id: [...]

あまりの制限の多さと自分の無知に、もう２度とやらないぞ（このへんは潔い）と誓った携帯サイト用のflashコンテンツについてつまったところをまとめておきます。 まだローンチしてないけどね・・ ナレッジにもならないような基本的なことばかりですが、覚え書き。 flashコンテンツつくる仕事をしてて、なんとなく携帯flashつくる仕事をうけて、なんとなくな自分が心底嫌いになったという人が少しでも減りますように・・ だもんで基礎の基礎です、そんなことも知らなかったのか！！とか言わないように。 だってほんとに知らなかったんだもの。 外部データを取得するにはクリックが必要 与件のひとつにベースのswfはひとつだけど、更新が可能なように外部データを参照する仕組みにせよというのがありました。 りょーかい。 できると思ってた勝手に。 できないんだね。。。仕様なんだね。 まー携帯ということですから、PCブラウザみたいに勝手にデータをあれこれロードされては困るというのは確かにわかる。 できないとわかったとき自分の書いた見積もりのあまりの安さに涙がでてきました。 結局swfmillだったかな？ ベースとなるswfを元にサーバサイドでswfを生成する仕組みが入ることになりました。 再生モードによる違いを最低限しっときましょう すげー簡単に考えると以下のようなかんじかと（間違ってたら誰かおしえて） ■インライン再生モード flashバナー タグでhtmlに記述 ■インタラクティヴ再生モード flashサイト swfへの直リンク 今回のはボタン制御でflash内のいろんなシーンに飛ぶというコンテンツなんで後者です。 画面サイズには気をつけましょう インタラクティヴ再生モードの場合、携帯画面上ではフルスクリーンで表示されるわけです。 そこでまず必要になる情報が画面サイズです。 まずよくサイトとかにのってる画面サイズは、画面全体なんで、flashコンテンツを再生できる領域ではないことを理解しましょう。 例えば僕の携帯はSH703Iなんです（いまだにこんな古いの・・） 画面サイズは240ピクセル × 320ピクセル。 壁紙だったらこのサイズでつくれば問題無し。 だけども携帯サイトをブラウズできる領域は上部の電波表示や下部のナビゲーション部分をひっこぬく必要があります。 で、ぼくのは240ピクセル×240ピクセルになるです。 なんで仕様通りのサイズでつくってんのに、左右に隙間ができて文字が小さくなるのか理解できませんでした。 単純に縦の幅が収まらなくて小さくリサイズされてたわけです。 で、自分用の携帯ではよい。 けれどもっと大画面の携帯が巷の主流。 さてどうなるか。 上部にすきまができるのね・・・ どうやら携帯は自分の画面サイズの縦よりムービサイズの小さいコンテンツはセンタリングして表示するみたい。 ということで240ピクセル×240ピクセルのコンテンツを240ピクセル320ピクセルの表示領域を持つ携帯で表示した場合、上部にすきまが40ピクセルできるです。 下部には隙間ができないのは、コンテンツが実際にはもっと長いから。 余白部分はなにも存在しないのではなく、コンテンツがあれば表示される。 例えば240　320の両者に対応するコンテンツを作るには、天地の40ピクセルにどうでもいいようなものしかおかないようにして、320の場合は-40ピクセルswf内のコンテンツを上にずらせばよい。 そうすれば同じ見栄えにはならないけど、空白はなくなる。 結論としては、 1.画面サイズごとに異なる縦幅のムービーサイズを持つswfをつくって機種により振り分け 2.画面サイズをswf呼び出し時にプログラムで取得してswf内に縦幅横幅を変数としてを動的に格納→変数の値によってコンテンツを上にずらす 3.そもそもそんな予算は元からないし、１機種向けにしかつくれないといってあるので無視 のどれかを選択する必要があります。 僕のだした結論は、皆さんもうご理解いただいているかと思いますが・・ 3です。 できませんこの予算じゃ・・あきらめてよ。 [...]

なんとかつつがなく終わりました（終わりましたよね？） 参加いただいた方が知識を得て満足してもらえればと思って、サンプルつくって説明しようとしたりしました。 自分まじめな人だとおもいます。 自分でいうのもなんだけど。あと誰にも言われないけど。 途中で参加者から”もっとぐだぐだでよくね？”というありがたいつっこみがはいったので、本格的にぐだぐだで良いということになりました！！ なにいいの？ほんとにぐだぐだで？？？ だってぐだぐだだと、もういいやって人がでてくるんじゃないかと心配だったんですもの・・ というわけで途中から相当和気あいあいとなりました。 写真もこんなかんじ、いーんだ、こんなんで。（飯塚さん拝借しました） 勉強会のみんなでひとつサイトをつくろうということになったので、とりあえず俺がなにか用意することはなくなり肩の荷がおりました。 ようやくこれでひとあんしんです。 ■参加者のみなさま 深夜までお話してたりしたので、今日も仕事です・・ で、あしたも終日東京です。。 勉強会で紹介したサンプルやメーリングリストの参考記事等を、専用のブログを新たに作ってアーカイブするつもりですが、今しばらくお待ちくださいませ。

フリーランスになって初めて作成させていただいた長泉町のヘアサロン「プラーティノ」様のWEBサイトを本日リニューアルいたしました。 前回同様に店舗の特徴である「癒し」と「高級感」を訴求するため店舗内の写真をメインとした、フルフラッシュサイトとしてご提供しています。 店舗は高級なかんじですけど、店主はきさくな車好きのおじさんです。 もしよかったらぜひ！ 気持ちが癒されて男前になってしまうなんて・・ なんて素敵なんでしょう。 ヘアサロン　プラーティノ様　ホームページ

苦節5ヶ月・・ようやく本日公開を迎えました。 スポーツウェブショッパーズ様チームオーダーコンテンツ 長かった・・本当に長かった・・ フラッシュ上でユニフォームのタイプやカラー／マーキング等をシミュレートすることが可能です。 ユニフォームデータはxmlとして管理することで価格変更や品番の変更等にも対応できるつくりとしてます。 担当箇所は以下でございます。 デザイン／情報設計／フラッシュオーサリング よかったら見てください。 もし万が一気に入ったユニフォームができてしまったら、サッカーやらなくてもいいので買ってください！！！ 一家に一着ぐらいあるといざというときにいいと思いますよ。 お気に入りの書体でマーキングしたりしたら福が舞い降りるかもしれません。 いざという時がいつなのかしらないし、福が舞い降りてもあなたの行いが素晴らしいだけだと思うけど。