たきざわ住所変換サイトを作った

こんにちは,のびすけです.

いわてアプリコンテストというものがあったのでそれに提出する用にアプリを作りました.

岩手県 – いわてアプリコンテスト2013を開催します! 

※2014/1/31まで応募出来るそうです!

 

作ったもの 「たきざわ住所変換」

URLはこちら → http://taki-zawa.appspot.com/

ポイント1: 実用性バッチリ!

滝沢村が2014年1月1日に市制移行し,それに伴い住所と郵便番号が変わってなかなか覚えられないという人が多いです.そんな人のためにボタン1つで住所変換と郵便番号検索を行ってくれるサービスです.急遽住所や郵便番号を確認する必要があったときなどに使って下さい.

ポイント2: 複雑な住所も変換!

住所は特殊な変更をしている地域もありますが,ウマく対応させています.郵便番号は通常の住所変換APIではまだ対応しておらず,自力で情報集めているのでかなり貴重なサイトになってると思います.

ポイント3: モバイル対応!

レスポンシブ対応しているのでモバイルwebでも大丈夫です.サーバーとデータ通信はしていないので安心して住所を入力できます.

動作環境 webブラウザ(Chrome,Safari推奨ですがPC/スマホ関係無く動作すると思います)

裏側の話

サーバーサイド: Google App Engine(載せてるだけ)

クライアントサイド: Gumby Framework

基本的にJavascriptだけで組んでいるのでページを読み込んでしまえばオフラインでも使えます.スマホアプリへの組み込みなども考えようかな.

さくらVPSにNode.jsをインストールしてブログエンジンGhostの導入まで

こんにちはのびすけです.

ブログエンジンとして有名なシステムとしてPHPで動作するWordPressがありますが,最近はNode.jsで動くGhostというブログエンジンが注目されているみたいです.

参考: シンプルで美しいnode製のブログエンジン「Ghost」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ 

最近はNode.jsを触っていたということもあり,Ghostのインストールを行ってみたので手順をまとめます.

環境

  • さくらVPS
  • CentOS 6

VPSにSSHでログインして作業します.

1. VPSにNode.jsをインストール

参考: さくらサーバーのVPS環境でnode.jsを動かす | Like a Long Sigh 

記事を参考にしつつまずはNode.jsをLinux上にインストールしてみます.

1.1 NVMを使ってNode.jsをインストール

Node.jsのバージョン11系だとGhostのインストール時にエラーが出たので10系を入れることにします.

 

1.2 NPMをインストール

Node.jsのパッケージマネージャーのNPMを使えるようにしておきます.

ここまででNode.jsを使う準備が整いました.

2. Node.jsでwebサーバー立ち上げ&HelloWorld

実際にコードを記述してwebサーバーを起動させてみます.

hello.jsはこんな感じ

記述を保存したら,実行してみましょう.

VPS上で作業しているのでVPSの http://ホスト名:8080 に接続すればこんな画面が表示されるはずです.

2.1 プロセスの永続化

このままだと,SSHでログアウトしたりControl+Cでプロセスを切ると↓の画像のようにwebサーバーがダウンしてしまいます.

SSH接続が切れても大丈夫なようにプロセスを永続化させましょう.foreverというコマンドを使います.forever startで起動させ,stopで処理を停止できます.

 

3.Ghostの導入

GhostをDL&解答

とすればインストールが完了します.

で起動させてみましょう.

(エラーが出ない人はここで終わりです!)

3.1 Ghostのインストールでエラー

$npm install –production

ここでエラーが出てハマりました.

3.2 エラー対応 Sqlite3

出たエラーはこんな感じ.

Ghostでは保存先としてSqlite3を使っているらしく,sqlite3がないよーって言われてエラーが出てるみたいでした.

ということでsqlite3をインストールしました.

