HTML5+wordpressで電子書籍
1 like1,870 views
スライドだけじゃ情報足りないので興味ある方はFBやtwでコンタクトしてくれると嬉しいです。
HTML5+wordpressで電子書籍
- 1. ＋HTML5 WordPressで始めるスマートフォン用 電子書籍配信プラットフォーム The Designium
- 2. 自己紹介 浅井 渉（あさい わたる） ＠watalucky 会津大１３期生 大学２年次に株式会社デザイニウムにてインターンを始める 何故か、まだいる。 業務範囲はWEB全般 最近はスマフォ関係の仕事が多い The Designium
- 3. HTML5とは 『従来の(X)HTMLに比べてWEBアプリが作りやすい！』 【従来のHTML】 基本的にはただの「文書」を作る枠組み →無理やりそれに『機能』を追加してWEBアプリを作る 【HTML5】 WEBアプリを作るための機能が初めから組み込まれている Ex. 音楽挿入、動画挿入、キャンバス挿入などなど The Designium
- 4. HTML5とは 『例。Sample.mp4という動画を埋め込む』 【従来のHTML】 <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="500" height="300" codebase="http://www.apple.com/qtactivex/qtplugin.cab"> <param name="src" value="sample.mp4"> <param name="autostart" value="false"> <embed src="sample.mp4" width="500" height="300"></embed> 【HTML5】 <video src="sample.mp4"></video> The Designium
- 6. 電子書籍とは アプリとして電子書籍を出版 ＝appstoreにて配布 【メリット】 ・アプリとして配布できる →やろうと思えばどんな機能もつけられる ・容易に課金システムなどはappleが提供 ・二次配布されにくい 【デメリット】 ・アプリを作るにはMacが必要 ・販売前にappleの審査がある ・作るのが大変 The Designium
- 7. 電子書籍とは アプリとして電子書籍を出版 要するに、 何でも出来るけど、大変。 ちゃんと作ろうとすると高度な専門知識必須。 The Designium
- 8. Wordpress＋HTML５で電子書籍とは 『ブログ感覚で電子書籍を出版することが目的』 アプリで電子書籍を出版する際のデメリット ・アプリを作るにはMacが必要 ・販売前にappleの審査がある ・作るのが大変 を解決し、さらに付加価値をつけた電子書籍を出版することができる。 The Designium
- 9. 概要説明 『よくわからん。実際、どんなイメージなの？』 →まずは、ブログの画面を想像。 記事一覧 記事詳細 □ □ □ □ ああああああああああ ああああああああああ □ □ □ □ ああああああああああ ああああああああああ ああああああああああ □ □ □ □ ああああああああああ ああああああああああ ああああああ □ □ □ □ □ □ □ □ The Designium
- 10. 概要説明 『これが今回の話では、こういうイメージに変わります』 本一覧 本紹介 本 □ □ □ □ ああああああああああ ああああああああああ □ □ □ □ ああああああああああ ああああああああああ ああああああああああ □ □ □ □ ああああああああああ ああああああああああ ああああああ □ □ □ □ □ □ □ □ ホームに追加 The Designium
- 11. 概要説明 『ネイティブ言語で作られた本アプリの劣化版？』 →断じて否。ＷＥＢならではの強み・メリットというものが存在する。 →どんなメリット・デメリットがあるだろうか？ The Designium
- 14. メリット② 『解析がしやすい』 →既存のアクセス解析ツールを使って書籍の解析ができる。 →ページごとの閲覧数・滞在時間の計測 →ショップへのリンクを用意してコンバージョンの測定も可能 →ページ単位で「いいねボタン」などの設置も可能やる人はいないと思いますが The Designium
- 15. デメリット② 『オフライン時には動作しない』 →オフライン中の解析は出来ない →ほんとうの意味で正確なデータにはならない The Designium
- 16. メリット③ 『ＷＥＢサービスやデバイスの機能との連携が容易』 →結局、HTMLなので、WEBサイトとして実装できるものは、すべて実装できる。 ほぼ →YoutubeやgoogleMapの貼り付け →オンライン・オフラインの判定で表示コンテンツの切り替え →HTML5を使った追加機能 →Adsenseの埋め込み The Designium
- 17. デメリット③ 『WEBサイトの運用と同じ程度の作業が発生する』 →連携先APIの仕様変更が起こるとメンテナンスが必要になる必要がある →ただの本じゃない分、作りっぱなしにはしにくい。 『出来ることが多すぎる』 →WEBならではの強みを生かせる反面、単なる本を作りたい層には向かない。 The Designium
- 18. デモ The Designium
- 20. 実装方法 『キャッシュしたデータはどう更新するか』 →スクリプトからマニフェストファイルの更新をチェックする →一文字でも更新されていた場合、キャッシュの更新を行う。 The Designium
- 21. 実装方法 『wordpressでの管理』 →記事作成時に同時に マニフェストファイルも作成 →記事更新時に同時に マニフェストファイルも更新 →実際はPHPだが、HTMLとしてキャッシュ →この機能だけ実装すれば、 後は普通のテーマ作成と同様。 The Designium
- 22. 実装方法 『フロントエンドの実装方法』 →スワイプでのページ遷移 touchSwipeというjQueryプラグインを使用 →最終閲覧ページ ローカルストレージに現在のページ番号を保存 The Designium
- 23. さらにどんな発展案が可能か？ ●WEB連動観光雑誌 →アプリケーションキャッシュを使って常に最新データを表示かつ、 オフラインでも閲覧可能 →GPS情報と連動し、現在地周辺のお店だけを検索 →ライブカメラと連動し、行きたい場所の『今』が見れる The Designium
- 24. さらにどんな発展案が可能か？ ●遊べる絵本 →Canvasを使ってお絵かき機能を絵本に埋め込む →ページ内に子供が書き込める要素を用意 →FBなどと連動し、友達子供の書き込みを本の中でシェアできる →本を通したコミュニケーションの活性化 The Designium
- 25. さいごに 『ちょっと遊べる電子書籍を簡単に作りたいなら HTML5+wordpress』 →電子書籍に興味はあるが、新しく勉強している時間はない →ただの電子書籍ではなく、色々な付随要素をつけたい 何か電子書籍に対するアイデアがある方はFBやtwitterで教えてください。 Facebook → http://www.facebook.com/watalucky Twitter → @watalucky The Designium