アプリカンブログ

HTML5でiOS/Androidアプリが開発できるプラットフォーム、アプリカンのブログです。

写真付きブログ投稿アプリを作ってみよう

みなさん、ブログはお持ちでしょうか。ブログサービスを使っている方もいるかと思いますが、WordPressを使って自分で立てているという方も少なくないでしょう。

今回はそんなWordPressをお使いの方向けに、アプリカンを使ったブログ投稿アプリを作ってみたいと思います。

必要なもの

  • WordPress
  • アプリカンのアカウント(無料)

WordPressにプラグインをインストール

今回は外部からWordPressにアクセスしますので、Allow CORS XML-RPCをインストールします。

f:id:moongift:20150329093541p:plain

これはWordPress標準のXML-RPC APIに対して外部からのアクセスを許可するプラグインです。WordPress 4.1.1でも利用できました。

アプリカンをダウンロード

アプリカンの基本となるZipファイルをダウンロード&解凍します。

WordPress.jsとmimic.jsのダウンロード

wordpress-xmlrpc-javascript-apiのwordpress.jsと、Mimic - JavaScript XML-RPC Clientからmimic.jsをダウンロードし、javascriptsフォルダ以下に配置します。

HTMLファイル修正

そしてHTMLファイルを編集します。今回は最低限の編集です。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>
    <link href="css/style.css" rel="stylesheet">
  </head>
  <body>
    <form>
      <input type="file" name="file" id="file" accept="image/x-png, image/gif, image/jpeg" />
      <input type="hidden" name="photo" id="photo" value="" />
      <br />
      <input type="text" value="テストタイトル" name="title" size="30" />
      <br />
      <textarea name="body" cols="30" rows="6">テスト</textarea>
      <br />
      <input type="submit" name="submit" value="送信" />
    </form>
    <script src="javascripts/jquery-2.1.3.min.js"></script>
    <script src="javascripts/mimic.js"></script>
    <script src="javascripts/wordpress.js"></script>
    <script src="javascripts/app.js"></script>
  </body>
</html>

app.jsの作成

続いて javascripts/app.js を編集します。今回はapp.coffeeを作成してCoffeeScriptからコンバートしています。

document.addEventListener("deviceready", onDeviceReady, false)
onDeviceReady = ->
  # コネクション情報。それぞれ設定してください
  connection = 
    url:      'http://サーバのIPアドレス/xmlrpc.php'
    username: 'ユーザ名'
    password: 'パスワード'
  # WordPressオブジェクトの作成
  wp = new WordPress(connection.url, connection.username, connection.password)
  
  # 写真を選択したら実行
  # ここではファイルの内容をBase64でデコードするだけです。
  $("#file").on "change", (e) ->
    file = e.target.files[0]
    fr = new FileReader()
    fr.onload = (e) ->
      $("#photo").val(e.target.result)
    fr.readAsDataURL(file)

  # 送信時の処理
  $("form").on "submit", (e) ->
    e.preventDefault()
    form = $(e.target)
    base64 = new Base64(atob(form.find("#photo").val().split(',')[1]));
    file_name = $("#file")[0].value.replace(/.*\\/, "")
    
    # 写真のアップロードを行います
    file_hash =
      name: file_name
      bits: base64
      type: 'image/png'
    file = wp.uploadFile(1, file_hash)

    # 写真のアップロードが終わったら、画像のURLを取得します。
    url = file.url.concat()
    content = "<img src='#{url}' /><br />#{form.find('textarea').val()}"
    
    # アップロードした写真を記事本文に追加して記事を投稿します
    post = wp.newPost 1, 
      post_title: form.find("input[name='title']").val()
      post_content: content.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
      post_status: 'publish'
    alert("投稿完了しました")
onDeviceReady()

なお処理を見て分かる通り、アップロードの処理を行っているmimic.jsは同期処理を行っています。アップロード処理中はブラウザの動作が固まってしまうのが若干難点です。

この処理では指定された画像をアップロードし、そのURLを本文に埋め込んで記事投稿しています。post_status(投稿の状態)を公開にして投稿していますので、いきなり公開されます。ここは必要に応じて設定してください。

アプリカンでアップロード

ファイルの編集が終わったら、フォルダをZip圧縮してweb.zipとしてアプリカンの管理画面でアップロードします。

f:id:moongift:20150329093606p:plain

アプリカンシミュレータで確認

アップロードが終わったら、アプリカンシミュレータ(iOSAndroid)を使って動作確認を行います。なお、今回のコードはGoogle Chromeなどのデスクトップブラウザでも動作しますのでスマートフォンを実際に使う前に完成が確認できます。

f:id:moongift:20150329093617p:plain

記事投稿が完了するとアラートが出て、WordPressに記事が投稿されます。

f:id:moongift:20150329093641p:plain


今回はブログの閲覧ではなく、運営側にとって必要になる機能をアプリカンを使ってスマートフォンアプリとして実現してみました。XML-RPCを使えばWordPressで運用上必要な機能はほぼ実現できますので、通常のWordPressクライアントとは違う、自分たちのワークフローに合わせた形に仕上げられるでしょう。

ぜひアプリカンと一緒にお試しください!

アプリカン | アプリ開発支援プラットフォーム