Community_Board on WordPress With mobile application

1,608 views
1,508 views

Published on

コミュニティーボードはユーザー投稿型のデジタルサイネージです。WordPressでコンテンツやデザインを管理できます。また専用のモバイルアプリを開発することでユーザーからの投稿も受け付けることができます。
http://monacapress.office7f.com/

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,608
On SlideShare
0
From Embeds
0
Number of Embeds
58
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Community_Board on WordPress With mobile application

  1. 1. コミュニティーボード on WordPress with モバイルアプリ アシアル株式会社 岡本 雄樹 URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 1
  2. 2. 本日のセッションでお伝えしたいこと  最近CMSをカスタマイズしてシステムを作る流れがあるようです • 今日はその流れを更に一歩進めた応用例を提案します  Webとモバイルアプリを連携させた斜め上斬新なシステム • コミュニティーボード on WordPress をご紹介します URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 2
  3. 3. 自己紹介 URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 3
  4. 4. 自己紹介     名前:岡本 雄樹 (ジャスティス隊長) 年齢:28歳 職業:スクール事業部 マネージャー プロフィール 経営学部生時代に3年間、創業したばかりの通販企業でECサイ トのウェブマスターを経験、システム構築からサーバの運用などシ ステム面を一手に引き受ける。 アシアル入社後は、その経験を生かしECサイトの自社パッケー ジ開発や多数のEC案件に関わったのち、スクール事業担当となる。 現在はスクール事業の運営や講師を行う傍ら、「MonacaPress」 というモバイルアプリ開発支援ツールの研究開発に取り組んでいる。  執筆経験 • イラストでよくわかるPHP はじめてのWebプログラミング入門 URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 4
  5. 5. イラストでよくわかるPHP はじめてのWebプログラミング入門  プログラミングをはじめて学ぶWordPress利用者の方にお勧めです • 内容を入門レベルに厳選 • 例えば、SQL文が登場しない – – WordPressのカスタマイズにSQL文ってそんなに必要ない 入門書らしからぬ革新的な薄さ! • 挫折せずにPHPを学べる最初のステップ URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 5
  6. 6. アシアル株式会社 会社紹介 アシアルはオープンソースであるWeb開発、特にPHP言語に特化し たテクノロジーベンチャーです。2002年7月の設立以来、Webシス テムの開発に留まらず様々なサービスを展開しています。 (創業時のビジネスはPHPプログラマーズマガジンという雑誌を発 刊してPDFファイルで販売することでした。) 主な事業ドメイン PHP・サーバーサイド技術 HTML5・ユーザーインターフェース URL : http://www.asial.co.jp/ │ Monaca(モバイル開発プラットフォーム) Copyright © 2013 Asial Corporation. All Rights Reserved. │ 6
  7. 7. コミュニティーボード on WordPress URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 7
  8. 8. コワーキングスペース使ってますか?  仕事って環境を変えると捗るときがありますよね??? – ジャスティス隊長はサラリーマンですが、たまにWordPressやWeb制 作に関する情報を仕入れるためと口実を付けて、7Fで仕事をしていま す。 URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 8
  9. 9. 告知スペースのデジタル化を勝手に検討してみた!  7Fにはチラシなどの情報がいっぱい!  これでは自分のチラシが目立たな… • よし、星野さんにデジタルサイネージを提案して、穏便かつ平和的に 自分の告知スペースをGETしよう! • WordPressを使えば、きっと短時間で作れるはず… URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 9
  10. 10. WordPressでデジタルサイネージを作ってみた! できました! URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 10
  11. 11. コミュニティーボード on WordPress • 掲載内容を縦スクロールで表示し、下まで移動すると自動的にリロード – 20行程度のJavaScript(とjQuery)で実現 http://monacapress.office7f.com/ URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 11
  12. 12. コミュニティーボードの特徴  特徴 – わずか1日で開発! • 公式テーマ(Pinboard)を子テーマで少しだけカスタマイズ – ※WordPressはテーマが豊富なのでエンジニアにこそお勧め! • カスタム系の投稿プラグインを有効活用 • オフィスを飛び出し、一人ハッカソン形式で集中 – カスタム投稿タイプ等を有効活用 • 「ご飯」タイプに「予算」フィールドなどを設定 – 誰でも投稿までは可能 • 運営者が掲載許可したものだけが表示される – 専用のモバイルアプリも用意! URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 12
  13. 13. コミュニティーボードの運用イメージ 【投稿者】 モバイル(やPC)から情報を投稿 【閲覧者】 情報を確認 URL : http://www.asial.co.jp/ │ 【管理者】 投稿内容を確認して掲載許可 Copyright © 2013 Asial Corporation. All Rights Reserved. │ 13
  14. 14. 記事の投稿はモバイルアプリから!  モバイルアプリのメリット • • 投稿者に管理画面を見せなくて済む ログイン不要 • アプリ内に「寄稿者」アカウント情報を内蔵 • • 写真も手軽に掲載可能 マーケットに出せる https://play.google.com/store/apps/details?id=com.office7f.monacapress&hl=ja URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 14
  15. 15. 管理って言っても、基本は下書き投稿を承認するだけです  WordPressでサイトの更新ができる人なら誰でも運用できるのがウリ URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 15
  16. 16. デモ URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 16
  17. 17. デモ  デモの流れ – フロントエンド • スクロール – jQueryによるanimate処理 – header.phpでの呼び出し • テーマ構成 • 投稿タイプを無視して全部表示するようにする – バックエンド • 利用プラグイン – モバイルアプリ • 投稿の仕組み • XML-RPCによる連携 • モバイルアプリの開発 – MonacaIDE – プレビュー • MonacaPressProject URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 17
  18. 18. フロントエンド > スクロール > jQueryによるanimate処理  auto_scroll()関数 function auto_scroll(duration,wait) { setTimeout(function(){ jQuery("body").animate( { scrollTop:jQuery('#footer').offset().top }, { duration:duration, easing:'linear', complete: function(){ location.reload(); } }); return false; }, wait); } URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 18
  19. 19. フロントエンド > スクロール > header.phpでの呼び出し  header.php <?php if(is_home()): ?> <script> jQuery(function(){ jQuery('body').animate({ scrollTop: 0 }, '1'); auto_scroll(10000,5000); }); </script> <?php endif; ?> URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 19
  20. 20. フロントエンド > テーマファイル構成  親テーマ • Pinboard  子テーマのファイル群 • community_board.js • 自動スクロール関数の定義 • content.php • 記事の概要ではなく本文がでるように変更 • functions.php • 親テーマのCSS呼び出しやJSの呼び出し • 投稿タイプを無視して全部表示するようにする • header.php • 表示における不要項目の削除 • 自動スクロール処理の挿入 • index.php • 特に変更なし • style.css • 特に変更なし URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 20
  21. 21. ホームで投稿タイプを無視して全部表示するようにする  functions.php function chample_latest_posts( $wp_query ) { if ( is_home() && ! isset( $wp_query->query_vars['suppress_filters'] ) ) { $wp_query->query_vars['post_type'] = array( 'post', 'foods' , 'messages' ); } } add_action( 'parse_query', 'chample_latest_posts' );  参考 • WordPressの新着情報表示にカスタム投稿タイプを含める方法 • • http://www.warna.info/archives/1703/ 大曲さんの記事です URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 21
  22. 22. バックエンド > 利用プラグイン  利用プラグイン – Custom Post Type UI • カスタム投稿タイプを管理画面から簡単に設定できる。また、カスタムタ クソノミーの設定も可能。 – コミュニティーボードでは「ご飯」や「メッセージ」といったカスタム投 稿タイプを作成 – Advanced Custom Fields • 投稿タイプ毎にカスタムフィールドを設定できる。 – コミュニティーボードでは「予算」フィールドなどを作成するために利用 – User Role Editor • ユーザーごとに権限を設定できる。 – 「寄稿者」にファイルアップロード権限を付与するために使用 – MonacaPress • 「Monaca」を使ったモバイルアプリ開発を支援してくれる。 – 投稿アプリの雛形を生成するために使用 URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 22
  23. 23. Custom Post Type UI  カスタム投稿タイプとして「食事(foods)」や「メッセージ(messages)」など、通常 の投稿と分けたいものがあれば、登録します。 URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 23
  24. 24. Advanced Custom Fields  カスタム投稿タイプ「食事(foods)」に対して、予算や場所、時間などのカスタム フィールドを設定 URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 24
  25. 25. User Role Editor  寄稿者(contributor)に対して、ファイルアップロード権限を付与 URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 25
  26. 26. 投稿アプリの仕組み WordPressには記事の投稿を受け付けるためのAPIが用意されている。何らかのプログラ ムを用いて適切なHTTPリクエストを投げれば、管理画面を経由せずに投稿出来る。公 式の投稿アプリや外部のブログ投稿アプリも、この仕組みを利用している。 モバイル側 WordPress側 記事 (XML) プログラム (今回はJS) HTTP リクエスト(POST) API (XML-RPC) ユーザー名やパスワードも必要 URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 26
  27. 27. XML-RPC_WordPress_API  公式サイトにAPI仕様は掲載されています – http://codex.wordpress.org/XML-RPC_WordPress_API URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 27
  28. 28. モバイルアプリの開発  モバイルアプリ開発って言われても… – JavaとかObjective-Cとか勉強する時間が無い – WordPressやPHP、JavaScriptの習得でお腹いっぱい  そこでHTML5によるクロスプラットフォーム開発 • JavaScriptの勉強にもなり一石二鳥 • モバイルアプリ開発ツール「Monaca」ならセットアップも不要 URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 28
  29. 29. MonacaPressプロジェクト  WordPressをモバイルアプリと連携させるプロジェクト • プラグインやドキュメント、事例を作っていきます  http://press.monaca.mobi/ • コードはGithub上でGPLとして公開  https://github.com/monaca/monaca-press • Facebookページ上で応援(いいね)お願いします  https://www.facebook.com/monacapress URL : http://www.asial.co.jp/ │ FBページで 仲間募集中! Copyright © 2013 Asial Corporation. All Rights Reserved. │ 29
  30. 30. MonacaPressプラグイン  投稿アプリの雛形を生成するために使用 プログラミング は必要です… URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 30
  31. 31. 【参考】MonacaPressにおける投稿処理の抜粋①  フォームから情報を取得してnewPost関数を実行 $("#wp_post").on('submit',function(){ // フォームの受け取り var content = { post_title: $('#wp_post [name=title]').val(), post_content: $('#wp_post [name=content]').val(), post_type:'post' }; // もしサムネイルがあれば、先にアップする処理を実施 if($('#post_thumbnail').attr('src')){ content.post_thumbnail = uploadFile($('#post_thumbnail').attr('src')); } // タクソノミー対応 content.terms = {}; content.terms.category = []; $('[name="category[]"]:checked').each(function(){ content.terms.category.push($(this).val()); }); // フォーム投稿 newPost(content); location.reload(); return false; }); URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 31
  32. 32. 【参考】MonacaPressにおける投稿処理の抜粋②  newPost() 関数 function newPost(content){ content.post_status = app_config.post_status; content.author = app_config.author; var request = new XmlRpcRequest(app_config.xmlrpc_endpoint, 'wp.newPost'); request.addParam(app_config.blog_id); request.addParam(app_config.username); request.addParam(app_config.password); request.addParam(content); return request.send(); } URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 32
  33. 33. 【アンカンファレンス】テーマ案 • モバイルアプリは必要か? URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 33

×