HTML5 の最近のブログ記事

 昨日は、電子書籍フォーマット標準の "EPUB 3.0" に "熱い視線" が向けられている状況を概観した。そして、<今後のWeb環境全体を見渡す時、"HTML5/CSS3" への精通が不可欠か......>と結んだのだ。
 が、この"HTML5" こそが、今後のIT 業界の動向、とりわけ復活を目指そうとしている "日本IT 企業" にとって重要なキーワードとなる! と熱い口調で語られた記事に出会うこととなった。( 下記抜粋引用サイト記事:アップル vs. グーグル vs. フェイスブック ―― HTML5が切り開く未来 小林雅一/SYNODOS JOURNAL/2012.07.03

 "HTML5"(&CSS) についてはこれまでにも少なからず関心を寄せてきた。

 ◆参照 "HTML5"で作成されたGoodサンプル!/<グーグルがHTML5で作ったWeb絵本を公開>( 当誌 2011.06.05 )

 なお、"HTML5"(&CSS) を実感的に掴むには、この<グーグルがHTML5で作ったWeb絵本>(<「20 THINGS I LEARNED ABOUT BROWSERS AND THE WEB (ブラウザやウェブについて知っておきたい20のこと)」> )を "体験" してみるのが最も手っ取り早いのではないかと思われる。

 下記引用記事のとおり、"HTML5" で作られたデジタル・コンテンツは、"Webアプリ" でありながら、<ユーザー体験としては、指のタッチで電子書籍のページをめくったり、活字をビデオやアニメーションと組み合わせて楽しんだりすることができる。つまり非常にインタラクティブなので、ユーザーにとっては「単なるホームページを見ている」というより、「自分は電子書籍を読んでいる」と感じる。>、そんなコンテンツだからである。

 この点とともに、<ブラウザ上でアプリケーションを動かせば、iOSでしか動かないアプリとか、アンドロイドでしか動かないアプリというのがなくなる。これによって、ソフトウェア開発者は1本のソースコードで、すべての端末に向けてアプリケーションを提供できるようになります。これがブラウザ上で動くアプリ、すなわちWebアプリの最大のメリットです。>という点! これらを踏まえるならば、"HTML5"(&CSS)に基づく"Webアプリ" というものは、"電子書籍" を含む "デジタル・コンテンツ" の世界の未来を大きく塗り替えてゆくのではないかと思えてくるのである。

 したがって、こうした視点から述べられた、<デジタル分野での戦いはまだ始まったばかりなのです。その成功のカギを握るのが、HTML5で大変化を遂げつつあるWebですから、日本企業はここでの戦略を間違えなければ復活の可能性は残されています。>という、"日本IT 企業" にむけて送られるエールは、"フムフムなるほど!" と大きな説得力を伴って響いてくるのである。
 これまでのように、先を越され続けた "プラットフォーム" 作りに悔やむ(?)のではなくて、"HTML5" によって<これからは、ブラウザ(Web)が もっとも重要なプラットフォームになっていく>という今後の動向にこそ目を向けるべきなのではないかと思えてくる。




















 現状では、Web スクリプト技法の "HTML&CSS" を知らずともさほど苦労はしないのかもしれない。"Web ページの作成" に関しては、数多くの "自動変換" エディタが世に出ているからだ。
 そうしたものを活用して、いち早く "内容" で魅了するぞという戦術に出ることも一つの作戦ではあろう。

 自分の場合、そうした "Easy Come Easy Go" のツールを眼にはしていたものの、Web スクリプトくらいは "一から書き始めたい" という思いがあって、"HTML&CSS" 技法を独習してきた。
 未だに要領を得ない箇所が多々あるが、それでも "急がば回れ" のたとえどおり "正攻法" で臨んできてよかったと感じている。その一つが、"電子書籍" の定番である "ePub" フォーマットに取り組んでみて分かった。"HTML&CSS" 技法に慣れ親しんできたことが "ePub" フォーマットを使いこなす上で大いに役立ったからだ。

 別に、"ePub" フォーマットのことはさておいても、Web 環境に関わっていこうとするならば、大なり小なり "HTML&CSS" 技法は欠かせないし、おそらく今後も大前提となっていくものと思われる。どこかで一度はその習得にチャレンジしておいても損にはならない技法だろうと思う。
 ただ、この技法習得は "一種の外国語" 習得にも似ているところがあり、"字面" とにらめっこしていてもらちが明かない。PCを使ったトライ&エラーの積み重ねが決め手となりそうである。

 下記引用サイト記事:初心者がWeb上でHTMLとCSSの基礎を...結果を見ながら...学んでいくMozillaのThimbleサービス/TechCrunch/2012.06.19 での、"オンライン型のトレーニングツール" である "Thimble" は、まさに<初心者がWeb上でHTMLとCSSの基礎を...結果を見ながら...学んでいく>というサービスだ。
 決して、派手な趣きがあるあけではなく、"地味" な仕掛けではある。"Thimble" という名称からして、裁縫用具の "指ぬき" なのだから、コツコツと学んでくださいというメッセージが伝わってくるようだ。


 左側画面に、"タグ" によるスクリプトが例示され、これを "修正" すると、右側画面の表示にリアルタイムで "反映" されるという構成となっている。
 ブラウジングされない "コメント" を書く際に使われる "タグ" 「<!--」と「-->」で囲まれた部分に、結構丁寧な解説( English )が施されているので、English 共々良い学習となることこの上ない!

 "ePub" エディタの "Sigil" が、いまだ "HTML5" に対応していないためか、専ら "Sigil" に主要な関心を持つ自分としては、どうも "HTML5" を脇に置きがちとなっている。マスターしておくと何かと便利かとは思いながら......。
 ちなみに、この日誌でも過去何度も "HTML5" については取り上げてきた。図らずも、ちょうど一年前にも以下のような "HTML5" 関連記事を書いている。

 いよいよ "HTML5" (と "CSS 3" )の時代到来かとの意を強めさせるものがあった。
 グーグルが制作・提供する "HTML5" で作成されたデジタルWeb絵本<ブラウザやウェブについて知っておきたい20のこと>のことである。HTML5で作成されてので、Google Chrome ほか Firefox などのHTML5に対応したWebブラウザーで閲覧できる。......
 当該の "デジタルWeb絵本" のサイトへ向かってみると、確かに表示が "リッチ" な雰囲気である。ただ、"HTML5" の世界に精通しないと、一体どこが "HTML5" 水準独自なものかは了解しにくい。
 ちなみに、"ページのソース" を覗いてみると、最上段の冒頭に "<!DOCTYPE html>" と、このスクリプトが "HTML5" で書かれているという宣言がなされているのがわかる。
 で、"絵本を開く" をクリックすると、おっと、"iPad" ではなくブラウザであるのに、あの "ページめくり" のアニメーションが実行されるではないか。さらに、ポインターをページの右端に置き、"iPad" に対してのあの "ページめくり" と同様の動作をポインターで試みてみると、な、なんと、しなやかな形でページがめくられて行く......。
 決して "HTML5" がもたらす表現の "リッチ" さはこれに尽きるものではなさそうだが、それらへの予感を彷彿とさせて余りあるように思えた。
 このコンテンツの "隅々" を丹念に点検して行くならば、"HTML5" がブラウザ上でどんな斬新な表現を可能とさせるのかが、手っ取り早く実感できるのではないかと思えたわけだ。......
"HTML5"で作成されたGoodサンプル!/<グーグルがHTML5で作ったWeb絵本を公開>( 当誌 2011.06.05 )


 上記のグーグルが制作・提供する "HTML5" で作成されたデジタルWeb絵本<ブラウザやウェブについて知っておきたい20のこと>は、何度閲覧しても、"HTML5" をマスターすることへの意欲がそそられるインセンティブなコンテンツだと思う。
 ところで、今日取り上げたい記事は、下記引用サイト記事:HTML5--押さえておくべき10のタグ」/CNET Japan/2012.06.05 である。

 こうした、ウェブ開発時に役立つタグが選択されて、その要点が解説されているものは、マスターしようとする者にとって価値ある道標となるに違いない......。

 期待とは裏腹に、デジタル出版 "アプリ"(デジタル報道出版)での "収益性" が実に芳しくない、いや "幻滅" にさえ値するという辛い嘆きの声が伝えられている......。
 下記引用サイト記事:出版社がアプリを捨てる日/WIRED JAPANESE EDITON - CULTURE/2012.05.28 によれば、そうした "アプリ" の編集側(編集長)の語り口はというと、

何が悪かったのだろうか?
すべてだ。

それでアプリは?
「抹殺する」

と、何とも「身もふたもない」捨てゼリフ(?)......。

 "バラ色の期待"(<OSごとのネイティヴソリューション、それに伴うあらゆる可能性、潜在的な読者に対するアピール。そして、広告出資者との関係の再活性化への期待......。ポータルサイトに適用されるインプレッション広告の軛から解放されて、アプリでは、印刷媒体と同じ方式で広告スペースを売ることができるだろう>)に反して、不幸にも次々と立ちはだかった厳しい現実!

 "販売方法" と "技術面"、そして "読者の反応" の "三層" に渡ってそれぞれ伏兵が潜んでいた。
 中でも、"販売方法" にまつわる "重税(?)" 、即ち<iTunes Storeでの1部ごとの販売で得られた収入の30%>という<iTunes Storeの手数料>の "鎖" は重かったようである。

 しかも、iTunes Storeのプラットフォームのこれ以上ない使いやすさという点が備わっているだけに、"デジタル・コンテンツ" 提供側にとっては他の"販売方法" を見つけにくいという "悩ましい問題" を抱え込むことにもつながるわけだ。
 図らずも "昨日のエントリー"( "AppStore"以外の"ローカル"Webサイトから"電子書籍"をダウンロードする手順の実際!( 当誌 2012.05.28 ) )では、こうした "悩ましい問題" に向けた "ごまめの歯ぎしり(?)" を書いたばかりであった......。

 "縦書き" または "縦書きePub" に関しては、このブログでも随分とこだわり、書いて来た。

◆参照 当ブログでの「縦書き」関連エントリー

 だが、"縦書きePub" については、小手先の技を超えた "Web仕様の改変" でもない限り難しいだろうと薄々想定してきた。
 そして、その "仕様の改変" が "EPUB 3 仕様" の策定というかたちで実現し、その中には "縦書きePub" という念願のテーマも含まれている。
 まだまだ、多くの課題を残してはいるようだが、既に、積極的な開発プロジェクトも動き出しているようである。

 かねがね、 "Flashアニメ" が "iPad/iPhone/iPod touch" などのデバイスでは表示されないことを懸念し続けて来た。多分、多くのウェブ関係者たちも同じ思いであったに違いない。何しろ、現在のウェブサイトのページには数限りない "Flashアニメ" が溢れ返っているからだ。
 そんな折、下記のような報道があった。

―――― FlashアニメをHTML5に変換するツールをGoogleが公開、iPhoneでも表示可能
 米Googleは米国時間2011年6月28日、Flashのコンテンツ(SWFファイル)をHTML5に変換するWebツール「Google Swiffy」を、Google Labsで公開した(写真1)。

 変換結果はGoogleのChromeや米AppleのSafariなど、レンダリングエンジン「WebKit」を搭載するWebブラウザで表示できる。iPhoneやiPadのSafariブラウザにも対応している。例えばFlashコンテンツを提供しているWebサイトが、iPhone/iPadなどFlash非対応の端末にもコンテンツを提供したいといった場合に活用できる。Googleによれば現時点ではゲームのように複雑なコンテンツを変換できるわけではないが、アニメーションなどは変換できるという(写真2)。
 Swiffyでは、アップロードされた任意のSWFファイルからJSON(JavaScript Object Notation)形式のファイルを自動生成する。それをWebブラウザのJavaScriptランタイムが読み込み、ベクター画像フォーマット「SVG」やCSSを利用して元のSWFファイルの内容を再現する仕組みである。>
FlashアニメをHTML5に変換するツールをGoogleが公開、iPhoneでも表示可能/ITpro/2011/06/29


 "ePub 電子書籍" の一角に "ナレーション" を埋め込んでみたいとは、常々考えていたところだ。ただ、その "ナレーション" の "音声合成" 音質が、ありありとした "機械音" であるならば、逆に興醒めになるだろうと思案していた。
 だが、昨日紹介したような自然な "音声合成" 音質であるならば、読み手もあながち拒絶しないかもしれない......、と思えた。
 人が本などを読み始める時、ほかの人がどうかは分からないが、自分の場合、何がしかの "スプリング・ボード" のような弾みがつくきっかけがあると読み始め易いのではないかと思って来た。音楽の "イントロ" のような意味合いだとでも言おうか......。

 "ePub 3.0" 仕様のリリースが目前となっているが、その中で、日本語表示の "縦書き" や "ルビふり" が一つの興味ある点であろう。
 ところで、オープンソースの "ePub 変換・エディター Sigil" は、つい先ごろ長い "沈黙(?)" を破り、"Version 0.4.0" へとアップデートされたことは既に書いた。

◆ 参照 <ePub変換 Editorの定番の"Sigil"が、"experts"向けに"Version 0.4.0"へアップ!(当誌 2011.06.04)>
◆ 参照 <"Sigil"最新版"Version 0.4.0"は、"experts"向け、現場からの要望に応えるもの? ( 2011.06.03)>

 その際、さまざまな追加機能があったとは言うものの、"ePub 3.0" や "HTML5( & CSS3)" などの新しい動きに対しては、これと言った特別な対応がなかったかの印象を持ち、幾分か失望したりもしたものであった。
 が、必ずしもそうではなかったのである。
 その発見・認識を促してくれたのは、以下のサイトであった。

◆ 参照 <「sigil 0.4 で ruby タグを含む epub ファイルをつくる」/KRAKENBEAL RECORDS/2011/04/24 >)

 "WebM" 動画フォーマットやそれへの変換というテーマについては、もはや実践的なレベルでの確認が必要な時期に来ているような気がしている。
 そこで、やや手探りをしながらも、気になる一連の関連事項について、体験的に確認してみることにした。
 ところで、ウェブ上表示の "video" と言えば、かつて "audio" ( "ナレーション" )付きの "video" を力づくで作成したことがあった。

