NETdeCM blog ～NETdeCMスタッフが日々の仕事についてつぶやく～ http://www.netdecm.com/blog/ このサイトは、タカヤグラフィスが提供する『NETdeCM(ネットでCM)』や『さがしもの』での撮影風景などをつづるサイトです。 ja Nucleus CMS v3.41 © Weblog http://backend.userland.com/rss http://www.netdecm.com/blog/nucleus/nucleus2.gif NETdeCM blog ～NETdeCMスタッフが日々の仕事についてつぶやく～ http://www.netdecm.com/blog/ <![CDATA[HTML5のvideoタグを主要ブラウザにて使ってみる]]> http://www.netdecm.com/blog/?itemid=153
昨日、堂島リバーフォーラムにて開催中の
西日本最大のクリエイティブビジネス・マーケット「大阪創造取引所2011」に行ってきました。やっぱ、時代は『AR』や『3D』の時代ですね☆
ただ、まだ費用面で構えてしまうようなところがありますね。。。

さらに、WEB製作では、HTML5やCSS3の時代が、遅かれ早かれやってくるのだろう。
ってことで、HTML5をやってみました！！
今回のメインは、IEや他の主要ブラウザでのvideoタグを使えるようにすること！

使用したのは、
●『html5media-1.1.4』
●『HTML5.js』

そして、やっかいなのは、ビデオの形式である。
こちらでも紹介いただいてますが、ブラウザのよって様々である(-_-;)
なになに、少なくても2種類の動画を書き出さなくてはならんのか。
おだやかじゃないね～。。。

そんなときは、Miro Video Converter FREEを使いました。

さてさて、せっかく長い時間費やしたので、
備忘録でも残しておきます。


まずは、<head>内から。
<!DOCTYPE html>


<html lang="ja">


<head>


<meta charset="UTF-8" />


<title>HTML5 videoタグ</title>




<script src="http://api.html5media.info/1.1.4/html5media.min.js"></script>





<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->


</head>

※書き出しは、当然HTML5の仕様で。


次に、<body>内。
<video poster="img/sample.jpg" width="320" height="240" controls preload>


<source src="movie/sample.mp4video.mp4" type="video/mp4" media="only screen and (min-device-width: 480px)"></source>


<source src="movie/sample.theora.ogv" type="video/ogg"></source>


<source src="movie/sample.webmvp8.webm" type="video/webm"></source>


</video>


あと、
media="only screen and (min-device-width: 480px)"

このコードが入っているのは、iPhone用の動画を入れるときに、


<source src="movie/sample.iphone.mp4" media="only screen and (max-device-width: 480px)"></source>

というのを付け足すと、割り振りが出来るようです。
※僕は、必要なかったので、やってません。iPhone用の動画を書き出さないといけないので。


→デモサイト



☆続いて、audioタグです。
まずは、xrecode IIというソフトで、oggファイルとmp3ファイルを用意しておきます。
※MP3変換のときは、設定で\external\lame.exeを選んでおく。

そして、<body>内には。
<audio class="audio" controls="controls" preload="">


<source src="audio/music.mp3">


<source src="audio/music.ogg">


</audio>


と、まぁざっとこんな感じです。
とにかく、ややこしい。

]]> 備忘録 http://www.netdecm.com/blog/?itemid=153 Wed, 19 Oct 2011 16:34:46 +0900 <![CDATA[Flashでの全画面イントロページ　やっと完成！！]]> http://www.netdecm.com/blog/?itemid=150 WEB製作も結構楽になってくるんでしょうかねー"^_^"
タカヤの穐西です。

さて、今回は、奈良県橿原市にある『株式会社　的場工務店』様のご紹介。
こちらは、古都奈良で四代続く工務店様で、そこの的場勉様は、ほんと気さくな方で打ち合わせでも楽しく話していただけるので、シャイな私としては、非常に助かりました☆

そして、こちらのホームページでは、
トップページの前に、イントロページを設けて、全画面Flashを導入しました！

これが、結構手こずりまして、index.htmlにFlashを配置すると、
検索エンジンに引っかかってくれませんし、
jsで制御しても、開いたまま閉じてくれなかったり。。。
四苦八苦しておりました(-_-;)
しかも、一度見た人にとっては、イントロページって長いだけだし。。。

そこで、Cookieを使って制御する方法を思い付いたのです☆

その方法は、こちら
]]> NET de CM/ケータイ de CM http://www.netdecm.com/blog/?itemid=150 Fri, 14 Oct 2011 20:32:54 +0900 <![CDATA[カイタッチプロジェクトに興味深々☆]]> http://www.netdecm.com/blog/?itemid=146 タカヤの穐西です。

