Community_Board on WordPress With mobile application

URL : http://www.asial.co.jp/ 　│　 Copyright © 2013 Asial Corporation. All Rights Reserved. 　│　　　 1

コミュニティーボード on WordPresswith モバイルアプリ

アシアル株式会社岡本雄樹


本日のセッションでお伝えしたいこと

最近 CMS をカスタマイズしてシステムを作る流れがあるようです• 今日はその流れを更に一歩進めた応用例を提案します

Web とモバイルアプリを連携させた斜め上斬新なシステム• コミュニティーボード on WordPress をご紹介します


自己紹介


自己紹介

名前：岡本雄樹 ( ジャスティス隊長 ) 年齢： 28 歳職業：スクール事業部マネージャープロフィール

　経営学部生時代に３年間、創業したばかりの通販企業でＥＣサイトのウェブマスターを経験、システム構築からサーバの運用などシステム面を一手に引き受ける。　アシアル入社後は、その経験を生かしＥＣサイトの自社パッケージ開発や多数の EC 案件に関わったのち、スクール事業担当となる。　現在はスクール事業の運営や講師を行う傍ら、「 MonacaPress 」というモバイルアプリ開発支援ツールの研究開発に取り組んでいる。

執筆経験• イラストでよくわかる PHP はじめての Web プログラミング入

門


イラストでよくわかる PHP はじめての Web プログラミング入門

プログラミングをはじめて学ぶ WordPress 利用者の方にお勧めです• 内容を入門レベルに厳選

• 例えば、 SQL 文が登場しない– WordPress のカスタマイズに SQL 文ってそんなに必要ない

– 入門書らしからぬ革新的な薄さ！• 挫折せずに PHP を学べる最初のステップ


アシアル株式会社会社紹介

HTML5 ・ユーザーインターフェース Monaca （モバイル開発プラットフォーム）PHP ・サーバーサイド技術

アシアルはオープンソースである Web 開発、特に PHP 言語に特

化したテクノロジーベンチャーです。 2002 年 7 月の設立以来、

Web システムの開発に留まらず様々なサービスを展開しています。

（創業時のビジネスは PHP プログラマーズマガジンという雑誌を

発刊して PDF ファイルで販売することでした。）

主な事業ドメイン


コミュニティーボード on WordPress


コワーキングスペース使ってますか？

仕事って環境を変えると捗るときがありますよね？？？– ジャスティス隊長はサラリーマンですが、たまに WordPress や Web制作に関する情報を仕入れるためと口実を付けて、 7F で仕事をしています。


告知スペースのデジタル化を勝手に検討してみた！

7F にはチラシなどの情報がいっぱい！

これでは自分のチラシが目立たな…• よし、星野さんにデジタルサイネージを提案して、穏便かつ平和的に

自分の告知スペースを GET しよう！• WordPress を使えば、きっと短時間で作れるはず…


WordPress でデジタルサイネージを作ってみた！

できました！


コミュニティーボード on WordPress

• 掲載内容を縦スクロールで表示し、下まで移動すると自動的にリロード– 20 行程度の JavaScript( と jQuery) で実現

http://monacapress.office7f.com/





コミュニティーボードの特徴

特徴– わずか１日で開発！

• 公式テーマ (Pinboard) を子テーマで少しだけカスタマイズ– ※WordPress はテーマが豊富なのでエンジニアにこそお勧め！

• カスタム系の投稿プラグインを有効活用• オフィスを飛び出し、一人ハッカソン形式で集中

– カスタム投稿タイプ等を有効活用• 「ご飯」タイプに「予算」フィールドなどを設定

– 誰でも投稿までは可能• 運営者が掲載許可したものだけが表示される

– 専用のモバイルアプリも用意！


コミュニティーボードの運用イメージ

【投稿者】モバイル（や PC ）から情報を投稿

【管理者】投稿内容を確認して掲載許可

【閲覧者】情報を確認


記事の投稿はモバイルアプリから！

モバイルアプリのメリット• 投稿者に管理画面を見せなくて済む• ログイン不要

• アプリ内に「寄稿者」アカウント情報を内蔵• 写真も手軽に掲載可能• マーケットに出せる

https://play.google.com/store/apps/details?id=com.office7f.monacapress&hl=ja










管理って言っても、基本は下書き投稿を承認するだけです

WordPress でサイトの更新ができる人なら誰でも運用できるのがウリ


デモ


デモ

