アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

MonacaPressプラグインリリース記念!16時間耐久一人ハッカソン (特命MonacaPress vol4)


お蔭様でMonacaPressプラグインを世に出すことができました。やはり自分のプロダクトを持てるというのは嬉しいものですね。まだ投稿アプリしか作れませんが、バリエーションを充実させることでWordPressを利用するWeb制作者の方がより簡単にモバイルアプリを開発できるようにします。






公式サイトも用意しましたので(もちろん、WordPressで作りましたよ!)、まとまった技術情報はサイトの方で公開していきます。

MonacaPress – WordPressアプリ開発プラグイン

なお、サイトのテーマにはBizVektorを採用しています。「ローカルナビゲーション」という機能があり、子ページの一覧をサイドバーに自動表示できます。また、階層構造をかなり深く表現できるため、MonacaPressのドキュメントを公開するときには有難いです。




さて、WordCampTokyo 2013でブースを展示して、MonacaPressのお披露目をさせて頂いたところ、次のようなお言葉を頂きました。




「MonacaPressは何ができるのかよくわからない」
「投稿アプリが作れると何が嬉しいのかよくわからない」



まぁ、WordPressの管理画面に入れば「投稿」はできるので、管理画面に入れるのなら、わざわざアプリを使う必要はありません。しかし投稿者を「管理画面」に入らせたくない場合には活用方法があります。


◆MonacaPress(投稿アプリ)が向いている案件


・写真投稿サイト


サイト管理者以外の人からアプリで記事や写真を投稿してもらって掲載するサービスには向いていると思います。投稿者に専用の投稿アプリを配布してWordPress側にガンガン情報を登録してもらいます。WordPressには権限の仕組みもありますので、下書きモードで登録するようにすれば、掲載の可否を管理側でコントロールすることも容易です。


・商店街などのポータルサイト


商店街の店主の皆様に投稿アプリを配布して、その日のおすすめ商品情報や夕方のタイムセール情報を投稿してもらいます。MonacaPressはカスタムフィールドやカスタム投稿タイプに対応しているので、投稿アプリを用意しておくことで、タイムリーな情報配信ができるようになります。


◆導入事例:コワーキングスペース向けデジタルサイネージシステム



MonacaPressの導入を促進すべく、投稿アプリを応用したWordPress案件を企画して事例を作ることにしました。



 突然ですが、コワーキングスペースってみなさんご存知でしょうか。
コワーキングスペースとは、作業スペースや会議室、プリンターや給茶機、ソファーや畳エリアや卓球台などを共有しながら、それぞれが独立した仕事を共働で行う空間のことを言います。
利用者同士が交流や情報交換を行えるため、私も最近、WordPressやWeb制作について話せる人を求めて、大宮のコワーキングスペース7Fによく出入りしているのですが、その7F向けに利用者投稿型のデジタルサイネージシステムを開発することにしました。




上記のようなタイル型の表示ができるWordPressテーマを選択したうえで、jQueryのanimateを利用して画面を自動スクロールさせます。また、カスタムフィールドやカスタム投稿タイプを、ランチやディナーのお誘いに活用してみました。



 こちらが投稿アプリです。起動すれば即、投稿フォームが表示されるため、WordPressの管理画面にログインするよりもスムーズに投稿を行うことができます。カスタム投稿タイプごとにフォームを複数用意でき、カスタムフィールドも切り放題です。


◆7F出向・16時間耐久ハッカソン



コワーキングスペース7Fは朝の7時から夜の11時まで空いているため、16時間耐久一人ハッカソンと銘打って一日で開発を行いました。MonacaPressとWordPressと既存のテーマやプラグインを駆使すればシステムがスピーディーに作れるはず、という目論見でしたが、結果は上々で本当に1日でシステムが一式出来上がりました。





開発の細かい情報はソースコード込みで順次MonacaPressのサイト上で公開していきます。
コミュニティーボード

また、ご協力いただいた星野さんからもコメントを頂きました。


株式会社コミュニティコム 星野邦敏氏のコメント




WordPress制作者として、モバイルアプリが簡単に作れるようになると、ビジネスチャンスを広げることができてとてもありがたいです。」



◆MonacaPress(投稿アプリ)を活用する3つのポイント



投稿型のサイトと絡めるのは汎用性が高いアイディアです。
投稿アプリを活かすポイントは次の3つです。



  • サイト管理者以外の人からの情報を使う

  • シンプルなフォームにしてアウトドアからの投稿を受けれる

  • カスタム3兄弟を活用する



MonacaPressを使ったシステムの第2号事例お待ちしております。挑戦してみたい方がいらっしゃいましたら、岡本までお声掛け下さい。



◆参考URL


MonacaPress – WordPressアプリ開発プラグイン
大宮 コワーキングスペース7F
BizVektor
コミュニティーボードの紹介

特命MonacaPress vol3. WordPressのプラグインでアプリを生成する魔法の仕組み

WordPressMonacaをどうやって連携させれば、最も大きな価値が生まれるのだろう。
片方はCMSで得意分野はコンテンツの管理、もう片方はIDEなので得意分野はソフトウェアを作り出すことなので、そこを活かす必要があります。

両者の強みを活かすアイディアとして、WordPressプラグインでアプリのソースコードを生成してMonaca側アプリ化を行う仕組みにたどり着きました。

イメージとしては次のような形を考えています。



ちょっと発想が奇抜すぎて説明するのが難しいのですが、この仕組みが実現すればWordPressの製作者の方たちは、WordPress閲覧アプリやWordPress投稿アプリを簡単に作ることができるようになります。
また、Monacaを経由するため、アプリの出来が気に入らなければソースコードを修正して自由にカスタマイズすることができます。カスタム3兄弟への対応もMonacaIDEを使って編集することで実現可能です。

この仕組みを実現するのは結構大変です。仕組みも大掛かりですが、生成するアプリの機能やデザインにこだわり始めると、時間がいくらあっても足りません。そしてドキュメントも必要です。
自分も本業があるので、ずーと特命を続けるわけにもいかない…

「そうだ、オープンソースプロダクトとしてコミュニティーベースで開発しよう!」

もしこのアイディアに本当に価値があるのなら、この仕組みを必要としている人たちと集まって、Monacaの開発とは関係なく、自分たちの手で作るのが有意義なんじゃないだろうかと考えました。各プラグインは全てGPLで公開して、アプリの作り方やカスタマイズ方法もコミュニティーで共有しながらドキュメントを書いたり勉強会をやればいい。

国内発のオープンソースプロジェクト立ち上げと、コミュニティーベースでの開発。
成功したら、これは中々面白いですよ!ということで今、WordCampTokyoに向けてプロトタイプを改めて開発中です。
ブースで展示するので、興味がある方は是非、見に来てください。

WordCamp Tokyoまであと1ヶ月切ってしまった…

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

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



諸機能



  • 記事が読めるよ!

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

  • 固定ページ一覧も搭載

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



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

特命の成り行き


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

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>



jQueryプラグインの有効化


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


設定の変更


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



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


ビルド


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

今後のロードマップ


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

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

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

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

わぷー可愛いですよね