ホームページリニューアルにあたって、
これからの流行になる「HTML5」に焦点を合わせて、色々なサイトを見廻っております。
そんな最中、すばらしく面白い企画に出会ってしまいました。

『カイタッチ　プロジェクト』！！
----------------------------------------------
カイタッチ・プロジェクトは、
通じ合う、共有することを意味する
顔より上で手と手が触れ合う仕草「ハイタッチ」を
もじったプロジェクト。
あなたは、自分のブログにお題の答えをエントリーするだけ。
貝印の担当者ができる限り、コメントしにうかがいます。
----------------------------------------------

なんて、現代社会にドンピシャな企画！！
ブログというオンラインな自宅に、こちらから会いに行けばいいじゃないか。
視野が狭くなっている今の僕には、思い付かなかった考えです。

ということで、ブログパーツ貼っておきました。
サイドバーに☆
これ、クリックしても面白いですね。パンダさんが画面を踊ってハイタッチを求める。
にしても、パンダさんのガタイがでか過ぎやしませんか。。。？


-------------キリトリ線-------------
カイタッチ・プロジェクト！
#004　ブログパーツでカイタッチ
-----------------------------------
とりあえず、ブログパーツを
サイドバーに貼り付けてみました。
-----------------------------------
リンクを許可
-------------キリトリ線-------------


そうそう。
なぜ、この「カイタッチ　プロジェクト」に出会ったかというと、
こちらを運営されている貝印株式会社さんの「Kai House」というサイトに出会ったからなんです。

こちらのサイトは、HTML5で製作されていて、
IEのif分岐という気遣い。
さらには、最近の流行であるグリッドレイアウトであるところ。
なにより、色味が好き。

褒め過ぎ！？でも、自分的にはホッとする感じがいいなー。と思っています。
貝印さんのご担当者さんが製作されたのでしょうか。
ま、それはノーコメントでもいいですが(笑)

東京にあるそうですが、正直、全くご存知ありませんでした。。。(^_^;)
でも、おしゃれな感じのアイテムが多いので、
最近ご一緒させていただくことが多い梅田先生と出会うことで、
小さな芽ですが、料理に興味を持ち始めた僕にとっては、かなり興味深々です。
これから、大きな芽になるまで続くかどうかは未定ですが。。。


さて、ご担当者さんでどなたが見に来てもらえるんだろうなー。
ワクワク。

]]> つぶやき http://www.netdecm.com/blog/?itemid=146 Tue, 27 Sep 2011 12:01:00 +0900 <![CDATA[料理教室開校！！]]> http://www.netdecm.com/blog/?itemid=144 タカヤの穐西です。
（最近は、作るほうにも芽生えてきたのです！）

そんな僕ですが、
なんと有名人とお仕事することになったのです。
テレビなんかでも見たことのあるあのIHクッキングの第一人者　梅田昌功先生です。
▼梅田先生の挨拶動画はこちらから。

普段は、うちのおしゃれ番長と某大手企業の情報誌をされているのですが、
この度、大阪の堺筋本町に料理教室を開校されるとのことで、
その名も『夢クッキングスクール』！！

なんて、おしゃれな名前(^^♪


現在は、10/3の開校に向けて、お忙しい時期ですが、
そんな合間を縫って、スクールの一日体験入学を開催されております。
http://www.yume-cooking.com/oneday/
梅田先生も優しく、教室もアットホームな感じで、料理の基礎から学べるので、初心者でも安心して通学できると思います。

体験入学は、人気のため、満席が相次いでおります。
ご予約は、お早めに。。。
各コースの詳細については、
→ビギナーズキッチン（初級）
→ベーシックキッチン（中級）
→ランクUPキッチン（上級）
→メンズダイニング（メンズコース）

そんな夢クッキングスクールのブログは、こちら。
]]> NET de CM/ケータイ de CM http://www.netdecm.com/blog/?itemid=144 Tue, 20 Sep 2011 11:15:22 +0900 <![CDATA[After Effects で携帯動画を3gpで書き出すが音が出ない。。。]]> http://www.netdecm.com/blog/?itemid=142 ちわ。最近、アメーバブログ始めました(^^♪
タカヤの穐西です。

私のお仕事として、
カメラで撮影した動画を携帯用に編集し、アップ公開をするというお仕事があります♪

今日も大阪の某専門学校様のお仕事で、
携帯用動画を編集し、アップしようと思ったら・・・ん？

After Effectsから3GPを書き出したら、音が出ない。。。！？
なんだ、これーーーー！！(T_T)
んなバカな。つい、こないだまで普通に書き出せていたぞ？？？

ということで、調べ倒しました。

まずは、ビットレート。
何度変えても、全く音が出ず。。。(-_-;)

次に、After Effects内で、3GPではなく、MP4に書き出してみる。
形式変えても、全く音が出ず。。。(-_-;)