◆参照 <"ナレーション"付きの"アプリケーション向け動画操作マニュアル"の試作サンプル(当誌 2011.02.18)>

 参照していただければお分かりのとおり、"容量" の関係から小さくて見にくい上に、これは "QuickTime Player" という固有のアプリソフトを前提にしたものであった。
 Googleが言うところの「誰もが利用できる無料で高品質なWeb向けビデオフォーマット」ではないわけだ。
 目指すところは、"オープンソース" 系の "video" である。それだからこそ、"WebM" 動画フォーマットが気になるわけなのだ。
 とりあえず、"WebM" 動画フォーマットで作成した "自作サンプル" を吟味していただきたい。(※ ただし、現状で表示可能なブラウザは、"Firefox"、"Google Chrome" などに限られる......)
 ちなみに、"容量" の点では、前述の ".mp4" のそれ未満に圧縮されている。

 かねてより、ウェブページ/電子書籍に "audio/video" を組み込むことへの関心が途切れなかった。しかも、専用の "audio/video" アプリソフトを介してではなく、いわば "オープンソース仕様" でそれを実現したい......、と。
 そんな視点から、当然のごとく "HTML5" における "audio/video" 仕様に関心が向いたものだった。
 したがって、"HTML5" の "audio/video" 仕様を "先取り(?)" したかのような、"iPad/iPhone/iPod touch" での "HTML5" ライクな "audio/video" タグの実動は、非常に興味深く思えた。(ただし、決して "iPad/iPhone/iPod touch" が、全面的な "HTML5" を取り入れていたわけでないことはよく知られている。)

 こうした事情から、"iPad/iPhone/iPod touch" については、"自ら試す" しかないとばかりに、下記のようなたどたどしい試行錯誤も行ってきた。

