PhoneGapでiPhoneアプリ開発①

PhoneGapをいじってみたくなったのでまず開発環境の構築を行った。以下はそのメモ。(前提条件としてxcodeとCommand Line Toolsは既にインストール済)

(さらに…)

ムードボードっぽいものを簡単に作れる感じのWebサービス「Mood Board Creator」

全体的に大分眠たいデザインになってますが、ある程度形が固まったと言っても過言ではない為公開します。ユーザー認証は設けてませんが、作成したムードボードの保存やPDF出力などが可能です。IEには対応していません。

Mood Board Creator

【ムードボードってなに?】
別名としてはイメージボードとか言うらしいのですが、何かをデザインする際に言語化しにくいイメージ(超クールでキラキラしててすげえかっこいいみたいな)を共同するメンバーなどに伝えるために作成するスクラップ集のようなものです。
これまでそんなものは全く作った事が無かったので存在自体知りませんでしたが、最近になってようやく実物に近いものをクライアントから頂いた資料で見る事が出来ました。やはり使う人は使うらしい。

【なにができるの?】
以下のような単純なムードボードっぽいものが作れます。(画像をクリックするとデモ画面に移動)

【制作の経緯】
10月末頃に某マッシュアップアワード用に何か作りたいなと思ってたところ、半年くらい前に某氏より聞いたムードボードを思い出し、3日くらいあれば作れるだろうと思ってたら全然終わらず、そのままズルズルと制作を継続してようやくなんとなく形になったという次第です。

本当は自動保存機能や透過pngでの出力、テキストボックの追加機能なども付けようと思ってましたが、やる気がなくなったので一旦これで区切る事にして、気が向いたら機能を拡充しようと思います。

【防備録】node.jsでnode-http-proxyを使ってApacheとの共存環境を作ったのでメモ

 

※あまりテキトーな事書くのもどうかと思いますが動いたのでメモしておきます。

 

 

【概要】

WebSocketを使ったサービスが作りたくなり、どうせなら前から気になってたnode.jsを使おうと思い立ったわけですが、既存のホスティング環境(さくらのVPS)にはApacheが走っているため、そのまま使おうとすると「http://example.com:8124」とかポート番号直打ちになるため、ちょっとカッコ悪いという問題が発生。(80番ではApacheが走ってるのでnodeが動かせない。)

 

そのため、なんか方法は無いものかと調べたら以下の素敵なスライドを発見。

 

Node.js勉強会@関西 第0回 Node.jsでつくるリバースプロキシ

 

node製の「node-http-proxy」というこれまた素敵なものがあるらしく、これを使えばリバースプロキシが簡単に作れるらしい。

 

ただ既存の環境ではApacheにバーチャルホストを設定してるので、そのままやっちゃっていいものなのか、いまいち良く分からない。

 

そのため、さらに検索したところ、なにやら凄く分かり易いサンプルを発見。

 

Reverse HTTP Proxy (Apache + nodejs)

 

正にこれだ!ということで早速、実装に取りかかる事に。

 

 

【目的】

現在、ポート80番で動いているApacheを「8080番」で動作するように変更し、node-http-proxyを使ったリバースプロキシを「80番」動作させて、各ドメインごとにApacheで処理するか、nodeで処理するかを自動的に振り分けるようにします。

 

 

【やった事メモ】