次に、普段編集はEDIUSを使用しているので、EDIUSから3GPを書き出してみる。
やっぱ、ダメ。。。(-_-;)いー加減、腹が立ってきた！

でも、そこで気づいたのが、
両方の共通点である書き出す時の「3G エクスポート設定」！？
これって、もしかして、Quick Timeの何かを使っている？？？

そこで、以前にもQuick Timeくんにはバグが出て、
再インストールで直ったのがよぎった！

次に、検索で調べるのは、やっぱりQuick Timeくんのことである。
携帯動画変換での有名人「携帯動画変換君」のことですが、
こちらの記事を見つけました。
------------------------------------------------------
http://www.iyahooi.com/entry/2008/07/quicktime75.html
▲Ryosyu's イヤホイ　ブログ|iyahooi.com:blog さんより流用
------------------------------------------------------

ということで、現在『Quick Time 7.7』にアップグレードしたてだったのに、
『Quick Time 7.6』へダーウングレーーーード！！！
そしたら、今まで通りの音も入った携帯動画が出来ました♪♪♪

ちっ。これじゃ、脆弱性を考えてアップグレードしも意味ねーじゃん(*_*)
どーも、Quick Timeがキライである。。。
]]> 備忘録 http://www.netdecm.com/blog/?itemid=142 Thu, 1 Sep 2011 21:28:28 +0900 <![CDATA[なかなかの難問でした。。。(-_-;)]]> http://www.netdecm.com/blog/?itemid=139 本を読むとすぐに寝てしまうのび太くん体質なタカヤの穐西です。

そんな私が、なにやら面白そう♪
ということで、googleさんが出した『google puzzule』なる難問に挑みました！

ま、みなさん書かれている通り、最終問題まではヒントを頼りにすれば、
解けなくはない。
▼よく愛読させてもらっている『ロケットニュース』さん
http://rocketnews24.com/2011/08/17/122520/
▼こちらは検索で見つけました『ITmedia』さん
http://www.itmedia.co.jp/news/articles/1108/17/news047.html

ちなみに、私は24233人目のグーグルパズルマスターでした☆
『24233人目のグーグルパズルマスターの称号を手に入れた！私のPQは717596でした。』

ま、良かったらみなさんもやってみてください。
google puzzule
※ゆうまでもなく、google chromeでお楽しみください。

これが、HTML5とCSS3で出来てしまうなんて、
さらに驚きである。。。(ToT)/

これからのWEB事情について行けるか心配になってしまった今日このごろです。。。]]> 備忘録 http://www.netdecm.com/blog/?itemid=139 Thu, 18 Aug 2011 10:59:03 +0900 <![CDATA[天神祭 at LIVE～！！]]> http://www.netdecm.com/blog/?itemid=134 タカヤの穐西です。

そして、今週の花火特集の中に、
興味深い特集が。。。！！！

なんと、天神祭をソーシャルネットワーク大阪【SNO】というネット番組配信局が
Ustreamを使って、生中継してくれるというもの(>_<)
しかも、上空から花火を見下ろすという斬新な感覚！！
最近の科学は進んで、花火がクーラーの効いた部屋の中で見れるんですね♪
仕事でギリギリまで、事務所にいても見れるんですね。

そこには、土曜日にお目にかかった
関西ウォーカー編集部の玉置編集長も参加されておりました！
すっごい、楽しそうでした。

↓以下、アーカイブです。


ほんと、普段は人ゴミが嫌いで、天神祭なんて行ったことも、
そこの花火も見たこともなかったので、
新鮮で楽しめました。

関連記事→
http://news.walkerplus.com/2011/0725/11/]]> つぶやき http://www.netdecm.com/blog/?itemid=134 Tue, 26 Jul 2011 10:27:39 +0900 <![CDATA[電子書籍の未来　＠メビック扇町に参加させていただきました！]]> http://www.netdecm.com/blog/?itemid=132 タカヤの穐西です。

唐突ですが、最近の電子書籍って進化しつつありますよね～。
ってことで、クリエイティブネットワークセンター大阪　メビック扇町主催の
『クリエイティブビジネスフォーラム2011　最新技術が拓く電子書籍の未来』に参加させていただきました。

--以下、こちら（メビック扇町さんの詳細ページ）より流用-----------
電子書籍用端末やiPadなどの多機能端末が普及する中、電子書籍に対する関心が高まりつつあり、出版業界だけではなく、映像、IT、デザイン等の分野で活動するクリエイターにとっても新たなビジネスへの参入機会として注目を集めています。
メビック扇町では、電子書籍を取り巻く最新情報および今後のマーケット動向に関する情報を提供し、その専門家とのネットワークを形成するため、「最新技術が拓く電子書籍の未来」を開催します。
電子書籍分野に参入を希望するクリエイターの一助になれば幸いです。

