まだプログラマーですが何か?

プログラマーネタとアスリートネタ中心。たまに作成したウェブサービス関連の話も http://twitter.com/dotnsf

タグ:plugins

超有名なコンテンツ管理システムであるワードプレスは数多くのプラグインも提供されており、プラグインを組み合わせるだけで色々な目的のサイトが構築できてしまいます。

ふとした事情でクラウドファンディング的なサイトを試験的に用意する必要が生じたのですが、「ワードプレスだけでサクッとクラウドファンディングサイトが作れたりしないだろうか?」と思い立って調べてみました。結論としては「色々あるけど、とりあえずクラウドファンディングが作れるプラグインは見つけた」ので、調べて構築した内容を以下に紹介します。


まず、クラウドファンディング用のワードプレスプラグインは有料/無料あわせて数多く存在しています。その中で以下に紹介するのは IgnitionDeck という団体(?)から提供されている IDCF(IgnitionDeck CrowdFunding) (及び IDCF 対応のテーマ)です:
2017040812



IDCF をワードプレスに導入するにはワードプレス管理画面のプラグイン導入から "IgnitionDeck" を検索し、"IgnitionDeck Crowdfunding & Commerce" を見つけて「今すぐインストール」します:
2017040801


他のプラグイン同様に、インストール後「有効化」をクリックすると、このプラグインが有効になります:
2017040802


IDCF プラグインを有効にしても、この段階では IgnitionDeck 未登録のためまだ使えません。管理画面に "IgnitionDeck" というメニューが追加されているので、メニューから IDCF を選び、 "Activate Now" ボタンをクリックして登録画面に遷移します:
2017040803


登録といっても名前、メールアドレス、そしてパスワードを入力するだけです。簡単:
2017040804


登録が完了すると次に行うべき手順が紹介された画面が表示されます。↓下図の3ステップです:
2017040805


1ステップ目、(ここまでの作業でいつの間にか導入されていた)"500 Framework" テーマを有効にします:
2017040806


2ステップ目、IDCF の設定を行います(そのまま Save でも可):
2017040807


そして3ステップ目、というかクラウドファンディングサイトとしてのスタート地点です。クラウドファンディングのプロジェクトが開始できるようになったので、何か1つ追加してみます:
2017040808


プロジェクトを保存すると、ワードプレスのトップ画面のプロジェクト一覧から確認できるようになります:
2017040802


プロジェクトを選択して開くと、クラウドファンディングの説明や目標額が確認でき、支援表明もできるようになっていることが確認できます:
2017040803


IDCF には有料のオプションもあり、サポートや追加で使えるツールキットが用意されているようです。が、まだあまり調べていません。こちらは気が向いたらということで。。


軽く使ってみた限りでの感想ですが、管理画面が英語なのはともかくとして、目標額などを入力すると自動的に米ドル扱いになってしまうことに気付きました(要は金額のデータとして "100" と入力すると、自動的に「100 米ドル」扱いになってしまう)。これをカスタマイズするには IDC メニューの CURRENCY SETTINGS から "JPY" を選択して更新しておくことで変更できました:
2017040801


もう一点、ファンディングの支援レベル(例えばレベル1はステッカーのみ、レベル2は商品そのもの1つ、レベル3は商品を10個まとめて、・・・みたいなもの)を複数追加しようとしたのですが、うまくできませんでした。ググってみると、同じ現象で悩んでるっぽい人向けの FAQ っぽいページを見つけたのですが「会員専用ページです」みたいなメッセージから先に進めず、未だに原因やワークアラウンドが分かっていません。会員としてログインしてるはずなんだけどな・・・ もしかすると、ここが無料版の制限なのかもしれません:
2017040801


もう一点。実際にユーザーがこのプロジェクトを支援しようと "Support Now" して、"Next Step" に進もうとすると、、:
2017040901


こんな画面に推移します:
2017040902


ここで何らかの入力フォーム(project_purchase_form ?)が出て来る想定なんだろうけど、ここをどうすると表示できるようになるのか? カスタマイズするにはどうするのか? といった情報を探していたのですが、どうやらここから先は無料版では提供されていない機能のようでした:
Ignitiondeck does not redirect me to Purchase Page


というわけで、まだ IDCF のフル機能を試せたわけではないのですが、ここまでは超簡単に作れてしまったことも事実。便利なプラグインをまた1つ発見してしまった。。


IBM Bluemix 上でスケーラブルな検索エンジンである ElasticSearch サービスが利用可能になりました:
https://console.ng.bluemix.net/catalog/services/compose-for-elasticsearch/