※以下、既にnode.jsはインストール済みという前提で進めます。環境はCentOS6.2です。

 

  1. 何はともあれnode-http-proxyのインストールを行います。

    npm install -g http-proxy
    npm link http-proxy
    
  2. サーバの適当な場所に上記の参考先を元にしてリバースプロキシのjsファイルを作成。

    [proxy.js]

    var httpProxy = require('/path/to/node_modules/http-proxy');
    //※本当はフルパスで読み込まなくてもいいはずです
    
    var options = {
      hostnameOnly: true,
      router: {
        'example1.com': '127.0.0.1:8080',
        'example2.com':'127.0.0.1:8080'
      }
    };
    var proxyServer = httpProxy.createServer(options);
    proxyServer.listen(80);
    console.log('It Works!');
    

    ※http-proxyの呼び出しがフルパスなのは -g を付けてインストールしたにも関わらず、私の環境ではNODE_PATHが通ってないらしく、良く分からなかったのでフルパスで書きました。通常はフルパスの必要はありません。

  3. Apacheのポートをこれまでの「80番」から「8080番」に変更。当然、そのままではサイトに繋がらなくなるので、既にApacheで何か動かしてる人は注意して下さい。
    以下、設定例。

    [/etc/httpd/conf/httpd.conf]

    Listen 8080
    
    NameVirtualHost *:8080
    
    <VirtualHost *:8080> 
      DocumentRoot /path/
      ServerName www.example1.com
      ServerAlias example1.com *.example1.com
    </VirtualHost>
    
    <VirtualHost *:8080>
      DocumentRoot /path/
      ServerName www.example2.com
      ServerAlias example2.com *.example2.com
    </VirtualHost> 
    

    コンフィグの修正が完了したら構文確認後、Apacheを再起動、またはコンフィグをリロードします。

    /usr/sbin/apachectl -t
    /etc/init.d/httpd restart
    

    この時点で一旦、80番で繋がらなくなります。

  4. 先ほど作ったリバースプロキシ(proxy.js)を動かします。

    node proxy.js
    

    動いた!・・・と思いきやエラーが発生。

    Error: listen EACCES
    

    どうやら80番で動かすにはsudoでやらないといけないらしい。再度実行すると今度は無事に動いた。

    sudo node proxy.js
    

    上手くいっていれば、この状態でバーチャルホストに設定されたドメインにアクセスするとこれまで通りちゃんとレスポンスが帰ってきます。上手くいかない場合はリバースプロキシの設定とApacheの設定をもう一度見直して下さい。

  5. さて、動いたのは良いのですが、このままの状態だとコンソールに「It Works!」と表示されたままで他の作業が出来なくなります。Macのターミナルなら標準でタブが付いてるので大した問題でもないのかもしれませんが、素人に毛が生えた程度の私くらいのレベルだともはやこの世の終わりに近い状態です。

    というかnode.jsには「forever」というnode.jsで作成したプログラムを永続化し、デーモンとして管理できるパッケージがあるのでそれを使えば話は早いのですが、今回のリバースプロキシは「80番」という特権ポートで動かしているためか、どうやらforeverでデーモンにする事ができないらしい???

    じゃあどうするのかというとコマンドの最後に「&」を付けてコントロールを奪われないようにします。

    sudo node proxy.js &
    

    こうするとバックグラウンドでプロセスが動き続けるので、リバースプロキシを動作させた後もコンソールのコントロールを奪われる事無く、色々と作業を継続出来ます。ただ、この方法は色々と突っ込みどころが多そうなので、詳しい人はデーモンにする詳しい方法とか教えてもらえると助かります。

    参考リンク:

    nodeのアプリをport80で動かす
    ログアウトした後もコマンドを実行し続ける方法

  6. これで一通りの目的は達成出来たため、後はnode.jsでガリガリとアプリを開発して適当なポートで動作させ、proxy.jsに動作しているnode製アプリの記述を加えてやれば、特定のドメインでアクセスした時にnodeのアプリが動くようになります。
    ただ、proxy.jsは最低限の記述となっているので以下のコードを参考にもう少しまともなリバースプロキシにした方が良さそうです。今だとhttpsとかで接続しても繋がらないんじゃないかと思います。
    参考:
    node-http-proxyを使ったいわゆるバーチャルホスト対応Webサーバー

    以上。

【あなたは○世代】コラボりました!

自分と同年齢の漫画やアニメのキャラクター達を調べる事が出来るWebサービス「ジェネレーションサーチ」さんとコラボレーションしました。

コラボなんて初めての事でしたがサービスの公開翌日にお声がけ頂いて(Gigazine効果恐るべし!)翌々日には対応が完了するという非常にスピード感のある体験が出来て良かったです。

(とは言うもののデータベースの充実度が段違いなのでほとんど胸を借りるような形になってますが・・・)

丁度、土日を挟むことになりましたが、休日にも関わらずジェネレーションサーチさんには対応頂いて非常に感謝してます。ありがとうございました。

以下の画像の様にあなたは○世代の結果表示画面にジェネレーションサーチさんのリンクが表示されるようになってます。

リンクをクリックするとジェネレーションサーチさんに飛んで、入力した生年月日と同世代のキャラクターをすぐに調べる事が出来ます。是非、試して遊んでみて下さい!アナゴさんはどう考えても年齢詐称だろ!

今日が人生最後の日だとしたら

スティーブ・ジョブズのスピーチで有名なアレをJQueryとPHPとSQLite3で簡単なサービスにしました。

 

【人生最後の日  http://alpha-version.com/last-day/

 

最初は一日ごとに記録が付けられるようなカレンダー形式にしようと思ってましたが、気が滅入りそうだし認証部分の実装が面倒くさいので止めました。

多言語化も考えてましたが、ドメインごとに自動判定したり、タイムゾーンの設定や判定も考慮すると非常に面倒くさいのでこれも中止です。

 