日時：2011年7月23日（土）15:00〜20:30（交流会　19:30〜20:30）
スピーカー（順不同）：
●チバ ヒデトシ氏｜ジャーナリスト／デジタルハリウッド大学大学院 客員教授
●小木 昌樹氏｜（株）毎日コミュニケーションズ eBookジャーナル編集長／+DESIGNING編集長
●岩本 崇氏｜アドビシステムズ（株） マーケティング本部 クリエイティブソリューショングループ
●後藤 繁雄氏｜編集者／クリエイティブ・ディレクター／京都造形芸術大学ASP学科教授・学科長
●高山 晃氏｜（株）ファンワークス 代表取締役社長
●玉置 泰紀氏｜（株）角川マーケティング 関西ウォーカー編集長
----------------------------------------------------------------------

もう、素晴らしい方たちばかりで、ずっと緊張してました。



お話の内容は、先日行なわれた『電子出版EXPO』のことや『EPUB3.0』『新タブロイド』『電子書籍プラットフォーム』の話など、全部勉強になりました。

チバさんと小木さんの電子書籍市場の話や、後藤さんがおっしゃっていたこれからは電子書籍を含めた総合プロデュースが必要といった話や、やわらか戦車の高山さんや、玉置さんのキャラなど、興味深いことばかりでした。
あと、岩本さんのInDesign5.5がなぜ急遽発売されたのか(笑)など。。。

ほんと、楽しかったです。ありがとうございました。]]> つぶやき http://www.netdecm.com/blog/?itemid=132 Mon, 25 Jul 2011 16:05:26 +0900 <![CDATA[人生で一番高い食事してきました☆]]> http://www.netdecm.com/blog/?itemid=129
この夏に入籍をする幼馴染が結婚するということで、
奈良県橿原市にある『肉かっぽう玄』というお店に行ってきました。

私の先輩が従業員で働いておられるお店で、
お肉専門店なのです。
そこでは、三筋という部位やサーロン、タンなど、今まで食べたことのないお肉を堪能させていただきました。
人生でたぶん初めて食べたフォアグラやキャビアまで(^^♪

友人も気に入ってくれて、結婚記念日なんかで使うと。。。
（オレは？？？）

ま、とにかく喜んでもらえてよかったです！！
肉かっぽう玄の店長さん・オーナーさん・先輩ありがとうございました☆
楽しすぎて、閉店時間過ぎてもワイワイしてしまってすみません。。。



堪能した一部です↓↓↓

イベリコ豚の生ハム♪
イベリコ豚の生ハム
人生で初めて見ましたが、なんとかっていうんですよね、コレ。
イベリコ豚のなんとか

こちらも人生初めてのフォアグラ♪（たぶん・・・）
フォアグラ

これが、サーロイン！！野菜もうまっ。
サーロイン

調子に乗って、飲めないワインも堪能～久保田の翠壽もありました。
ワイン]]> つぶやき http://www.netdecm.com/blog/?itemid=129 Wed, 29 Jun 2011 11:35:44 +0900 <![CDATA[たまーに、撮影のお仕事もしてます☆]]> http://www.netdecm.com/blog/?itemid=126 あ、タカヤの穐西です。

さて、普段はパソコンの前でソースと向き合ってお仕事している私ですが、
たまーに、ECCアーティスト専門学校様の授業やイベントを撮影させていただくことも多くて(^^♪
学生さんたちは、接客マナーのことも学ぶようで、
挨拶・礼儀などがしっかりしていらっしゃいます。
さらには、アーティスト校だけあってか、学生さんみんな元気です。
撮影しているこっちも自然と笑顔になってくるわけで(笑)

そんな撮り溜めた撮影分を学校紹介として、
携帯動画に編集し、WEBにアップしております。

よかったら、見てみてください☆


●各コースの紹介

▼エステティシャンコース
 ▼美容科
 ▼トータルスタイリストコース
 ▼ヘアメイクアーティストコース
 ▼ネイリストコース
▼ビューティアドバイザーコース
 ▼ファッションアドバイザーコース
 ▼モデル・タレントコース
 ▼特殊メイクアーティストコース
 ▼語学留学


各コースの詳細は、
☆トータルスタイリストコース
☆美容科
☆ヘアメイクアーティストコース
☆ビューティアドバイザーコース
☆ネイリストコース
☆エステティシャンコース
☆ブライダルアーティストコース
☆特殊メイクアーティストコース
☆モデル・タレントコース]]> NET de CM/ケータイ de CM http://www.netdecm.com/blog/?itemid=126 Thu, 23 Jun 2011 10:42:56 +0900