2013年7月8日

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

asial

Pocket

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上から更新してください。


<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <script src="plugins/plugin-loader.js"></script>
  <link rel="stylesheet" href="plugins/plugin-loader.css">
  <link rel="stylesheet" href="topcoat/css/topcoat-mobile-light.css">
  <link rel="stylesheet" href="css/pageslider.css">
  <link rel="stylesheet" href="css/main.css">
  <script src="js/fastclick.js"></script>
  <script src="js/pageslider.js"></script>
  <script>
    monaca.viewport({width: 480});
    document.addEventListener('deviceready', function() {             
        monaca.updateUIStyle("toolbar", "title", "Latest");
        monaca.updateUIStyle("btn-back", "visibility", false);
        monaca.updateUIStyle("search-box", "visibility", false);
    }, false);
  </script>
</head>
<body>
  <div id="container">      
  </div>
  <script src="js/handlebars.js"></script>
  <script src="js/underscore.js"></script>
  <script src="js/backbone.js"></script>
  <script src="js/backbone.localStorage.js"></script>
  <script src="js/marionette.js"></script>
  <script src="js/app.js"></script>
  <script src="js/index.js"></script>
  
</body>
</html>