デモの流れ– フロントエンド

• スクロール– jQuery による animate処理– header.php での呼び出し

• テーマ構成• 投稿タイプを無視して全部表示するようにする

– バックエンド• 利用プラグイン

– モバイルアプリ• 投稿の仕組み• XML-RPC による連携• モバイルアプリの開発

– MonacaIDE– プレビュー

• MonacaPressProject


フロントエンド > スクロール > 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);}


フロントエンド > スクロール > header.php での呼び出し

header.php

<?php if(is_home()): ?><script>jQuery(function(){ jQuery('body').animate({ scrollTop: 0 }, '1'); auto_scroll(10000,5000);});</script><?php endif; ?>


フロントエンド > テーマファイル構成

親テーマ• Pinboard

子テーマのファイル群• community_board.js

• 自動スクロール関数の定義• content.php

• 記事の概要ではなく本文がでるように変更• functions.php

• 親テーマの CSS呼び出しや JS の呼び出し• 投稿タイプを無視して全部表示するようにする

• header.php• 表示における不要項目の削除• 自動スクロール処理の挿入

• index.php• 特に変更なし

• style.css• 特に変更なし


ホームで投稿タイプを無視して全部表示するようにする

functions.php

参考• WordPress の新着情報表示にカスタム投稿タイプを含める方法

• http://www.warna.info/archives/1703/• 大曲さんの記事です

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' );

http://www.warna.info/archives/1703/





バックエンド > 利用プラグイン

利用プラグイン– Custom Post Type UI

• カスタム投稿タイプを管理画面から簡単に設定できる。また、カスタムタクソノミーの設定も可能。– コミュニティーボードでは「ご飯」や「メッセージ」といったカスタム投稿タイプを作成

– Advanced Custom Fields• 投稿タイプ毎にカスタムフィールドを設定できる。

– コミュニティーボードでは「予算」フィールドなどを作成するために利用

– User Role Editor• ユーザーごとに権限を設定できる。

– 「寄稿者」にファイルアップロード権限を付与するために使用

– MonacaPress• 「 Monaca 」を使ったモバイルアプリ開発を支援してくれる。

– 投稿アプリの雛形を生成するために使用


Custom Post Type UI

カスタム投稿タイプとして「食事 (foods) 」や「メッセージ (messages) 」など、通常の投稿と分けたいものがあれば、登録します。


Advanced Custom Fields

カスタム投稿タイプ「食事 (foods) 」に対して、予算や場所、時間などのカスタムフィールドを設定


User Role Editor

寄稿者 (contributor) に対して、ファイルアップロード権限を付与


投稿アプリの仕組み

WordPress には記事の投稿を受け付けるための API が用意されている。何らかのプログラムを用いて適切な HTTP リクエストを投げれば、管理画面を経由せずに投稿出来る。公式の投稿アプリや外部のブログ投稿アプリも、この仕組みを利用している。

API(XML-RPC)

記事(XML)

HTTP リクエスト (POST)

モバイル側 WordPress側

プログラム( 今回は JS)

ユーザー名やパスワードも必要


XML-RPC_WordPress_API

公式サイトに API 仕様は掲載されています– http://codex.wordpress.org/XML-RPC_WordPress_API

http://codex.wordpress.org/XML-RPC_WordPress_API





モバイルアプリの開発

モバイルアプリ開発って言われても…– Java とか Objective-C とか勉強する時間が無い– WordPress や PHP 、 JavaScript の習得でお腹いっぱい

そこで HTML5 によるクロスプラットフォーム開発• JavaScript の勉強にもなり一石二鳥• モバイルアプリ開発ツール「 Monaca 」ならセットアップも不要


MonacaPress プロジェクト

WordPress をモバイルアプリと連携させるプロジェクト

• プラグインやドキュメント、事例を作っていきます http://press.monaca.mobi/

• コードは Github 上で GPL として公開 https://github.com/monaca/monaca-press

• Facebook ページ上で応援 ( いいね ) お願いします https://www.facebook.com/monacapress

FB ページで仲間募集中！

http://press.monaca.mobi/



https://github.com/monaca/monaca-press







https://www.facebook.com/monacapress





MonacaPress プラグイン

投稿アプリの雛形を生成するために使用

プログラミングは必要です…


【参考】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;});


【参考】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(); }


【アンカンファレンス】テーマ案

• モバイルアプリは必要か？

Documents

Community_Board on WordPress With mobile application