Community_Board on WordPress With mobile application

コミュニティーボード on WordPress
with モバイルアプリ
アシアル株式会社岡本雄樹

URL : http://www.asial.co.jp/ │

Copyright © 2013 Asial Corporation. All Rights Reserved.

│

1

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

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

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



│

2

自己紹介



│

3

自己紹介





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

 執筆経験
•

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



│

4

イラストでよくわかるPHP はじめてのWebプログラミング入門
 プログラミングをはじめて学ぶWordPress利用者の方にお勧めです
•

内容を入門レベルに厳選
•

例えば、SQL文が登場しない
–

–

WordPressのカスタマイズにSQL文ってそんなに必要ない

入門書らしからぬ革新的な薄さ！
•

挫折せずにPHPを学べる最初のステップ



│

5

アシアル株式会社会社紹介
アシアルはオープンソースであるWeb開発、特にPHP言語に特化し
たテクノロジーベンチャーです。2002年7月の設立以来、Webシス
テムの開発に留まらず様々なサービスを展開しています。
（創業時のビジネスはPHPプログラマーズマガジンという雑誌を発
刊してPDFファイルで販売することでした。）

主な事業ドメイン
PHP・サーバーサイド技術

HTML5・ユーザーインターフェース


Monaca（モバイル開発プラットフォーム）


│

6




│

7

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

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



│

8

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

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

 これでは自分のチラシが目立たな…
• よし、星野さんにデジタルサイネージを提案して、穏便かつ平和的に
自分の告知スペースをGETしよう！
• WordPressを使えば、きっと短時間で作れるはず…



│

9

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

できました！


│

10

•

掲載内容を縦スクロールで表示し、下まで移動すると自動的にリロード
–

20行程度のJavaScript(とjQuery)で実現

http://monacapress.office7f.com/


│

11

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

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

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

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

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

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



│

12

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

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

【閲覧者】
情報を確認


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

│

13

記事の投稿はモバイルアプリから！
 モバイルアプリのメリット
•
•

投稿者に管理画面を見せなくて済む
ログイン不要
• アプリ内に「寄稿者」アカウント情報を内蔵

•
•

写真も手軽に掲載可能
マーケットに出せる

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


│

14

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

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



│

15

デモ



│

16

デモ

 デモの流れ
– フロントエンド
• スクロール
– jQueryによるanimate処理
– header.phpでの呼び出し
• テーマ構成
• 投稿タイプを無視して全部表示するようにする

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

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


│

17

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



│

18

フロントエンド > スクロール > header.phpでの呼び出し
 header.php
<?php if(is_home()): ?>
<script>
jQuery(function(){
jQuery('body').animate({ scrollTop: 0 }, '1');
auto_scroll(10000,5000);
});
</script>
<?php endif; ?>



│

19

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

Pinboard

 子テーマのファイル群
•

community_board.js
• 自動スクロール関数の定義

•

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

•

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

•

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

•

index.php
• 特に変更なし

•

style.css
• 特に変更なし



│

20

ホームで投稿タイプを無視して全部表示するようにする
 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/
大曲さんの記事です



│

21

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

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

– Advanced Custom Fields
• 投稿タイプ毎にカスタムフィールドを設定できる。
– コミュニティーボードでは「予算」フィールドなどを作成するために利用

– User Role Editor
• ユーザーごとに権限を設定できる。
– 「寄稿者」にファイルアップロード権限を付与するために使用

– MonacaPress
• 「Monaca」を使ったモバイルアプリ開発を支援してくれる。
– 投稿アプリの雛形を生成するために使用



│

22

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



│

23

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



│

24

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



│

25

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

モバイル側

WordPress側

記事
(XML)

プログラム
(今回はJS)

HTTP リクエスト(POST)

API
(XML-RPC)

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



│

26

XML-RPC_WordPress_API
 公式サイトにAPI仕様は掲載されています
–

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



│

27

モバイルアプリの開発

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

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



│

28

MonacaPressプロジェクト

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

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

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

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

FBページで
仲間募集中！


│

29

MonacaPressプラグイン
 投稿アプリの雛形を生成するために使用

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



│

30

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


│

31

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



│

32

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

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



│

33

Community_Board on WordPress With mobile application

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (13)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Community_Board on WordPress With mobile application

Ähnlich wie Community_Board on WordPress With mobile application (20)

Community_Board on WordPress With mobile application