ブラウザのホーム画面にでも設定して日々焦燥感に駆られる素敵な日常を送って下さい。

JVNのWordPress3.3以下のバージョンに関する脆弱性報告についてのメモ

久しぶりにhetemlの管理画面にアクセスしたら、昨年の12月27日付けで「WordPressをご利用のお客様へ」というトピックが掲載されており、内容を確認するとどうやらWordPress3.3より前のバージョンだと非常にクリティカルな脆弱性が存在するとのこと。

 

年末のゴタゴタに巻き込まれて見落としていたのかと思ったが、WordPressの公式ブログには同様の報告はあがっていないし、そもそもhetemlに掲載されていた情報の元であるJVNこの報告この報告がいつの段階での脆弱性報告なのかいまいち良く分からないため、検索を進めたところWordPress 日本語版作成チームのGoogleグループでJVNの報告に関する議論を発見↓

 

IPA の連絡不能開発者一覧に WordPress

 

以下はマクラケン直子さんの記述を引用。

■ 経緯について 
tenpura さんにチェックをして頂きましたが、一件は4年前にすでに修正されているバグ、もう一件は過去のデフォルトテーマのバグ(こちらも修正済み、現在のテーマには無いバグ)で、2008年くらいから何度も本家にメールを送り続けていたようです。
Ryan、Otto からはこちらから secur...@wordpress.org へメールしたらすぐに(半日以内)返事が来ました。 
すでに修正されているバグや実際のセキュリティ脅威とはいえない報告については返事しないポリシーとのことでした。相当な量のレポートやスパムも届いているはずなので、これは仕方ないかと思います。 
3.3.1 の件でもみなさんお分かりだと思いますが、本当にバグがあった際にはたいてい数時間以内に動きがあります。
JVN ではソースコードを追わず、日本語版チームに連絡することもなく、また上記 URL の記載内容についても「WordPress バージョン 3.3 より前のバージョン」という表記は誤解を呼ぶので正しく書いて 
欲しいとお願いしたのですができないとのことでした。

とりあえず最新のバージョン使っておけということなのでしょうが誤解しまくったので「WordPress バージョン 3.3 より前のバージョン」という表記は止めて欲しいものですね!

WordPressの外部リンクにクッションページを挟むプラグイン

「jump.php」などでおなじみですが、外部のサイトに遷移する前に「外部サイトに移動します」とか画面に表示されるムカつくアレです。
参考:http://www.hs-sec.co.jp/bluesky_net/pagejump_minkai.htm

神ならぬ身の知る由もない何らかの理由や、あるいはクライアントの希望により「どうしてもクッションページが必要なんだ!無理だと言うなら死ぬ!!」と言われてもWordPressなら大丈夫。以下のWordPressプラグインを使えば特にコードを修正することなく全ての外部リンクにクッションページを挟むことができます。
※ただし、テンプレートに直接書き込んだ外部リンクは無理。

WP No External Links

(さらに…)

【PHP】WADAXの共用サーバでIMAP関数を使ってメールボックスに接続する

結論から言うとWADAXでは接続サーバの指定をホスト名ではなくIPアドレスにしないと上手くいきません。

WADAX共用サーバのIPアドレス一覧はコチラ

(さらに…)

柴犬botが吠えます

Javascriptの勉強がてら柴犬botを音声で吠えるようにしました。

柴犬botの通常のツイートにリンクを追加するようにしたので、それを踏むと以下のページにパラメータ付きで飛びます。

しかしJavascript面白いな。

Rails3で初期データが投入できない場合の対処

rake db:seed でテーブルに初期データを突っ込もうと思ったら、エラーが出てデータを投入できない。
ちなみにsqlite3です。

rake aborted!
/Users/myhome/rails_root/db/seeds.rb:9: invalid multibyte char (US-ASCII)
/Users/myhome/rails_root/db/seeds.rb:9: invalid multibyte char (US-ASCII)
/Users/myhome/rails_root/db/seeds.rb:9: syntax error, unexpected $end, expecting ')'

どうも文字コードがおかしいようなのでutf-8に変換して試すがやっぱり上手く行かない。
仕方ないので検索してみたら、以下のサイトが引っかかった。
db:seed failing with multibyte characters – Ruby on Rails – rails

なにやら seeds.rb の先頭に以下のコードを挟むと良いらしい。何ですこれ?明示的にutf-8になるのかな?

# -*- coding: utf-8 -*-

再度、 rake db:seed を実行したところ、上手く行った。

Pages: Prev 1 2 3 4 Next
IT起業アカデミア