2016092906


実は以前からこの Compose for ElasticSearch サービスは利用可能な状態ではありましたが、まだ Bluemix との統合が完全ではなく、別途 Compose 社との契約が必要になる状況でした。それが先日 2016/Sep/22 のアップデートで Bluemix 画面から直接契約可能(というか、サービスとして追加やバインドが可能)になったのでした。

実際にサービスとして追加し、バインドしたランタイムからはこの ElasticSearch サービスを利用するための接続情報が環境変数から確認できます:
2016092901


この環境変数 VCAP_SERVICES 内の "compose-for-elasticsearch" と書かれたエントリー内 "credentials" の "uri" に記載された値が ElasticSearch サービス(のドキュメントルート)にアクセスするための URL になります(この図の XXXX 部分がユーザー名、YYYY 部分がパスワードになるので、取扱いにはご注意ください):
  :
  :
  "compose-for-elasticsearch": [
    {
      "credentials": {
        "db_type": "elastic_search",
          :
        "uri": "https://XXXX:YYYY@bluemix-ZZZZZZ.dblayer.com:NNNNN/"
          :
    }
  ]
  :
  :

試しに同 URL にブラウザでアクセスすると、ElasticSearch サービスのバージョン情報などの概要を確認することができます。この例だとバージョン 2.4.0 が動いていることがわかります:
2016092902


この ElasticSearch サービスで既に導入されているプラグインはあるのでしょうか?その確認には、以下の URL (上記 uri の値に "_nodes?plugin=true&pretty" を足したもの)にブラウザや curl などで GET アクセスします:
(上記 "uri" の値)_nodes?plugin=true&pretty

するとプラグイン情報を含むサーバー情報が整形された形で確認できるような結果が表示されます:
2016092903


この画面内で "plugins" を検索してスクロールすると、実際に導入済みのプラグインの一覧を確認できます。この例では "cloud-aws" と "head" と "kopf" の3つのプラグインが導入済みであることが分かりました:
2016092904


head プラグインは ElasticSearch では定番プラグインの1つで、ElasticSearch クラスタのウェブインターフェースを提供してくれるプラグインです。なので "uri" の値の最後に "_plugin/head" を付けてアクセスすると、head プラグインの画面が(特にカスタマイズ無しで)表示することができます:
2016092905


Bluemix がまた1つ便利になりました。


CentOS で(Eclipseを使って) Java の開発環境を整備するまでの手順を紹介します。
Eclipse を使うので、CentOS には X Window やデスクトップといったモジュールが導入されていることが必要です。


まず Eclipse のインストールそのものは簡単です。JDK を導入した上で最新版をダウンロードして展開してもいいですし、最新版でなくてもよければもっと簡単に yum でインストールすることもできます(以下、こちらの手順を使っている前提で紹介を続けます):
# yum install eclipse

yum を使う場合であれば JDK ごとインストールされてます。なお、2014/10/22 現在ですが、この方法でインストールされる Eclipse のバージョンは 3.6.1(Helios) でした。


加えてウェブアプリケーションの動作確認のため FireFox も導入しておきます:
# yum install firefox

インストールが完了したら、デスクトップのメニューから アプリケーション > プログラミング > Eclipse で起動できます:
2014102101


初回起動時はワークスペースをどのディレクトリに作るか聞かれます。特に理由がなければデフォルトのままでも構いません。"Use this as the default and do not ask again" にチェックを入れておくと、次回起動時にこの質問は聞かれなくなります:
2014102102


Eclipse が初回起動した時の画面です。チュートリアルなどは飛ばして、"Workbench" をクリックし、実際の作業画面に移ります:
2014102103


実際にコーディングを行う作業画面がこちらです。最初の段階では何もプロジェクトがないのでのっぺらぼうですが、ここに作業するプロジェクトを追加していくことになります:
2014102104


ただ、この段階ではまだ Eclipse に充分なプラグインが導入されていないため、Java のウェブアプリケーションを作るウィザードも使えませんし、デバッグ用のウェブアプリケーションサーバーも含まれていません。最低限必要な環境を追加していく必要があります。

Eclipse 作業画面のメニューから Help > Install New Software を選択して、プラグインの更新ダイアログを表示します。そして Work with: 欄に使っている Eclipse のバージョンに合わせた更新サイト(3.6.1 であれば http://download.eclipse.org/releases/helios)を指定します。しばらく待つと下に更新可能なプラグインの候補がカテゴリーに分類されて表示されます:
2014102105


ここから必要なものを選択してチェックを付けていきます。まずは "General Purpose Tools" に分類されている "Marketplace Client" にチェック: 
2014102106


続けて "Web, XML, and Java EE Development" に分類されている "Eclipse Java EE Developer Tools" と "Eclipse Web Development Tools" の両方に(上記と併せて3つ)チェックします:
2014102107


そして Next ボタンを2度クリックし、使用条件を確認した上で accept して、最後に Finish ボタンをクリックすると選択した3つのプラグインの導入が開始されます。プラグインの導入が完了すると Eclipse の再起動を促されるので、再起動("Restart Now")します。再起動後はこの3つのプラグインが有効になった状態で起動します。

この時点では Java アプリケーションプロジェクトを作成することはできるようになっていますが、まだデバッグ用のアプリケーションサーバーが用意されていません。Apache Tomcat などを別途導入してもいいのですが、ここでは簡単に導入できる Jetty をインストールして Eclipse 内から使えるようにします。


Eclipse の再起動後、今度はメニューから Help > Eclipse Marketplace を選択します(Marketplace も上記で導入しているので、再起動後からは使えるようになっているはずです)。

Marketplace ダイアログが表示されたら Find 欄に "Jetty" と入力して、Jetty 関連のマーケットモジュールを検索します:
2014102108


この結果表示されるモジュールの中から、以下の3つをインストールします:
(1) Eclipse Jetty
(2) Run-Jetty-Run
(3) WebLauncher

Marketplace では3つまとめてインストールすることができないので、これらを1つずつ探して "Install" ボタンをクリックする、と繰り返します。そして3つ全てインストールし終わったら、再度 Eclipse を再起動します。これで準備完了です。


では改めてこの環境で Java アプリケーションを作って動かしてみましょう。Eclipse のメニューから File > New > Project を選択してプロジェクトウィザードを出し、Web の下にある "Dynamic Web Project" を選択して "Next" をクリックします。プロジェクトの名称は適当に("TestWeb" など)入力します。他はデフォルトのまま "Finish" をクリックしてプロジェクトを作成します:
2014102109


このプロジェクトにテスト用の JSP ファイルを1つ追加します。プロジェクト名部分を右クリックして New > File を選択し、このプロジェクトの WebContent フォルダ内に test.jsp というファイルを追加します:
2014102110


追加作成した test.jsp を選択してエディタで開き、以下の様な内容を記入します。単純に現在時刻を表示するだけのページですが、Java を使っているので一応 Java ウェブアプリケーションと言えると思います:
2014102111


では作成したこのアプリケーションを実際に動かしてみましょう。プロジェクトを右クリックして Run As > Run Jetty を選択します:
2014102112


Eclipse 内で Jetty が(デフォルトでは 8080 番ポートで)起動します。これでこのプロジェクトが Jetty から参照できるようになっているので、同一マシンで FireFox を起動し、http://localhost:8080/TestWeb/test.jsp にアクセスしてみます:
2014102113
動作が確認できました。ちゃんと Java ウェブアプリケーションの開発や動作確認までできる環境が揃いました!



以下はオマケですが、せっかく Linux 版 Eclipse をインストールしたので、Windows 版ではできない Terminal 機能を紹介します。Eclipse 内のビューを使ってターミナルコンソールを起動する、というものです。

先程と同様にメニューから Help > Install New Software を選択して、今度は "General Purpose Tools" 以下の "Local Terminal" をチェックしてインストールして、Eclipse を再起動します:
2014102114


再起動後、Eclipse のメニューから Window > Show View > Other を選択し、Terminal の下にある Terminal を選択して OK をクリックします:
2014102115


すると画面右下に "Terminal" という名前のタブが1つ追加されます。まだ有効になっていませんが、ここがターミナルコンソールとして使えるウィンドウになります:
2014102116


実際にコンソールを使うにはタブ内の一番右のアイコン(マウスオーバーすると "New Terminal Connection in Current View" と表示される所)をクリックして、接続設定ダイアログを表示します。特に変更の必要はないので、そのまま OK ボタンをクリックします:
2014102117


ターミナルコンソールが有効になり、シェルとして使えるようになります。これで別窓のシェルにいちいち移動する手間が省けます:
2014102118


ただこの機能がまだ Incubation 段階だからなのかもしれませんが、このターミナルコンソールでは日本語が化けて表示されてしまうようです。日本語の入出力に依存するような自由な使い方はまだできない、という認識の元で使えそうです。






このページのトップヘ