<"オーディオ埋め込みEPUB電子書籍"制作のコア部分をクリア!/"eCub"が役立った! (当誌 2011.01.17)>
<"eCub"アプローチを使って、既に自作した"ePub 電子書籍"に"audio"を埋め込む!(当誌 2011.01.21)>
<"Sigil"で作ったePub電子書籍を元に、"eCub"を利用して"audio/video"を埋め込む(当誌 2011.01.22)>
<"HTML5"の<audio>タグの使い方/"HTML5"の仕様の詳細には目を通した方が良さそう(当誌 2011.01.23)>

2019年5月

      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  














関連サイトへのリンク


  • 電子書籍(eBooks)制作にフォーカスしたサイト
  • 明けない夜はないことを確信するサイト
  • Green(地球環境改善)にフォーカスしたサイト
  • ソフトウェア技術者やSEのための評価と育成、人事考課制度を考えるサイト
  • さまざまな業種・業態でご利用可能なモバイル活用の予約システム!
  • 創作小説『海念と保兵衛』のサイト
  • 創作小説『かもめたちの行方』のサイト
  • 当ブログ推奨の商品を展示したAmazon ストアー!
  • 当AdhocBlogブログの過去のエントリー
  • 株式会社アドホクラット当時のサイト

★売れ筋! No.1!
家庭用"放射線測定器"

日本通信 bモバイルWiFi ルータ+1 ヶ月定額SIM BM-U300W-1M
価格:¥ 20,208
国内配送料無料 Amazon





このアーカイブについて

このページには、過去に書かれたブログ記事のうちHTML5カテゴリに属しているものが含まれています。

次のカテゴリは、
 SNS
です。

最近のコンテンツは、
 インデックスページ
で見られます。

過去に書かれたものは、
 アーカイブのページ
で見られます。

年月別アーカイブ

最近のトラックバック