がまだエラーが続きます.`

3.3. エラー対応 Pyhon2.7

エラー内容を見るとPythoのバージョンが2.4.3を使ってて,2.5.0以上3.0.0未満のバージョンにしなさい.みたいなことが言われてるみたいでした.

ということでPython2.7を入れてみました.

参考:CentOSにPython2.7.3をインストール | 開発Note(チラ裏) 

参考: node.js – How to use a different version of python duing NPM install? – Stack Overflow

StackOverflowでまんまな質問がありました.

この手順を実行すればpython2.7が使えるようになりました.

3.4 再度チャレンジ

おお!エラーが出ずにできました!

起動させてみます.

無事動いてくれたくれました!

ただこれではローカルからしかアクセス出来ないので,グローパルIPというかドメイン指定します.

config.jsで接続ホストを指定 37行目のhostと39行目のportを設定しました.hostは既に公開しているドメイン, postは適当です.

http://sakumon.jp:1218 にアクセスすると..キタ—–

一安心です.

3.5 永続化する

先程と同じく,このままだとsshでログアウトすると npm startがキャンセルされてサーバーもダウンしてしまうので先程インストールしたforeverコマンドで永続化させます.
ghostフォルダ内で以下のように指定してforever startを実行しましょう.

参考:Ghostをインストールするには – Ghost日本語ガイド 

マニュアル通りに以下を実行し,

http://sakumon.jp:1218 へアクセスするとエラーが….

どうやら先程config.jsでdevelopment環境としてhost:portを設定していたのでNODE_ENVの値を変更する必要があるみたいです.

これで永続化できました!

4. まとめ

けっこう簡単にNode.jsのインストールからGhost導入が出来るみたいです.(途中でハマったのがなければ)

Node.jsで動作するブログエンジンですがPythonとの依存関係があるってのは意外でした.私のローカルマシンのMacだとデフォルトでPython2.7が入っていたので特に気が付かなかったです.

導入してみてから気付きましたが現時点のGhostのバージョン(v0.4.0)では複数人でのブログ投稿が出来ないみたいでした.ここまでやってから気付いたのが残念(笑

結局Wordpressで管理したいと思います. Ghostの参考までに載せておきますが以下のリンクはたぶんいつか切れます笑

もりけんブログ(Ghost)

Node.js+Express+MongoDBでCRUDなシステム(簡易掲示板)を作ってみた

gihyo.jpのNode.jsの連載を見ながら掲示板システムを作ってみました.

基礎から学ぶNode.js:連載|gihyo.jp … 技術評論社 

この連載中のプログラムでは投稿(Create)と表示(Read)は作ってありますが,更新(Update)と削除(Delete)が無かったので少しコードを編集してCRUDが出来るようにしてみました.

modelの記述はgihyo.jpの連載のままです.

 

勉強になるようにファイルの記述も若干変えてます.

デフォルトではroutes/index.jsに処理を記述してますが,routes/bbs.jsというファイルを作ってそこに処理を書きます.

↑の記述をroutes/bbs.jsにしたのでapp.jsのモジュール読み込み部分も変更します.

URLルーティングの部分も変更しましょう.

 

ビューはこんな感じです.

 

 

 

http://ホスト:ポート/bbs_index でアクセスするとこんな感じで表示され,×を押すと削除,編集を押すと編集フォーム画面に遷移します.

Express(Node.JS)でhttp.getでjsonを取得してパースする

こんにちは,のびすけです.

今日はExpress+Node.jsでAPI経由でJSONを取得してパースをやってみました.まだまだNode.jsとExpressについてよく分かってないので間違ってる部分があるかもです.

Expressでは各ページ毎にroutesフォルダ内に処理を記述するような形になっていると思うので,routes/index.jsに処理を書いてみます.

Node.jsでAPI取得

node.jsの場合httpというモジュールを読み込み,http.getというメソッドでAPI取得が出来ます.取得したJSONをJSON.parse()でパースします.

13行目のretに取得してきたAPIが全部入る感じです.

 

FacebookグループのGraphAPIを取得

今回はFacebookグループのフィード情報を取得するために,アクセストークンが必要なAPIを叩いてみました.この場合リクエストURLが

https://graph.facebook.com/757195547641712/feed?access_token=(アクセストーク)

という形になり,httpモジュールではなく,httpsモジュールを必要とします.↑のコードが少し変わって以下のようになります.

 routes/index.jsで呼び出してみる.

デフォルトだとroutes/index.jsはこんな感じです.

これに↑の情報を追記して,APIの情報をビューに渡しましょう.以下のようになります.

このように書く事で,ビューではJSON情報が入ったdata変数が使えるようになります.

 

 

 

 

Gumby + Node.js(express) +appfogでペライチページを作ったので解説

こんにちはのびすけです。

仕事でMEAN Stackを使うかもしれない話を聞いて焦ってJSを勉強してます.

MEANはMongoDB,Express,Angluer.js,Node.jで作ったweb開発環境のことをいうらしいです.

今回はペライチページを作りたくてサーバーは特になんでもよかったのですが,↑の話もありNodejsを使ってみました.

Nodejsの特徴でもあるsocket.ioなどのリアルタイム性のある機能は付けてないですが,今後の拡張で考えたいと思います.

作ったもの

 Culfethonのページ 

岩手県盛岡市にできた”MoriokaTsutaya”と併設のカフェ”Culfe”でのハッカソンを(勝手に)発信するサイトです。

開発時間: 2時間強 (このブログ記事執筆2時間弱…)

技術

  • PaaS: AppFog
  • サーバー: NodeJS
  • フレームワーク: Express
  • CSSフレームワーク: Gumby Framwork

いつもはBootstrapを使うんですが,少し飽きて来たので違うCSSフレームワークを探したところ,Gumbyというのが有名っぽかったので使ってみました.

Bootstrapはもう古い!?Gumbyフレームワークが便利 | スマートフォン&モバイルEC事例ノウハウ集|モバイルファーストラボ 

手順メモ

AppFogの対応バージョンのNode.jsを用意

AppFogでNode.jsが使えるようになってたのを知って,HerokuかAppFogで迷ってAppFogを使うことにしました.

AppFogの対応バージョンを調べる

AppFogで対応しているNode.jsのバージョンの調べ方はAppFogの公式ドキュメントページ(Node – AppFog Documentation) を参照しましょう.

$af login → $af runtimes で対応言語とバージョンが見れます.

※afコマンドを使えるようにしておきましょう.

現時点でAppFogが対応してるNode.jsは0.10.22が最新みたいですね.

NVMでNode.js0.10.22を入れる

NVMはNode Version Managerの略で,複数のNodeのバージョンを上げたり下げたりを簡単に行うことが出来ます.

【Node.js】nvmをインストールして設定するまでの方法 | creator note 

↑の記事の通りnvmコマンドを使えるようにしましょう.

・nvmの確認

nvmのバージョンが表示されればnvmコマンドが使えてます.

 

・現在のNode.jsのバージョン確認

0.8.21が入ってるみたいです.

 

・ NVMでインストール可能なバージョンを調べる

既にNVM経由でインストール済みのものは青く表示されます.

 

・0.10.22をインストール

これでインストールをして, 0.10.22に利用を切り替えできます.

 

・バージョンを再度確認

0.10.22が使えるようになりました.

ちなみに,既にインストールしてあるバージョンに切り替えるときは以下のようにすればOKです.

ExpressでWebページのひな形を作成する

expressコマンドが使えるようになっていない人は

を実行すればexpressコマンドが使えるようになると思います.-eでejsというテンプレートエンジンが使えます.jadeが主流っぽいですが,ejsの方がhtmlの記述で使えるので馴染みやすいです.(といっても今回はHTMLとしてしか使いません)

これでexpressを使ったひな形ファイルを生成してくれました.npm installで必要なモジュールをインストールしてくれます.

エラーが出てなければ大丈夫です.

サーバーを立ち上げてみましょう.

デフォルトだとhttp://localhost:3000でサーバーが立ち上げるのでブラウザからアクセスしてみましょう.

こんな表示になってれば成功です.サーバーを切断するときはcontroll+cです.controll+zは使わないようにしましょう.(ちょっとメンドクサイことになるので)

AppFogにデプロイして動作確認

先にデプロイしてみます. 一番最後にやるものですが,今回は公開することを前提にしているのでAppFog上での動作を先に確認しておきます.

AppFogでアプリ登録

AppFogにアクセスしてNode.jsのアプリケーションを登録しましょう.

アプリ新規作成ページ(https://console.appfog.com/apps/new)で「Node」を選択しましょう.

※「Node Chat」じゃないほうの「Node」です.

↑で言語選択したら,サーバーとドメインを決めます.今回サーバーは「AWS Asia Southest」にしました.ドメインにはculfethon(アプリケーション名)を設定しました.

入力したら「Create App」を押して,アプリを登録完了です.

http://culfethon.ap01.aws.af.cm にアクセスしてページが表示されればOKです.

さっき作ったExpressのページをAppFogにデプロイ

アプリケーションのフォルダ内で af update (AppFogに登録したアプリケーション名)を実行します.

エラーが出なければデプロイ成功です. http://culfethon.ap01.aws.af.cm にアクセスして Welcome to Expressの表示に変わっていれば成功してます.

Gumby Frameworkを導入

Bootstrapとはまた違ったGumbyを使ってみます.

準備

Gumby公式ページからzipファイルをDLしてきましょう.DLしたzipファイルを展開し,適当なフォルダに設置します.

Expressで自動生成されたpublicフォルダの中にはimages, stylesheets,scriptsのフォルダが生成されていると思いますが,これらは使わないので削除します.

代わりに先程展開したGumbyフォルダ内のcss,fonts,img,jsのフォルダごとコピーして設置しましょう.

demoをもとにGumbyを動かす

 

先程展開したGumbyフォルダ内のdemo.htmlのコードをコピーして,views/index.ejs ファイルに上書きしましょう.

$node app.js でサーバーを起動し,http://localhost:3000 へアクセスしてみましょう.↓のようなサイトが表示されていればGumbyの適用が成功してるはずです.

あとは公式ドキュメントで各パーツの使い方を調べつつサイトを作っていきます.Bootstrapを使った事がある人なら直感的に分かると思います.

User Interface UI Kit | Gumby Framework 

最後に

作ったサイトを $af update culfethon としてデプロイして完了です.

 

感想

これくらないの規模だとけっこう直感的にGumbyもExpressも使えたなぁという印象です.素早い開発でそれっぽいサイトが出来るのでオススメします.

今後もっと色々とnodejsの機能を使いこなしていきたいですね.

Culfethonのページ 

Sublime Text 2をコマンドラインから起動する設定(.bash_profileで)

 

Macでターミナルを使っていてSublimeTextで編集したいときがよくあります.

OS X Command Line – Sublime Text 2 Documentation 

公式にやり方が載ってましたが,既に記事書いてる人がいたので

コマンドラインからSublime Textを使えるようにする – soikw工房 

 

.bash_profileを編集してやってみます.

vimはまだまだ慣れないです.最後の行に追記しましょう.

保存したら変更を適用させます.

これでOKデス.

sublコマンドが使えるようになりました.これでコマンドラインからSublimeTextを起動出来ます.

 

 

Google App Engine for Python から Tweet api1.1

Google App Engin で Twitter APIを叩いてbotにつぶやかせてみます.コンシューマーキー諸々は取得しておいて下さい.

参考にしたブログでは少しエラーが出たのでメモしておきます.

環境は

・Python2.7 (Google App Enigne)

・Twitter API 1.1

です.

参考 Google App Engine for PythonでTwitterのbotを作った。 – yappynoppyの日記 

無題メモランダム: TwitterボットをOAuthに対応させてみた – Google App Engine(Python) 

 

フォルダ構成

はこんな感じにしています.

controllersフォルダ内には各処理を記述するファイルを,
extendsフォルダ内に拡張機能のファイル等を入れるようにしてます.

ライブラリをDL( → mikeknapp/AppEngine-OAuth-Library) して設置しましょう.

私はextendsフォルダ以下に git clone しておきました.

extends/AppEngine-OAuth-Library とフォルダが出来るので
AppEngine-OAuth-LibraryをGAE_Oauthとリネームします.

oauth.pyを編集

そのままだとPython2.7の環境では

ImportError: No module named django.utils というエラーが出たので,

50行目付近の from django.utils import simplejson as jsonをコメントアウトして, import jsonに変更しておきましょう.

 

tweet.pyを記述

14行目でさっき設置したextends/GAE_Oauth/oauth.pyを読み込んでいます.

19行目のリクエストURLは現行バージョンです.twitterの仕様が変われば変わります.はい.

app.pyから呼び出す

 

これで http://ホスト名/tweet にアクセスすればbotがつぶやいてくれます.

[GAE/Python] ファイルを処理ごとに分割して外部ファイル化

ソースコードの量が多くなってくると1つのファイルにだけ記述していると管理が大変になっていきます.

ので (ミカサ風)

前回のソースコードを元にファイルを分割してみたいと思います.

[GAE/Python] Google App Engine DatastoreからJSON出力する | offsidenowの日常を綴ったブログ 

モデルを外部ファイル化

MVCにちなんで,モデルを外部ファイル化したいと思います.

↑のソースの8〜11行目のデータベース(モデル)定義の部分をまるっと切り取って,modelフォルダを作成し,その中にdb.pyを作り貼付けましょう.

db.pyではdbモジュールを使ってるので 3行目のimport文は記述しておきます.

分割をしたらapp.pyでは5行目のように分割したファイルを読み込むようにしましょう.

from フォルダ名.拡張子抜きのファイル名 import *

とすれば読み込めます.5行目の書き方でapp.pyと同じ階層にあるmodelフォルダの中のdb.pyを読み込めます.

この時点でアクセスすると

ImportError: No module named model.db

というエラーがおきると思います.

読み込む際にはそのフォルダに__init__.pyというファイルを設置しておく必要があるみたいです.

とりあえず: [Python][お勉強] Python入門(38) – パッケージ 

パッケージインポートする場合、「サブディレクトリ」には必ず__init__.pyファイルを置かなければならない。そうしないとインポートが行えない。

らしいです.ということで__init__.pyを設置して,以下のような階層構造にして下さい.

これでアクセスすると前回と同じ動作をしてくれると思います.

クラスを外部ファイル化

処理部分もモデルと同じやり方で外部ファイル化してみます.

class ShowJson部分を切り取り,controller/controller.pyを作成し,その中に貼付けましょう.

必要なモジュールのインポート文は記述して下さい.先程分割したモデルのインポート文はこちらのcontroller.pyに記述します.

app.pyはこんな感じになります.

4行目で今分割したcontroller.pyを読み込んでます.

これでapp.pyではURLのマッピングだけを記述し,

処理はcontroller.pyでモデルはdb.pyへ記述するという感じで分けることが出来ました.

このやり方が正しいかどうかは分からないですが,簡単な切り分けの参考にはなると思います.

[GAE/Python] Google App Engine DatastoreからJSON出力する

あけましておめでとうございます。正月の時間でなんとなくGoogle App Engine for Pythonをさわってます.

GAEではDatastoreというデータベースを使いますが,そのDBに保存したデータをJSON形式で出力するやり方で少しハマったのでメモしておきます.

ヘッダー部分

こんな感じです.

Pythonはあまり詳しく無いですが2.6以前はimport simplejsonを使っていたとか.今使っているのはPython2.7でimport jsonと宣言します.

モデル

Google App Engine for Pythonのスタートガイドで利用してる感じでモデルを作ります.

データストアの使用 – Google App Engine — Google Developers 

authorはStringPropertyにしてます

JSON出力部分

4〜8行目はDBの情報をJSONに変換するパーサーです.

Google App Engine Datastore Query to JSON with Python – Stack Overflow 

StackOverflowに同じ質問があったので参考にしました.

15行目のjson.dumpsでindentを指定するとjsonがpritty-printになってJSONの表示が見易くなります.

参考: unix – How can I pretty-print JSON? – Stack Overflow 

 

ソース全体

アクセスするとこんな感じです.

 

気ままに書いて行きます