Asial Blog

Recruit! Asialで一緒に働きませんか?

特命:WordPressとMonacaを連携させてビジネスチャンスを生み出すこと

カテゴリ :
Monaca
タグ :
Tech
Monaca
Wordpress
PHP入門書の次はサービス開発に取り組んでいる岡本です。
WordPressのサイトをスマートフォンのアプリに変換するツールなのですが、今回はオープンな感じで進めていこうと考えています。



諸機能



  • 記事が読めるよ!

  • カテゴリ一覧や月別一覧もあります!

  • 固定ページ一覧も搭載

  • キャッシュ機能があるので途中で電波が途切れても多少は読める、はず



※上記イメージはプロトタイプであり、完成版の見た目は変わる予定です。

特命の成り行き


このプロジェクトはBOSSからの「MonacaとWordPressを連携させてビジネスチャンスを生み出してほしい」という、非常にざっくりとした特命を受けて遂行しております。

「WordPress詳しかったよね?」
「はぁ、個人のブログにWordPressを使っていることが、詳しいのうちに入るのであればYESです(が、WordPressはもっと奥の深い製品ですよ)」

新しいことにチャレンジできるチャンスをみすみす逃す手はないので、後半部分は伏せておき(後で勉強すればよいので)、特命を受諾しました。
尚、本業のスクール事業があるのでサービスの実装はMonacaチームのエンジニアにお願いすることにしてあります。

MVP(必要最低限機能)


リーンスタートアップの考えでは、必要最低限の機能の状態でターゲットとする顧客にインタビューを行うそうです。ニーズを読み違えたり、そもそも要らないものを作りこんでも仕方がないので、現在のプロトタイプ版を元にインタビューをさせていただいております。

WordPressユーザーの皆様。もし、あなたの前に私が現れた際は宜しくお願い申し上げます。

※リーンスタートアップも勉強中です。
リーンスタートアップ
Running Lean

プロトタイプを試してくださる方もあわせて募集中


今回のMVP(というには、ちょっと機能が多いですが)を試しに使っていみたいアーリーアダプターの方のために、ソースコードを公開させて頂きます。zip形式での配布となりますので、何らかの方法でmonaca上のアップロードしてアプリを生成して頂く形となります。また、「プロトタイプ版」なので動作に関するサポートは一切できない旨を予めご了承ください
(感想や、動作報告は大歓迎です)。
MonacaPress.zip
※ソースコードはGPLにする予定です。

設置方法


WordPress側の準備


WordPress側にはデータをアプリに向けて吐き出せるよう、「JSON API」プラグインのインストールが必要になります。

Monaca側の準備


アカウント登録やアプリ生成の手順は先に学習をお願い申し上げます。
公式ドキュメントの「Monacaクイックスタート」の入門編までを体験いただければ、大体イメージはつかめると思います。

ソースコードの設置


現在のMonacaIDEにはzipファイルのアップロードやフォルダごとまとめてアップロードする機能は無いのですが、WebDavという機能を使えば、Monaca側のファイルやフォルダを自分のパソコンのディスクと同じように操作できるようになります。

公式ドキュメントの「WebDavを利用する」をご参照ください。WebDvaの技術的な詳細が知りたい方はWikiPediaをご参照ください「WebDav」。

また、index.htmlだけはWebDavで削除や上書きができないため、index.htmlの内容はMonacaIDE上から更新してください。

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <script src="plugins/plugin-loader.js"></script>
  6.   <link rel="stylesheet" href="plugins/plugin-loader.css">
  7.   <link rel="stylesheet" href="topcoat/css/topcoat-mobile-light.css">
  8.   <link rel="stylesheet" href="css/pageslider.css">
  9.   <link rel="stylesheet" href="css/main.css">
  10.   <script src="js/fastclick.js"></script>
  11.   <script src="js/pageslider.js"></script>
  12.   <script>
  13.     monaca.viewport({width: 480});
  14.     document.addEventListener('deviceready', function() {             
  15.         monaca.updateUIStyle("toolbar", "title", "Latest");
  16.         monaca.updateUIStyle("btn-back", "visibility", false);
  17.         monaca.updateUIStyle("search-box", "visibility", false);
  18.     }, false);
  19.   </script>
  20. </head>
  21. <body>
  22.   <div id="container">      
  23.   </div>
  24.   <script src="js/handlebars.js"></script>
  25.   <script src="js/underscore.js"></script>
  26.   <script src="js/backbone.js"></script>
  27.   <script src="js/backbone.localStorage.js"></script>
  28.   <script src="js/marionette.js"></script>
  29.   <script src="js/app.js"></script>
  30.   <script src="js/index.js"></script>
  31.   
  32. </body>
  33. </html>

jQueryプラグインの有効化


MonacaIDE上から、jQueryプラグインを有効化します。
手順は公式ドキュメントの「Monacaプラグイン」をご参照ください。


設定の変更


zipの中身は設定が私の個人ブログを参照するようになっているため、「jsフォルダ内のapp.js」ファイルの以下の部分を、ご自身のサイトに書き換えてください。

  1. var rootUrl = "http://j801.com/";

ビルド


ビルド自体は通常のプロジェクトと違いはありません。公式ドキュメントの「Android版のビルド」や「iOS版のビルド」を参考にしてビルドして下さい。なお、ご自身の端末で動作確認をするだけであれば「Monaca デバッガー」をインストールすれば確認することができます。

今後のロードマップ


 私個人としては、このプロジェクトはWordPress製作者の皆様と協力しながらオープンな形で作っていきたいと考えております。ここだけの話ですが、アシアルはPHPレームワークを使ってガリガリ開発するタイプなので、WordPressは殆ど使っていないのです。

 WordPressを使って仕事をされている人たちにMonacaを活用してもらうために、
会社という枠に縛られず、オープンな形でやっていきたいと考えています。

また、この特命プロジェクトは年内に芽が出なければ「強制終了」になるプロジェクトなので、興味やご関心がある方は是非この記事をイイネしたりシェアして頂ければ幸いです。

あ、それと「WordCampTokyo2013」が「2013年9月14日(土)」に開催されるそうです。
WordCamp Tokyo 2013

わぷー可愛いですよね