2013年4月30日火曜日

Chrome Developer Toolsの変更履歴管理機能が便利だった話

このエントリーをはてなブックマークに追加 はてなブックマーク - Chrome Developer Toolsの変更履歴管理機能が便利だった話
ChromeブラウザのDeveloper ToolsにてCSSやJavaScriptのコードが編集出来たりしますが、その変更履歴を管理する機能があり、めちゃめちゃ便利なのでメモ。

SlideShareのChrome Developer Toolsを使いこなそう!を参考にさせて頂きました。

サンプル画面及びソースコード

以下の画面にて確認。
上記でCSSをいじってみたりした想定です。

変更してみる。

上記HTMLを表示し、Google Developer Toolsを表示します。表示は以下の通り。
  • 右上の設定アイコン→ツール→デベロッパーツール
  • ショートカット→(Windows:Ctl+Shift+i,Mac:Command + Option + i)
で、Sourceタブを表示します。
その後、左の矢印のアイコンをクリックし、今回はmystyle.cssを編集したいのでこれをクリックします。
とりあえずfont-sizeを50pxに変更し、保存(MacならCommand+s)します。
その後、右クリック→Local Modificationsを選択すると画面下に変更履歴が表示されます!!!
しかも。。
diffが見れます!!すげー!!!
その後、変更して、保存とするとここの履歴にどんどん追加されていきます。

変更を元に戻す場合

色々編集したけど最初の状態(オリジナルのファイルの状態)に戻したい、という時は変更履歴の箇所にあるrevertをクリックする事で元の状態になります。
なお、上記の方法だと今までの変更履歴も全て削除されます。変更履歴は残したいけど、内容を最初の状態に戻したい場合はapply original contentを選択する事で、変更履歴を残して元の状態に戻す事が出来ます。(正確には元の状態に戻す、という変更を行っています。なので、変更履歴の最終履歴として元のファイルへ戻した処理が追加されています。)

特定の変更を反映したい

変更を反映したい内容の箇所でapply revision contentを選択すると対応する変更箇所のみを現在の状態に反映する事が出来ます。

最後に

色々Google Developer Toolsは便利な機能が有りますが、この機能は特に便利だと思いました。今後の開発では是非有効活用していきたいです。

2013年4月29日月曜日

Chrome Developr Tools(Elementタブ)使い方メモ1

このエントリーをはてなブックマークに追加 はてなブックマーク - Chrome Developr Tools(Elementタブ)使い方メモ1
Code SchoolChrome Developer ToolsのElementタブの使い方の1コース目を終了したので、そのメモ。

Chrome Developer Tools起動方法

  • 右上の設定アイコン→ツール→デベロッパーツール
  • 右クリック→要素の検証
  • ショートカット→(Windows:Ctl+Shift+i,Mac:Command + Option + i)

Elementタブで出来る事。

  • HTML、CSSなどの編集が出来る。
  • 要素の編集、確認が出来る。
  • 要素の追加、移動、属性の変更なども出来る。

変更したいDOMの検索

  • 画面左のHTMLビューから探す。
  • 画面下の虫眼鏡アイコンを選択し、HTML画面の変更したいDOMをクリックする。
  • HTML画面の該当の要素の箇所で右クリックしてInspect Elementを選択する。

DOM操作

  • 画面左のHTMLビューで直接文字列などを変更可能。
  • 該当箇所で右クリックしてAdd Atributeで属性追加可能。
  • 該当箇所で右クリックしてDelete Nodeで要素を削除。
  • 該当箇所で右クリックしてEdit As HTMLで選択箇所のHTMLを編集可能。
  • ドラッグ&ドロップで表示位置の変更も可能。

編集ファイルの保存

  • 右クリック→copy as HTMLで編集したHTMLのコピーが可能。

dotcloudのWordpressからBloggerに移動しました

このエントリーをはてなブックマークに追加 はてなブックマーク - dotcloudのWordpressからBloggerに移動しました
dotcloud上にWordpressを立ててBlog的に使っていたのですが、dotcloudの無料プランが終了してしまいました。。。(今はアクセスも出来ない)

記事や記事で利用した画像ファイルは丁度先月ぐらいにdropboxAPIを利用して毎日バックアップするようにしていたので何とか全ての記事を復活させる事が出来ました。バックアップの詳細はこちら。[dropbox]dotcloudからdropboxAPIを利用してwordpressをバックアップしてみた[dotcloud]

どこかまた違うPaaSにWordpress立てても良いかと思いましたが、今回みたいな事がまた起きるような気もしたのでやめときました。

まあ、そんな感じでこちらでも時間を見つけて何か思いついたりしたら色々書いていこうと思います。

[JavaScript]JavaScript本格入門chapter5まで読んだメモ

このエントリーをはてなブックマークに追加 はてなブックマーク - [JavaScript]JavaScript本格入門chapter5まで読んだメモ

Bloggerへの移行前のWordpressにて2013-04-20に投稿した記事です。

JavaScript本格入門 ~モダンスタイルによる基礎からAjax・jQueryまで(amazon)のChapter5までを読んでメモっておこうと思ったコトをつらつらと。

オブジェクトリテラル(連想配列)のプロパティへのアクセス

var obj = {a:1, b:2, c:3};
alert(obj.a); // 1
alert(obj['a']); // 1

プロパティへのアクセス方法はドット演算子(.)もしくはブラケット構文の方法がある。

JavaScriptでは内部的に2進数で計算しているため、少数点を含む計算では誤差が発生

alert(0.2 * 3); // 0.600000.....1

これは0.6ではなく、0.600000000000…..1みたいになる。なので、if文とか使うときには注意が必要。

宣言した変数の確認

宣言した変数のデータ型を確認する際にはtypeof演算子を利用する。

var one = 1;
alert(typeof(one)); // number
var hello = 'hello';
alert(typeof(hello)); // string
var ary = [];
alert(typeof(ary)); // object

ただし、オブジェクト型の変数にtypeof演算子を利用すると全てobjectとなる。どのオブジェクトか判断するためにはinstanceof演算子を利用する。

var ary = [];
if(ary instanceof Array) {
    alert('ary is Array'); // aryがArrayの時に表示
}

try,cathc,finally構文もある

変数が未定義の場合、などのエラー検出が出来る。

try{
    alert(i);
} catch(e) {
    alert(e.message); // i is not definded
} finally {
    alert('finally'); // finally
}

上記例では、変数iが宣言されていないため、catch構文、finally構文が実行される。

Functionコンストラクタ経由で宣言する事で引数、関数本体を文字列として定義出来る。

関数の宣言をJavaScript組み込みのオブジェクトしてFunctionオブエジェクとが存在し、そのコンストラクタを利用して関数の定義が出来る。以下にコード例を示す。

var param = 'height, width';
var body = 'return height * width / 2;';
var function = new Function(param, body);

上記の記述法の利点として引数や関数本体を文字列で定義出来る。 上記により、例えば引数を変えたい場合、paramを変更し、関数の内容を変える場合にはbodyを変更すれば良い。

varを利用せず宣言された変数は全てグローバル変数扱い

ローカル変数のはずなのに何故かグローバル変数として参照されてしまっている場合には、この記述ミスを疑う。

関数で引数の数をチェックしない

function showName(name) {
    alert(name);
}

showName(); // undefined
showName('yamada'); // yamada
showName('yamada', 'kazuo'); // yamada

こんな感じで関数の引数と呼び出し元の引数の数が合わなくてもエラーとならない。関数の中でarguementsオブジェクトを使うと引数の数とかそれぞれの値が取得出来るので、柔軟な関数定義が出来る。

関数の引数,戻り値を関数で指定出来る。(高階関数)

タイトルの通り。 高階関数の引数として利用される関数がその場限りのみの利用の場合、匿名関数として利用するとコードがよりスマートとなる。

スコープチェーン

変数にどんな値が入っているか、というのは自分の階層から順番に上位の階層に向けて値が入っているかチェックしていくイメージ。

プロトタイプ

コンストラクタでメソッドを定義するとインスタンスの生成毎にメソッドを作成(メモリに確保)する。 上記より、メモリを多く利用してしまう。 この問題を解消する為に、メソッドを定義する場合にはprototypeプロパティを利用して宣言する方が余計なメモリを利用せずに良い。 以下にリテラル表現を利用してメソッドを定義した例を示す。

// class Car
var Car = function(name, company){
    this.name = name;
    this.company = company;
};

Car.prototype = {
    getInfo: function() {
        return 'Name = '+ this.name + ',Company = ' + this.company;
    }
};

var mycar1 = new Car('fit', 'honda');
alert(myCar1.getInfo());

静的メソッドの時、prototypeは利用出来ない。

タイトルの通り。宣言出来ない。 はまった。。。

[dropbox]dotcloudからdropboxAPIを利用してwordpressをバックアップしてみた[dotcloud]

このエントリーをはてなブックマークに追加 はてなブックマーク - [dropbox]dotcloudからdropboxAPIを利用してwordpressをバックアップしてみた[dotcloud]
Bloggerへの移行前のWordpressにて2013-03-31に投稿した記事です。

このBlogというかWordpressはdotcloudで動いているのですが、今までバックアップをとっておらず、それめっちゃ怖いと今更思い、定期的にバックアップをするようにしてみたのでその時のメモ。

概要

バックアップ対象としてはWordpressのDBwp-contentで、バックアップ先はdropboxになります。

バックアップ方法としてはDropboxAPIのPython版をdotcloudで動かせるようにしてcronで定期的にファイル送信するという感じです。

Dropboxへファイルを送信するする方法はdotcloudに特化している訳ではないので、それ以外のPasSや自分で管理しているサーバーでも出来るかも。

なお、dotcloudの場合、dbとWebサーバーが別インスタンスみたいなのでそれぞれに環境及びcronの設定を行いました。(一つの環境でできるやり方を知っている方いましたら教えて下さい。。。)

ちなみにプラグインがうまく動くようであれば、BackWPupとかが良い感じみたいです。(dotcloudだと上記プラグインうまく動きませんでした。。。。)

目次

  1. Dropbox Applicationの登録
  2. Python環境の準備
  3. DropboxAPIの設定、確認
  4. PUT用スクリプトの作成
  5. backup.shの作成
  6. cronの設定

1.Dropbox Applicationの登録

DropboxAPIを利用する為にアプリケーション登録を行います。
この情報は適当にググれば出てくるので省略します。

Access typeについはapp_folderにしました。(本エントリの確認も上記が前提です。)

下記サイトが参考になりました。
DROPBOX API(PYTHON)を使ってみる

2.Python環境の準備

Pythonが利用出来るようにvirtualenvを利用します。
dotcloudではPython自体は既にインストールされていましたが、モジュールをインストールする際に必要なsetuptoolsが無かったのでvirtualenvを利用しています。(virtualenvを利用するとsetuptoolsは一緒にインストール出来る)

dotcloudのwww,dbインスタンスの確認。
$dotcloud conncet <アプリケーション名>
$dotcloud info
=== wordpressapp
flavor:          sandbox
cost to date:    Free
+------+-------+------------+-----------------+
| name | type  | containers | reserved memory |
+------+-------+------------+-----------------+
| db   | mysql | 1          | N/A             |
| www  | php   | 1          | N/A             |
+------+-------+------------+-----------------+
wwwサーバーにログイン。
$dotcloud run www
DBサーバーにログイン。
$dotcloud run www
以降の処理は両サーバーで実行する。

ダウンロード、解凍
$wget https://pypi.python.org/packages/source/v/virtualenv/virtualenv-1.9.1.tar.gz
$tar -zxvf virtualenv-1.9.1.tar.gz
インストール、有効化
$cd virtualenv-1.9.1
$python virtualenv.py --distribute ENV
$source ENV/bin/activate

3.DropboxAPIの設定、確認

DropboxAPIのインストール及び、接続確認を行います。
基本的には公式のドキュメントDropbox Developerに書いてある通りに実行しました。

DropboxAPIのダウンロード、解凍
$wget https://www.dropbox.com/static/developers/dropbox-python-sdk-1.5.1.zip
$unzip dropbox-python-sdk-1.5.1.zip
DropboxAPIのインストール
$cd dropbox-python-sdk-1.5.1
$python setup.py install
Exampleコードを利用して接続確認を行います。
1.Dropbox Applicationの登録で登録したアプリケーションの情報でApp key,App secretが必要なので確認しておいて下さい。(webから確認できます。)

App key,App secretの編集
$cd example
$vi cli_client.py
cli_client.py
# XXX Fill in your consumer key and secret below
# You can find these at http://www.dropbox.com/developers/apps
APP_KEY = ''
APP_SECRET = ''
ACCESS_TYPE = 'app_folder'  # should be 'dropbox' or 'app_folder' as configured for your app
APP_KEY,APP_SECRETを入力して下さい。

また、Dropboxへのアプリ登録時にAccess typeをapp_folderじゃなく設定した場合にはACCESS_TYPEの変更が必要そうですがうまくいくかは未確認です。

適当にDropboxに送信するファイルを作成します。
$touch put.txt
サンプルコードの実行。
CLIでdropboxAPIが利用出来ます。
まずはログイン。
$python cli_client.py
Dropbox>login
url: https://www.dropbox.com/1/oauth/authorize?oauth_token=xxxxxxxxx
Please authorize in the browser. After you're done, press enter.
表示されたURLをブラウザで表示すると認証するかの確認画面になるのでAllowを選択。
その後、コンソールに戻ってenterを押します。
その後はDropboxAPIが使えます。(詳細はhelpを入力)

試しにファイルをputします。put後の名前はabc.txtとします。
Dropbox> ls
2013-03-31_04:00:01_UTC.data.tar.gz
2013-03-31_04:00:01_UTC.sql.gz

Dropbox> put put.txt abc.txt

Dropbox> ls
2013-03-31_04:00:01_UTC.data.tar.gz
2013-03-31_04:00:01_UTC.sql.gz
abc.txt
これでサーバーからファイルが送信出来る事が確認できました。

4.PUT用スクリプトの作成

下記参考にさせていただき、コードを少しだけ変えてシェルスクリプトから実行出来るようにします。
DROPBOX API(PYTHON)を使ってみる2
$cd dropbox-python-sdk-1.5.1/example/
$vi backup-wordpress.py
backup-wordpress.py
#!/usr/local/bin/python
# -*- coding: utf-8 -*-

import cmd
import locale
import os
import pprint
import shlex
import time

from dropbox import client, rest, session

# XXX Fill in your consumer key and secret below
# You can find these at http://www.dropbox.com/developers/apps
APP_KEY = ''
APP_SECRET = ''
ACCESS_TYPE = 'app_folder'  # should be 'dropbox' or 'app_folder' as configured for your app

def command(login_required=True):
    """a decorator for handling authentication and exceptions"""
    def decorate(f):
        def wrapper(self, *args):
            if login_required and not self.sess.is_linked():
                self.stdout.write("Please 'login' to execute this command\n")
                return

            try:
                return f(self, *args)
            except TypeError, e:
                #self.stdout.write(str(e) + '\n')
                print str(e)
            except rest.ErrorResponse, e:
                msg = e.user_error_msg or str(e)
                #self.stdout.write('Error: %s\n' % msg)
                print ('Error: %s' % msg)

        wrapper.__doc__ = f.__doc__
        return wrapper
    return decorate

class DropboxTerm():
    def __init__(self, app_key, app_secret):
        self.sess = StoredSession(app_key, app_secret, access_type=ACCESS_TYPE)
        self.api_client = client.DropboxClient(self.sess)
        self.current_path = ''

        self.sess.load_creds()

    def do_ls(self):
        """list files in current remote directory"""
        resp = self.api_client.metadata(self.current_path)

        if 'contents' in resp:
            for f in resp['contents']:
                name = os.path.basename(f['path'])
                encoding = locale.getdefaultlocale()[1]
                #self.stdout.write(('%s\n' % name).encode(encoding))
                print ('Filename=%s' % name).encode(encoding)
                #print ('FullFilename=%s' % f['path']).encode(encoding)

    @command()
    def do_cd(self, path):
        """change current working directory"""
        if path == "..":
            self.current_path = "/".join(self.current_path.split("/")[0:-1])
        else:
            self.current_path += "/" + path

    @command()
    def do_put(self, from_path, to_path):
        """
        Copy local file to Dropbox

        Examples:
        Dropbox> put ~/test.txt dropbox-copy-test.txt
        """
        from_file = open(os.path.expanduser(from_path), "rb")
        #from_file = open(from_path, "rb")

        self.api_client.put_file(self.current_path + "/" + to_path, from_file)

    @command()
    def do_rm(self, path):
        """delete a file or directory"""
        self.api_client.file_delete(self.current_path + "/" + path)

class StoredSession(session.DropboxSession):
    """a wrapper around DropboxSession that stores a token to a file on disk"""
    TOKEN_FILE = "token_store.txt"

    def load_creds(self):
        try:
            stored_creds = open(self.TOKEN_FILE).read()
            self.set_token(*stored_creds.split('|'))
            print "[loaded access token]"
        except IOError:
            pass # don't worry if it's not there

    def write_creds(self, token):
        f = open(self.TOKEN_FILE, 'w')
        f.write("|".join([token.key, token.secret]))
        f.close()

    def delete_creds(self):
        os.unlink(self.TOKEN_FILE)

    def link(self):
        request_token = self.obtain_request_token()
        url = self.build_authorize_url(request_token)
        print "url:", url
        print "Please authorize in the browser. After you're done, press enter."
        raw_input()

        self.obtain_access_token(request_token)
        self.write_creds(self.token)

    def unlink(self):
        self.delete_creds()
        session.DropboxSession.unlink(self)

def main(s):
    if APP_KEY == '' or APP_SECRET == '':
        exit("You need to set your APP_KEY and APP_SECRET!")
    term = DropboxTerm(APP_KEY, APP_SECRET)

    print(s);
    #term.do_rm(s[1])
    term.do_put(s[0],s[1])

if __name__ == '__main__':
    import sys
    args = sys.argv
    if len(args) > 1:
           s = args[1:]
    main(s)
引数を利用してファイルをputするようにしました。(といってもmain文をほんの少し変えただけですが。。。) ファイルをputする処理を実行する場合、以下のようにします。
$python backup-wordpress.py put.txt abc.txt

5.backup.shの作成

次に上記スクリプトを実行するシェルを作成します。
といってもdotcloudではバックアップ用のシェルスクリプトが用意されており、それを少しだけ変更すればOKです。

下記を参考にさせて頂きました。
DotCloudをDropboxへバックアップ 2

まずはdotcloudの公式サイトからバックアップ用のシェルをダウンロードしてきます。
$wget http://docs.dotcloud.com/_downloads/backup.sh
次に上記を変更します。
#!/bin/bash
# Syntax: 
# backup.sh <what> <how> <where> [whereexactly]
# <what> indicates what you want to backup: mysql, pgsql, riak, data.
# <how> indicates the backup method: ssh, ftp, s3.
# <where> is a <user[:password]@host>.
# [whereexactly] is an optional path on the <where> target, when applicable.
set -e
TAG="$HOSTNAME_$(TZ=UTC date +%Y-%m-%d_%H:%M:%S_UTC)"
source ~/virtualenv-1.9.1/ENV/bin/activate

: <<'#__COMMENT_OUT__'
[ "$3" ] || {
	echo "Please specify what to backup, how, and where."
	exit 1
}
#__COMMENT_OUT__


case "$1" in
	mysql)
		FILENAME="$TAG.sql.gz"
		FILEPATH="/tmp/$FILENAME"
		mysqldump --all-databases | gzip > "$FILEPATH"
		;;
	pgsql)
		FILENAME="$TAG.sql.gz"
		FILEPATH="/tmp/$FILENAME"
		pg_dumpall | gzip > "$FILEPATH"
		;;
	riak)
		FILENAME="$TAG.bitcask.tar.gz"
		FILEPATH="/tmp/$FILENAME"
		tar -czf "$FILEPATH" /var/lib/riak
		;;
	data)
		FILENAME="$TAG.data.tar.gz"
		FILEPATH="/tmp/$FILENAME"
		tar -C "$HOME" -czf "$FILEPATH" "data"
		;;
	*)
		echo "Sorry, I don't know how to backup $1."
		exit 1
		;;
esac

: <<'#__COMMENT_OUT__'
if [ "$4" ]
then
	DEST="$4/$FILENAME"
else
	DEST="$FILENAME"
fi
#__COMMENT_OUT__

case "$2" in
	ssh)
		scp -q -o BatchMode=yes "$FILEPATH" "$3:$DEST"
		;;
	ftp)
		curl -sST "$FILEPATH" "ftp://$3/$DEST"
		;;
	s3)
		s3cmd put "$FILEPATH" "s3://$3/$DEST"
		;;
	s3multi)
		split --numeric-suffixes --bytes=4G "$FILEPATH" "$FILEPATH".
		s3cmd put "$FILEPATH".?? "s3://$3/$DEST/"
		;;
	dropbox)
		cd ~/dropbox-python-sdk-1.5.1/example/
	        python backup-wordpress.py "$FILEPATH" "$FILENAME"
		;;
	*)
		echo "Sorry, transfer method $2 is not supported."
		exit 1
esac

SIZE="$(stat --printf %s "$FILEPATH")"
echo "Backup $TAG completed. Its (compressed) size is $SIZE bytes."
rm -f "$FILEPATH"
変更点は以下の通りです。
  • shをbashにした
  • source ~/virtualenv-1.9.1/ENV/bin/activateを利用してvirtualenvを使う。
  • 引数$3,$4は使わないのでコメントアウト(必須ではない)
  • 第2引数にdropboxと指定した場合、dropboxAPIを利用する用に設定
実行権限設定。
$chmod +x backup.sh
下記に利用方法について記載します。

1.MySQLのバックアップをdropboxへ送信する場合。
$./backup.sh mysql dropbox
2.wp-conentのバックアップをdropboxへ送信する場合。
$./backup.sh data dropbox

6.cronの設定

最後にcronの設定をします。といっても特別な事はしません。
必要に応じて時間は適当に変更して下さい。

DBインスタンス側。
$crontab -e
00 4 * * * ~/backup.sh mysql dropbox >> result.txt
wwwインスタンス側。
$crontab -e
00 4 * * * ~/backup.sh data dropbox >> result.txt

FuelPHP勉強会vol3に参加してきました

このエントリーをはてなブックマークに追加 はてなブックマーク - FuelPHP勉強会vol3に参加してきました
Bloggerへの移行前のWordpressにて2013-03-25に投稿した記事です。

FuelPHP勉強会vol3に参加してきました。

FuelPHPの勉強会への参加は初めてでした。
また、今回は思い切ってLTをしてみました。
以下のSlideshareがその時の資料になります。

 

発表は時間を結構オーバーしてしまったり、資料のページが長過ぎてかなり早口になってしまったのが反省点です。今後は気をつけよう。。。

メモは本当に個人用です。

メモ

[FuelPHP]FuelPHPのScaffoldで作成した画面をdotcloudにデプロイしてみた[dotcloud]

このエントリーをはてなブックマークに追加 はてなブックマーク - [FuelPHP]FuelPHPのScaffoldで作成した画面をdotcloudにデプロイしてみた[dotcloud]
Bloggerへの移行前のWordpressにて2013-01-12に投稿した記事です。

dotcloudにFuelPHPをデプロイした時のメモ。

前提

ローカル環境にはFuelPHPがインストールされている事。また、MySQLがインストールされている事。やり方が分からない人は以前のエントリ[FuelPHP]FuelPHPでMySQLに接続してScaffoldで画面作成した時のメモをご確認ください。

また、以下で確認を行いました。
  • FuelPHP1.5
  • MySQL
  • ローカル操作はMacOSX
  • dotcloudのCLIは0.9

目次

  1. ローカル環境でScaffold
  2. dotcloud利用の準備
  3. Welcomeページの表示
  4. Scaffoldで作成した画面の表示

1.ローカル環境でScaffold

以前のエントリでも実施しましたが、おさらいも兼ねて。

プロジェクトの作成をします。
$ cd ~/Site/
$ oil create blog
oilコマンドでScaffoldを実施します。
$ php oil g scaffold post title:varchar[255] summary:varchar[255] body:text
migrationを実行してDBにテーブルを作成します。
$ oil refine migrate 
この状態で「http://localhost/blog/public/post/」にアクセスします。するとScaffoldの画面が表示されるかと思います。

2.dotcloud利用の準備

dotcloudを利用する為にアカウント情報の登録とCLIのインストールを行って下さい。

dotcloud

CLI0.9のインストールをMacOSXで実施する際は以下の通りです。(Linux,Windowsの方法は公式Documentをご確認ください)
$ sudo easy_install pip && sudo pip install dotcloud
インストール実施後、以下のコマンドを実行し、dotcloudのログイン情報などを設定して下さい。
$ dotcloud setup

3.Welcomeページの表示

DB接続などが必要ないWelcome画面までをdotcloudで表示します。

まずは必要に応じてドキュメントファイルを削除します。(必須では有りません。)
$ cd ~/Site/blog/
$ rm *.md
$ rm -rf docs
次にdotcloudでアプリケーションを作成します。
下記例では「fuelphpapp」という名称のアプリケーションとしております。

アプリケーション名を別にした場合には以降の「fuelphpapp」としている箇所は自分の作成したアプリケーション名に置き換えて下さい。
$ dotcloud create fuelphpapp
アプリケーションが作成されたかを「dotcloud list」コマンドを利用してアプリケーション名一覧を取得して確認します。
$ dotcloud list
作成したアプリケーション名が表示されればOKです。

次にdotcloudにdeployする際に必須となる「dotcloud.yml」を新規に作成します。
このファイルにはどのサービスを利用するか、DocumentRootがどこかを指定します。
今回の場合、PHPを利用し、DBはMySQLを利用し、DocumentRootはpublicフォルダである事を記載します。
$ cd ~/Site/blog/
$ vi dotcloud.yml
www:
    type: php
    approot: public
db:
    type: mysql
最後にfuelphpappに接続し、ソースコードをpushします。
dotcloud connect fuelphpapp
dotcloud push
dotcloud pushコマンドが完了すると最後に本アプリケーションのアクセスURLが表示されるので、そのURLをブラウザで開きます。Welcome画面が表示されるかと思います。

URLについてはdotcloudのサイトにブラウザからアクセスしてログインを行っても確認出来ます。

4.Scaffoldで作成した画面の表示

dotcloudのWebサーバーはNginxのため、Nginxでrewriteルールを設定します。
nginx.confというファイルに設定を書く事でdotcloudで設定の読み込みを行ってくれます。
以下の通りファイルの新規作成を行います。

参考:FuelPHPをNginxで動かしてみる
$ vi public/nginx.conf
try_files $uri /index.php?$uri&$args;
次にMySQLにDB、ユーザー、テーブルを作成します。

利用しているサービスの内容を確認します。
$ dotcloud info
=== fuelphpapp
flavor:          sandbox
cost to date:    Free
+------+-------+------------+-----------------+
| name | type  | containers | reserved memory |
+------+-------+------------+-----------------+
| db   | mysql | 1          | N/A             |
| www  | php   | 1          | N/A             |
+------+-------+------------+-----------------+
DBの内容を確認します。
$ dotcloud info db
== db
type:            mysql
instances:       1
reserved memory: N/A
config:
  mysql_password:    *********
  mysql_masterslave: True
URLs:            N/A

=== db.0
datacenter:       Amazon-us-east-1c
service revision: mysql/1120eda9aa82 (latest revision)
ports:
  ssh:   ssh://mysql@fuelphpapp---------.azva.dotcloud.net:47618
  mysql: mysql://root
上記のようにDBの接続先やポート番号、rootパスワードなどが表示されます。
rootユーザーでDBに接続する場合は適宜メモを取って下さい。(本エントリではDBユーザーを新規に作成しております)

では、DBにリモートログインします。
$ dotcloud run db -- mysql
DBの作成と確認をします。
作成するDB名は「test_db」としています。
mysql>create database test_db default character set UTF8;
mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| test_db            |
+--------------------+
3 rows in set (0.00 sec)
次にユーザーを作成し、確認します。
作成するユーザー名は「test_db」としまいます。パスワードを記載する「******」の箇所は適宜変更して下さい。
mysql>GRANT ALL ON test_db.* TO 'dbuser'@'%' IDENTIFIED BY '******';
mysql> select host,user from mysql.user where user='dbuser';
+------+--------+
| host | user   |
+------+--------+
| %    | dbuser |
+------+--------+
1 row in set (0.00 sec)
最後にtableを作成し確認します。
mysql> use test_db
Database changed
mysql> CREATE TABLE posts
    -> (
    -> ID INT(11) NOT NULL AUTO_INCREMENT,
    -> TITLE VARCHAR(255) NOT NULL,
    -> SUMMARY VARCHAR(255) NOT NULL,
    -> BODY TEXT NOT NULL,
    -> CREATED_AT INT(11) NOT NULL,
    -> UPDATED_AT INT(11) NOT NULL,
    -> PRIMARY KEY (ID)
    -> );
Query OK, 0 rows affected (2.00 sec)

mysql> show tables;
+-------------------+
| Tables_in_test_db |
+-------------------+
| posts             |
+-------------------+
1 row in set (0.00 sec)
最後にDB接続情報を記載する「db.php」をdotcloudの情報に合わせます。
こちらはUbuntu 12.04 にて dotCloud の MySQL を試してみる (PHP編)を参考にさせて頂きました。

なお、パスワードの「*******」の箇所は適宜変更ください。
vi fuel/app/config/development/db.php
<?php
/**
 * The development database settings. These get merged with the global settings.
 */
$filepath = $_SERVER['HOME'].'/environment.json';
$env = json_decode(file_get_contents($filepath), true);
$host = $env['DOTCLOUD_DB_MYSQL_HOST'];
$port = $env['DOTCLOUD_DB_MYSQL_PORT'];
$dbname = 'test_db';
$dsn = 'mysql:host='.$host.';port='.$port.';dbname='.$dbname;

return array(
 'default' => array(
  'connection'  => array(
            'dsn'   => $dsn,
   'username'   => 'dbuser',
   'password'   => '*******',
            'persistent'  => false,
            'compress'  => false,
  ),
 ),
);
上記設定ファイル例では接続先情報についてはdotcloudの各種設定が記載された「environment.json」をパースし、$dsnとして設定しております。

ファイルを確認し、直接書く事も可能ですが、私はコピペミスをしてDBに接続出来ない!という事があったので、上記のようなファイルから値を取得し、反映させる方法が確実かと思います。

最後に再度ソースコードをpushします。
dotcloud push
「http://[hostname]/post/」というようにブラウザに入力するとScaffold画面が表示されるかと思います。
長い文章になってしまいました、お疲れ様でした。

なお、上記のままだとローカルのFuelPHPが動かなくなってしまうので、ローカルとdotcloudの環境を分けると良いかと思います。(localhostは\Fuel::DEVELOPMENT,dotcloudは\Fuel::PRODUCTIONなど。) 

[PHP]32bitマシンでPHPの日付を利用する場合の注意点

このエントリーをはてなブックマークに追加 はてなブックマーク - [PHP]32bitマシンでPHPの日付を利用する場合の注意点
修正に半日も使って面倒だったのでメモ。

32bitのPHPでUNIXタイムスタンプを利用するdate,mktime,strtotime関数を利用して2038年を超えるような日付を扱おうとすると桁あふれになってしまい、1970年1月1日として扱われてしまいます。(2038年問題)

その場合PHP5から利用可能なdate_create,date_format関数などを利用すれば桁あふれなく対応が可能です。日付の計算はdate_add,date_subが利用出来ます。また、Datetime同士での比較も可能です。
// 現在の日付を規定フォーマットで表示
$now = date_create('now');
echo date_format($now, 'Y-m-d H:i:s');

// 2000年1月20日の10日前の日付を取得
$date = new DateTime('2000-01-20');
$date-&gt;sub(new DateInterval('P10D'));

// 比較
if($now &gt; $date)
{
  //こちらに遷移
}

PHP知っている人からすると「こんな事も知らないのかよ」ってつっこみができそうですが。。。

[FirefoxOS]WebアプリをFirefoxMarketplaceにFirefoxOS用アプリとして登録した時のメモ

このエントリーをはてなブックマークに追加 はてなブックマーク - [FirefoxOS]WebアプリをFirefoxMarketplaceにFirefoxOS用アプリとして登録した時のメモ
Bloggerへの移行前のWordpressにて2013-03-01に投稿した記事です。

昨年度、jQueryMobileで簡単なWebアプリを作ってHerokuにデプロイしており、それをFirefoxOS用のアプリとして登録してみた時のメモ。
なお、申請まではできましたが、承認はされてないので間違ってる所もあるかもしれませんが、ご了承ください。

目次

  1. 2種類の申請方法について
  2. とりあえずFirefoxOSのエミュレーター入れる
  3. Firefox Marketplaceのログイン情報作成
  4. App Manifestファイルの作成
  5. App Manifestファイルの確認
  6. 申請
  7. 最後に

1.2種類の申請方法について

そもそもアプリの申請方法として大きく分けて2種類が有るようです。

1.Hosted
普通のWebアプリで、HTML,CSS,画像ファイルなどはサーバーに配置します。ただ、それ以外の準備としてアプリの情報を記載したApp Manifests(後述)の作成及びサーバーへの配置が必要です。また、128x128のアイコンも必須となります。なお、FirefoxOSのアプリとして配布する場合、上記Webアプリはモバイルに最適化されていないとアプリ審査時にrejectされてしまうような記述が有りました。
今回はこちらで申請をやってみました。

2.Packaged
こちらはWebアプリケーション(HTML,CSS,画像ファイルなど)をZIP化?してマーケットにアップするようです。詳細はやってないので、分かりませんがこちらもmanifestファイル、画像ファイルなどの作成は必要なようです。

2.とりあえずFirefoxOSのエミュレーター入れる

必須ではないですが、最終的にアプリ申請する際にモバイル用画面として開発されている事という記載も有り、一応FirefoxOSでの動きをみる為にエミュレーターをインストールする。
ただ、これはとても簡単でFirefoxのAdd-onとして追加すればOK。

こちらのサイトをFirefoxで表示し、各OSのボタンクリックでOK。
Add-Onでインストール後、「ツール」→「Web開発」→「Firefox OS Simulator」で以下の画面が表示される。(インストール後は自動でこの画面に遷移)
で左の「Simulator」を「Start」にすれば起動する。
これでブラウザを起動して自分のサイトがモバイル端末でも正しく動作するかを確認しておくと良いかと思います。

3.Firefox Marketplaceのログイン情報作成

こちらのサイトに遷移し、Mozila Personaのログイン情報を登録すればOK。メールアドレス、パスワードのみの入力でよかったはず。

4.App Manifestファイルの作成

詳細は以下に記載があります。

アプリマニフェスト

以下のようなファイルを作成し、拡張子は.webappとします。
{
  "name":"My App",
  "description": "My elevator pitch goes here",
  "launch_path": "/",
  "icons": {
    "128": "/img/icon-128.png"
  },
  "developer": {
    "name": "Your name or organization",
    "url": "http://your-homepage-here.org"
  },
  "default_locale": "en"
}
各要素の詳細は上記サイトをみて頂ければと思いますが、注意点としてはlaunch_pathです。

こちらに記載したパスがアプリ起動時に読み込まれるパスとなります。launch_pathに関する詳細はこちらにありますが、私の場合http://musi9festagram.herokuapp.com/というようにWebサーバーのルートにあるので、launch_pathは/としました。
http://hoge/mywebapp/等の場合、launch_pathは/webapp/とします。

また、iconsの128の箇所に指定したパスに128x128の画像もサーバーに配置する必要が有ります。

さらに追加で注意点があります。
本ファイルはContent-Typeをapplication/x-web-app-manifest+jsonとして返却する必要があります。Apacheなどの場合、.htaccessに追記してね、みたいな例が書いてありましたが、Herokuでのやり方がよく分からないし、面倒そうだったのでプログラム側で生成してContent-Typeを指定して返却させてみました。特にこれでも問題なさそうですが、静的ファイルの方が楽そうですね。

5.App Manifestファイルの確認

作成したManifestファイルをサーバーにアップロードしたら、ファイルの内容が正しいかをValidationツールを利用して確認します。

Validate an App
上記画面に遷移し、manifestファイルがあるURLを入力し、Validateボタンを押せば、チェック処理が実施されます。
問題なければエラーが無い旨が表示されますし、NGの場合にはその理由が表示されます。(アイコン画像がない、Content-Typeが正しくないなど詳細に表示されます)

ここが通らないと申請もできないようなので、ここで事前にチェックしましょう!

6.申請

最後に申請です。

Submit an App
上記を画面を表示し、Device TypeではFirefox OSを選択し、画面下部ではmanifestファイルのURLを指定します。

その後、画面キャプチャやらアプリ名やら入力します。
本当はそのサイトの画像も貼りたかったのですが、manifestファイルが重複してるよってエラーが出たので駄目でした。。。そりゃそうなのですが。
まあ、ここはそこまではまるような入力項目は無かったかと思います。

上記が終わって少し立つとレビュー中となりました。(This app is awaiting review)
どうやら申請が終わると予め登録したメールに何かしら連絡が来るようです。申請して丸一に経過したけどいつ終わるのかしら。

7.最後に

まだ申請完了してないので何とも言えませんが、既にモバイル用のサイトが有れば申請はそれほど大変ではないかと思います。manifestファイルを返却するときにContent-Typeが決まってるってのがちょっと面倒ですが、それ以外はわりとさくっとできます。
各ドキュメントが日本語でもあったり、validationツールなど揃っているのが素敵です。

とりあえず承認待ってみます!

5月27日追記
完全に更新するの忘れてましたが、申請して2、3週間程度で承認されました。(厳密には申請チェックから漏れていた?らしく連絡がないのでTwitterで連絡して催促しました)

musi9festagram

まあ、で?というアプリでは有りますが、一通りリリースまで出来たのは良い経験になったかなーと。

[FuelPHP]設定ファイルの使い方

このエントリーをはてなブックマークに追加 はてなブックマーク - [FuelPHP]設定ファイルの使い方
Bloggerへの移行前のWordpressにて2013-02-19に投稿した記事です。

DBヘの接続情報だとかFuelPHPを使う上で必要なファイルはapp/config/config.phpというファイルがあるのですが、プロジェクトでオリジナルの設定が必要な場合が有ると思います。例えば
  • 画面の一部の文言
  • ファイルのパス
  • 外部API取得先のURL及びID、パスワワード
というものが挙げられると思います。(実際私の場合はこんな感じでした)

上記についてFuelPHPではConfigクラスがあり、こちらを利用することで簡単に対応ができます。

ファイル形式

公式のドキュメントを見ると1.5現在では以下の種類のファイルが利用出来ます。
  • PHPのarray形式(.php)
<?php

return  array(
'api' => array(
 'url' => 'http://hoge.com',
 'id' => 'id',
 'password' => 'pass'
 ),
);
  • ini形式(.ini)
  • [api]
    url = 'http://hoge.com'
    id = 'id'
    password = 'pass'
    
  • YAML形式(.yml)
  • api:
     url: http://hoge.com
     id: id
     password: pass
    
  • JSON形式(.json)
  • {
    "api" :
        {
            "url": "http://hoge.com",
            "id": "id",
            "password": "pass"
        }
    }
    
    私の場合、開発者以外の人も扱う可能性があったのでini形式で利用しました。個人的にはPHPのarray形式が一番しっくりきそうな気がします。
    

    読み込み方

    こちらのサイトを参考にさせて頂きました。
    大きく分けて手動でやる方法と自動でやる方法があります。自動でやる場合、予め設定ファイルにどのファイルを読み込むかを設定しておきます。
    
    hoge.iniという設定ファイルを自動で読み込む場合、app/config/config.phpに以下のように追記を行います。なお、下記例の場合にはhoge.iniはapp/config配下に配置します。
    
    return array(
    'always_load'  => array(
     
      'packages'  => array(
          'orm',
          'auth',
      ),
     'config' => array(
      'hoge.ini' => null,
     ),
    ),
    
    2つの設定ファイルを読み込む場合、configのarrayに追加すればOKです。 手動で読み込む場合にはConfig::load('hoge.ini')というように明示的に読み込むファイルを指定します。

    プログラム内での利用の仕方

    今回の例の場合、以下のように利用可能です。
    
    $url = Config::get('api.url')
    
    これで取得出来ます。
    また、仮に値が取得出来なかった場合(指定行がコメントアウトされていたなど)のデフォルト値の設定も可能です。
    
    $url = Config::get('api.url','http://fuga.com')
    
    最初に例で示したファイルであれば上記の方式で取得が可能である事を確認しました。
    
    Configクラスは他にもset,deleteメソッドなどもあるのでPHPUnitで試験をする際に使うと便利そうですね!
    

    [FuelPHP]MacOSXでFuelPHP環境構築してDB接続設定後、Scaffoldで画面作成した時のメモ

    このエントリーをはてなブックマークに追加 はてなブックマーク - [FuelPHP]MacOSXでFuelPHP環境構築してDB接続設定後、Scaffoldで画面作成した時のメモ
    Bloggerへの移行前のWordpressにて2013-01-12に投稿した記事です。
    
    前回のエントリではMac環境でFuelPHPでWelocme画面を表示するまでの説明を記載しました。
    今回は前回の続きでScaffoldを利用して自動で画面を作成します。
    

    目標

    Scaffoldを利用して画面が作成出来る事。
    
    Scaffoldにより、DBのテーブルに対応した一覧表示、新規登録、編集、詳細情報表示、削除に対応した画面及び機能を自動で作成します。
    

    ソフトウェア構成

    • Mac OSX 10.8.2
    • [前回のエントリでインストール済み]FuelPHP 1.4
    • [前回のエントリで設定済み]Apache
    • [前回のエントリで設定済み]PHP 5.3.15
    • Pear(インストーラーを利用)
    • MySQL(homebrewによるインストール)

    目次

    1. MySQLのインスール、DB作成、ユーザー作成、テーブル作成
    2. Pearのインストール
    3. pdo_mysqlの設定変更
    4. FuelPHPのDB接続設定
    5. Scaffoldの実施と設定変更

    1.MySQLのインスール、DB作成、ユーザー作成、テーブル作成

    FuelPHPに接続するDBにはMySQLを利用します。PostgreSQLでの接続も可能ですが、Scaffoldをやってみると削除処理が失敗するなどの事象が発生したので、基本はMySQLで利用するのが良いと思われます。
    

    1-1.MySQLのインストール

    MySQLはhomebrewを利用してインストールします。
    
    $brew install mysql
    
    基本的にはこちらのサイト(HomebrewでMySQLをインストールする時に知っておきたいこと)を参考に実施しました。
    
    また、上記のサイトにある以下を実施しました。
    
    • データベースとユーザーの設定
    • 起動スクリプトの設定
    上記実施により、MySQLのrootユーザーが出来たと思うので、そのユーザーを利用して以下を実施します。
    
    • DBの作成
    • DB操作のユーザー作成
    • 試験用のテーブル作成

    1-2.DBの作成

    MySQLへのログインし、DBの作成を行います。
    下記例ではDB名をtest_dbとしていますが、適宜必要に応じて変更して下さい。
    
    $mysql -u root -p
    Enter password:(設定したrootのパスワードを入力)
    mysql>CREATE DATABASE test_db DEFAULT CHARACTER SET utf8;
    mysql> show databases;
    +--------------------+
    | Database           |
    +--------------------+
    | information_schema |
    | mysql              |
    | performance_schema |
    | test               |
    | test_db            |
    +--------------------+
    5 rows in set (0.01 sec)
    
    1行目ではrootユーザーでパスワード認証を利用し、MySQLにログインします。
    2行目でtest_dbというDB名を文字コードをUTF-8として作成します。
    3行目で先ほど作成したDBが登録されているかをshow databasesコマンドを利用して確認します。正常に登録が出来た場合、test_dbが存在する事が確認出来ます。
    

    1-3.DB操作のユーザー作成

    次にFuelPHPからMySQLへ接続する際のユーザーを個別に作成します。
    以降のコマンドは既にrootユーザーでMySQLへ接続した状態とします。
    なお、下記例ではユーザー名「dbuser」、パスワードを「dbpass」として作成しますので、必要に応じて適宜変更下さい。
    
    mysql>grant ALL PRIVILEGES on test_db.* to dbuser@'localhost' IDENTIFIED BY 'dbpass' with grant option;
    mysql> SELECT host,user FROM mysql.user where user='dbuser';
    +-----------+--------+
    | host      | user   |
    +-----------+--------+
    | localhost | dbuser |
    +-----------+--------+
    1 row in set (0.00 sec)
    mysql>exit
    $mysql -u dbuser -p
    Enter password:(設定したdbuserのパスワードを入力)
    mysql> show databases;
    +--------------------+
    | Database           |
    +--------------------+
    | information_schema |
    | test               |
    | test_db            |
    +--------------------+
    3 rows in set (0.01 sec)
    
    1行目ではtest_dbに対して全ての権限(select、insert,deleteなど)を付与したユーザーを作成します。
    なお、上記ユーザーはlocalhostからの接続のみ可能となっているため、FuelPHPが動作するWebサーバーとMySQLのサーバーが別となる場合には別途設定が必要です。
    2行目ではSQLを発行し、ユーザーが登録されたか確認します。where user='dbuser'を削除すると全てのユーザーが表示されます。
    3行目以降では一度rootユーザーでログアウトを行い、作成したユーザーでMySQLでのログインを実施します。最後にshow databasesコマンドでtest_dbが表示される事を確認します。
    

    1-4.試験用のテーブル作成

    最後に試験用のテーブルを作成します。
    
    mysql -u dbuser -p test_db
    Enter password:(設定したdbuserのパスワードを入力)
    mysql> 
    CREATE TABLE POSTS
    (
     ID INT(11) NOT NULL AUTO_INCREMENT,
     TITLE VARCHAR(255) NOT NULL,
     SUMMARY VARCHAR(255) NOT NULL,
     BODY TEXT NOT NULL,
     CREATED_AT INT(11) NOT NULL,
     UPDATED_AT INT(11) NOT NULL,
     PRIMARY KEY (ID)
    );
    mysql> show tables;
    +-------------------+
    | Tables_in_test_db |
    +-------------------+
    | posts             |
    +-------------------+
    1 row in set (0.00 sec)
    
    1行目ではDB名test_dbを利用することとして、ログインします。ログイン時にDBを指定しなかった場合、use (DB名)と入力する事でDBの切り替えが可能です。
    2行目では試験用のテーブルを作成します。なお、Scaffoldを利用する場合id,created_at,updated_atカラムは必須となります。
    3行目ではshow tablesコマンドでテーブルの作成を確認します。
    

    2.Pearのインストール

    oilコマンドを利用してScaffoldを利用する際にPearを利用したため、インストールを行います。(Macでも必要かの確認は行っていませんが、winでは必要だった為、インストールしています。)
    
    こちらのサイト(Mac OS X LionでPEARをインストールする方法)を参考にインストールさせて頂きました。
    
    詳細については割愛しますが、特にはまることはないかと思います。
    

    3.pdo_mysqlの設定変更

    php.iniでMySQLへの接続時に利用するsocketファイルの記述がありますが、デフォルトの設定とhomebrewでインストールした時に配置されるファイルの位置が違うため、変更します。
    
    私の場合、private/tmp/mysql.sockに存在しましたが、以下のようなコマンドでどこに存在するか確認出来るかと思います。
    
    $sudo find / -name mysql.sock
    
    上記で確認後、php.iniを変更。
    
    $sudo vi /etc/php.ini
    
    ;pdo_mysql.default_socket=/var/mysql/mysql.sock
    →pdo_mysql.default_socket=/private/tmp/mysql.sock
    

    4.FuelPHPのDB接続設定

    FuelPHPからMySQLへ接続する為の設定を行います。
    (以前のエントリ通り、~/Site/配下にblogというプロジェクトを作成した想定。)
    
    $vi ~/Sites/blog/fuel/app/config/development/db.php
    
    return array(
        'default' => array(
            'connection'  => array(
                'dsn'        => 'mysql:host=localhost;dbname=test_db',
                'username'   => 'dbuser',
                'password'   => 'dbpass',
            ),      
        ),      
    );
    

    5.Scaffoldの実施と設定変更

    ScaffoldではORMを利用する為、config.phpを変更してORMを有効化します。
    
    $vi ~/Sites/blog/fuel/app/config/config.php
    
    return array(
    'always_load'  => array(
     
                    'packages'  => array(
                        'orm',
                    ),  
    ),
    
    );
    
    準備が整ったので、いよいよScaffoldを利用します。
    以下のようにテーブルのカラム名、型を記載する事で自動でModel,View,Controllerを生成します。
    
    $cd ~/Sites/blog/
    $php oil g scaffold post title:varchar[255] summary:varchar[255] body:text
    
    上記を実施後、以下のURLでブラウザにアクセスします。
    
    http://localhost/blog/public/post/
    
    上記により、一覧画面が表示されます。
    
    一覧画面
    
    追加画面
    詳細表示画面
    編集画面
    ページング機能などは無いため、必要な場合には別途Paginationクラスを利用して作成します。
    
    とりあえず以上になります。
    お疲れ様でした! 
    

    [FuelPHP]MacOSXでFuelPHP環境構築してWelcomeページまで表示した時のメモ

    このエントリーをはてなブックマークに追加 はてなブックマーク - [FuelPHP]MacOSXでFuelPHP環境構築してWelcomeページまで表示した時のメモ
    Bloggerへの移行前のWordpressにて2013-01-11に投稿した記事です。
    
    FuelPHPをMacで利用出来るようにした際のメモ。
    

    目標

    以下のようなWelocmeページが表示出来ること。(Apache、PHPの設定)
    
    また、以下のようにScaffoldを利用した画面が表示出来る事。(MySQLの設定)
    
    ただし、疲れたのでとりあえずはWelcomeページまでの表示について本エントリでは記載します。(DB接続、Scaffoldの話は次のエントリを予定)
    

    ソフトウェア構成

    • Mac OSX 10.8.2
    • FuelPHP 1.4
    • Apache(デフォルトインストールされているものを利用)
    • PHP 5.3.15(デフォルトインストールされているものを利用。FuelPHPは5.3以上が必須。)
    • [今回未記載]Pear(インストーラーを利用)
    • [今回未記載]MySQL(homebrewによるインストール)

    目次

    • 1.PHPの確認
    • 2.Apacheの設定
    • 3.php.iniの変更
    • 4.FuelPHPのインストール

    1.PHPの確認

    PHPがインストールされている事を確認します。
    また、FuelPHPはPHP5.3以上の必要があり、それも合わせて確認します。
    
    $php --version
    
    これでバージョンが表示されます。バージョンが5.3以上であればOKですが、違う場合には別途PHPをインストールする必要があります。
    

    2.Apacheの設定

    Apacheは既にインストール済みとなっているため、これを利用します。別途Apacheをインストールした場合には、パスなどは適宜環境に応じて置き換えて設定して下さい。
    
    httpd.confを編集しますが、編集ミスとなったときに復旧出来るように予めコピーしておきます。
    
    $sudo cp /etc/apache2/httpd.conf /etc/apache2/httpd.conf.old
    
    httpd.confでは以下の設定を行います。
    
    • PHPの有効化
    • DocumentRootの変更("/Users/(ユーザー名)/Sites/"に変更する)
    • mod_rewriteの有効化(やっとかないとindex.phpをURLに付けなければいけなかったり色々面倒)
    最初にモジュールにmod_rewriteがあるか確認します。
    
    $httpd -M
    
    mod_rewrieがあれば早速編集します。
    $sudo vi /etc/apache2/httpd.conf
    
    #mod_rewriteの有効化を確認。自分の環境ではデフォルトで有効化されていた
    LoadModule rewrite_module libexec/apache2/mod_rewrite.so
    
    #PHPの有効化
    #LoadModule php5_module libexec/apache2/libphp5.so
    →LoadModule php5_module libexec/apache2/libphp5.so
    
    #DocumentRootの変更(toshihiro308の部分はユーザー名のため、適宜環境に合わせる)
    #DocumentRoot "/Library/WebServer/Documents" 
    →DocumentRoot "/Users/toshihiro308/Sites/"
     
    #.htaccessの有効化
    #AllowOverride None
    →AllowOverride All
    
    ユーザー名.confも同じく編集。
    $vi /private/etc/apache2/users/toshihiro308.conf
    
    #AllowOverride None
    →AllowOverride All 
    
    Apacheの再起動
    $sudo apachectl stop
    $sudo apachectl start
    
    これで準備OKのはずです。 まずはPHPの有効化を確認します。 設定したDocumentRoot配下に以下のファイルを配置します。
    $ vi ~/Sites/test.php
    
    <?php
    phpinfo();
    ?>
    
    以下のURLにブラウザでアクセスします。
    http://localhost/test.php
    
    PHPのバージョン情報などが表示されればOKです。
    
    次にmod_rewriteが有効になっているか確認します。
    こちらのサイト(mod_rewrite を使いこなす (初級) – part2)に確認用のPHPが記載されているので、これを利用して確認します。
    また、NGとなる場合にはこちらのサイト(ZendFramework奮闘記Vol.1【mod_rewriteに泣く】)も読んでいただけると解決するかと思います。
    

    3.php.iniの変更

    FuelPHPでlogを記載する際にtimezoneを利用するようですが、デフォルトだとコメントアウト状態になっていおり、この状態だとエラーとなるため変更をします。
    
    $sudo vi /etc/php.ini
    
    ; http://php.net/date.timezone
    →date.timezone ="Asia/Tokyo"
    

    4.FuelPHPのインストール

    FuelPHPのインストールを実施します。
    インストールの方法としてcurlを利用する方法(MacもしくはLinux)と直接本体をダウンロードする方法がありますが、今回はcurlを利用して実施します。
    
    公式ドキュメント通りに以下を実施。
    
    $ curl get.fuelphp.com/oil | sh
    $ cd ~/Sites/
    $ oil create blog
    
    1行目のコマンドでFuelPHPインストールします。2,3行目で先ほど設定したDcoumentRoot配下にblogというプロジェクトを作成しています。
    
    このあと以下にアクセスすればWelcomeページがみれるはずです。
    http://localhost/blog/public/
    
    なお、デフォルトでblog/publicフォルダ配下には.htaccessが存在する事が確認でき、上記でURLでのアクセスが可能になるはずです。
    次のエントリでは、FuelPHPでDB接続を行い、scaffoldで出力した画面まで表示する方法を記載します。多分。。
    

    2013年4月28日日曜日

    [grails]BuildConfig.groovyに指定可能なプロパティの動作を確認してみた

    このエントリーをはてなブックマークに追加 はてなブックマーク - [grails]BuildConfig.groovyに指定可能なプロパティの動作を確認してみた
    Bloggerへの移行前のWordpressにて2012-12-29に投稿した記事です。
    
    仕事の一貫でGrailsの18.Deploymentを和訳する作業があったが、BuildConfig.groovyに記述できる3つのプロパティの説明がどうしても英文だけだと理解しづらい所があったため、それぞれ実際の挙動を確認したので、そのメモ。
    

    検証する際の条件

    2 Getting Startedにならい、Helloworldアプリケーションを作成。なお、以降では Helloworldアプリケーションが存在するディレクトリは$HELLO_WORLD_DIRとする。
    $HELLO_WORLD_DIR/grails-app/conf/BuildConfig.groovyに各オプションを指定し、
    grails war
    コマンドを実行。warは作成後、解凍して中身を確認する。Grailsのバージョンは2.1.1

    調査したプロパティ

    18.Deploymentのドキュメントに記載例のあった以下の3つの挙動を確認。
    1. grails.war.dependencies
    2. grails.war.copyToWebApp
    3. grails.war.resources

    1.grails.war.dependencies

    1-1.プロパティの概要

    warファイルに含めるライブラリ(jar)を指定出来る。

    1-2.プロパティを指定しない場合の挙動

    Grails自身が動作する為に必要なライブラリがwarファイル解凍後のWEB-INF/lib配下に配置されている。具体的にはHibernateSpringLog4jなどなど。

    1-3.プロパティを指定した場合の挙動

    BuildConfig.groovyに以下を追加。
        def deps = [ 
          "groovy-all-*.jar"
        ]   
      
        grails.war.dependencies = { 
            fileset(dir: "libs") {
               for (pattern in deps) {
                  include(name: pattern)
               }   
            }   
        } 
    
    また、上記の場合、$HELLO_WORLD_DIR/libsというディレクトリを作成し、「groovy-all-1.8.8.jar」を配置する。
    
    上記設定後、コマンドを実行するとWARファイル解凍後のWEB-INF/lib配下にはgroovy-all-1.8.8.jarのみがある。
    
    つまり、Grailsに必要なライブラリすらないので、tomcatなどに配置しても動かないと思われる。このオプションを使う場合、最低でもGrailsに必要なライブラリはdef depsで指定する必要がある。
    
    このプロパティはGrailsに必要なデフォルトでインクルードされるライブラリとアプリケーション個別でインクルードしたいライブラリの競合を避けると原文にも書いてある為、このような挙動だと考えられる。
    
    なお、原文ではGrailsに最低限必要なライブラリ郡は「$GRAILS_HOME/dependencies.txt」を見ると良いよって書いてあるが、ここに書いてあるものと本当にインクルードするjarのバージョンが違ったりするので、あまり当てにならない。。。(Grails2.2.0ではdependencies.txtは見当たらない。。)
    

    2.grails.war.copyToWebApp

    2-1.プロパティの概要

    $HELLO_WORLD_DIR/web-app配下のどのファイルをwarに含めるかを指定する。
    

    2-2.プロパティを指定しない場合の挙動

    特に指定がない場合には$HELLO_WORLD_DIR/web-app配下のファイルは全てWARに含まれる。
    
    Helloworldアプリケーションでwarファイルを作成した場合、以下のフォルダが存在する。
    
    • META-INF
    • WEB-INF
    • css
    • images
    • js
    • plugins
    なお、仮にweb-app配下に独自で作成したディレクトリを配置した場合にはそのディレクトリもwarには含まれる。例えばweb-app配下にcontentディレクトリを配置した場合、作成されるwarにはcontentディレクトリも存在する。
    

    2-3.プロパティを指定した場合の挙動

    BuildConfig.groovyに以下を追加。
       grails.war.copyToWebApp = { args ->
           fileset(dir:"web-app") {
              include(name: "js/**")
              include(name: "WEB-INF/**")
           }     
        }
    
    とした場合には以下のディレクトリが存在するようになる。
    • META-INF
    • WEB-INF
    • js
    • plugins
    つまり、META-INF及びpluginsは特に指定を行わなくても必ずディレクトリが存在し、それ以外はcopyToWebAppで指定したファイルのみが含まれるような挙動となる。
    
    使い方としては、例えば試験サーバーには試験用のコンテンツがweb-app配下に存在するがwar作成時には含めたくない、等の場合に利用すると便利だと思われる。
    

    3.grails.war.resources

    3-1.プロパティの概要

    warファイル作成前に実施したい処理を記述出来る。例えば、開発時には必要ないファイルだが、商用の時には必要なファイルを配置する、など。

    3-2.プロパティを指定しない場合の挙動

    特に何もしない。概要をみれば、そりゃそうだ、という所である。

    3-3.プロパティを指定した場合の挙動

    BuildConfig.groovyに以下を追加。
        grails.war.resources = { warLocation ->
            copy(todir:"$warLocation/WEB-INF") {
                    fileset(dir:"my/config/", includes:"*.xml")
            }          
        }
    
    これでwarを作成すると$HELLO_WORLD_DIR/my/config/配下に配置した*.xmlという名称のファイルがWEB-INF/配下に配置されている。

    教育訓練給付制度を実際に利用してみて

    このエントリーをはてなブックマークに追加 はてなブックマーク - 教育訓練給付制度を実際に利用してみて
    Bloggerへの移行前のWordpressにて2012-12-17に投稿した記事です。
    
    今年の始めから教育訓練給付制度を利用して勉強をしており、無事給付対象者となれたので、せっかくだしメモ。てか、僕こんな制度知らなかったし!
    

    -そもそも「教育訓練給付制度」って何よ?

    厚生労働省のサイトを見るとこんな感じで書いてあります。
    
    労働者や離職者が、自ら費用を負担して、厚生労働大臣が指定する教育訓練講座を受講し修了した場合、本人がその教育訓練施設に支払った経費の一部を支給する雇用保険の給付制度です。
    は、はあ。要は習い事とかで勉強する時の学費の一部を支給するよ。しっかり勉強すればね。ってことですな。
    

    -給付を受ける事が出来る人は?

    初めて利用するか、以前利用した事があるかで条件が違います。以下、ユーキャンのサイトから抜粋。
    
    • 初めて利用する人は受講開始日の時点で、雇用保険の一般被保険者であった期間が通算1年以上の場合。
    • 以前、利用した事が有る人は前回の利用から、受講開始日に雇用保険の一般被保険者であった期間が、通算3年以上の場合。
    上記の通りなので、雇用保険を払っていれば企業に勤め始めて2年目からは利用出来ます。で、1回利用したらその後3年は給付が受けれないので、何か勉強したい事がある人は社会人2年目にさっさと利用した方が良いかと。
    
    ちなみ離職者の人でも辞めてから1年以内の場合も対象となるみたいです。
    
    残念ながら、自営業、公務員、無職、66歳以上の方等は対象じゃないみたいっす。
    

    -給付額はいくら?

    学費の20%が一律で戻ってきます。10万円が最大支給額で、最低給付額が4000円。10万円貰おうと思ったら50万円の学費。なお、教材とかがある場合それは対象外みたいです。まあ、詳しい事は学習対象の塾とかに聞いた方が確実。
    

    -学費は払えば必ず支給される?

    NO。例えば僕の場合は、レッスンの欠席率がを全体の一定割合を超えるとNGで、さらに最終的にレベルチェックテストがあってそれに受からないと給付されない条件でした。この条件は受講する内容によって変わってくるかと思います。最終的にハローワークに給付の申請をする時に「終了証書」を出さなければいけないみたいなのですが、途中で辞めちゃったりするときっと塾とかから証明書が貰えないのだと思います。
    
    あと、終わった後、給付の申請自体はハローワークに自分でやりに行かないといけない。忘れてた!だと給付されません。
    

    -つーか、そもそもどんなのが対象の勉強なの?

    以下からだいたい検索できるみたいです。
    講座を探したい 検索システム
    
    結構いっぱいありますね。まあ、どっちかというと勉強したい事があって、たまたま教育訓練給付制度のコースがあったというパターンだと思いますが。
    
    よくTVとかでやってる通信制の勉強とかでも対象みたいっすね。ちなみに僕はやった事ないです。
    

    -やってみてどうやったか?

    僕の場合も丁度勉強したい事があって、そこにたまたま給付金のコースがあったのでラッキーって感じに始めたのだけど、最終的に給付される為にはテストに受からないといけなかったので結構ヒヤヒヤもんでした。でも、社会人で学びたい事がある人は知っておいて損は無い制度だし、せっかくだったら利用すべきかと。
    
    あと教育訓練給付制度の詳細は以下の生涯学習のユーキャンのHPが分かりやすかったです。
    
    教育訓練給付制度【厚生労働省実施】
    

    [WebSocket]Node.js+socket.ioでWebSocketアプリ作成してみた

    このエントリーをはてなブックマークに追加 はてなブックマーク - [WebSocket]Node.js+socket.ioでWebSocketアプリ作成してみた
    Bloggerへの移行前のWordpressにて2012-11-17に投稿した記事です。
    
    WEB+DB PRESSに特集が組まれていて、面白そうだったので、WebSocketで簡易チャットWebアプリを作ってみました。
    最初はWEB+DB PRESSのソースを動かしてみて、その後、理解する為に自分でjsファイル郡をリファクタリングして、機能を追加してみました。
    

    構成

    • Node.js(v0.8.9)
    • express(v3.0.3)
    • socket.io(v0.9.11)
    • jQuery(v1.7.2)

    デモサイト

    Herokuはwebsocketが対応していないという記述を見たので、今回はdotclooud上で動作させてます。
    
    簡易チャットアプリ
    
    ブラウザで上記リンクを叩くと、POPUPダイアログが表示され、ニックネームを入力要求する旨が表示されます。(IEでPOPUP制御しているとNGの場合有りのようです。)
    その後は、テキストボックス記載した内容は現在、上記サイトを開いている全員に即時共有されます。に文字を入力してenterもしくはupdateをクリックすれば記載内容が表示されます。(一人で確認する際は、ブラウザで複数のタブを起動してみると分かります)まあ、なので試す時は適当な発言がオススメです。笑
    あと、特にログなどはとってません。
    
    また、以下にdotcloud上でNode.jsを動かす時のメモを記載しておきます。
    
    • dotcloud.yml以外にsupervisord.confも必要。
    • package.jsonを書いておけば、node_modulesはpushしなくてOK。(deployタイミングでdotcloud内部でnpm installコマンドを実行するよう。)
    • portは8080に変更
    • defaultで動作するNode.jsはv0.4.xらしい。それ以外のバージョンで動作させる時にはdotcloud.ymlに利用したいバージョンを記載する。対応しているバージョン及び詳細はこちら

    GitHub

    ソースコードはいつも通りGitHubへ。
    GitHub-websocket-test
    

    感想

    Node.jsは初めてだったので、rubyの時と同様に環境構築に少し時間が掛かりました。Node.jsのバージョン管理が出来るnvmは絶対入れた方が良いですね。
    
    しかし、こんだけ少ないコードでチャットっぽいのが実現出来るってのはすごいなと。(だいたい合計100行ぐらい)
    認証機能とかroom機能ぐらい追加したら結構良い感じになるかも。
    
    それにしてもJavaScriptCSS辺りは得意ではないのでもっと勉強しないといけませんね。JavaScriptはそれなりに学習出来たらTaitaniumで何か作ってみると面白そう。
    

    参考サイト

    サイトではないですが、今月号のWEB+DB PRESSはかなり参考にさせて頂きました!あざす!
    
    nvmでsudo npm install -g から卒業する
    
    ここを参考にnvmの設定してみました。バージョン依存とか結構あるみたいなので、nvmはマジで入れておきたい。
    
    Socket IO
    
    今回WebSocketを利用する為に使用したパッケージの公式。
    sampleのソースコードがあって参考になりました。
    
    [JQuery]関数の作成・定義
    
    jQueryの使い方があまり分からず、共通関数は上記を参考に書いてみました。
    ちなみに以下のような感じ。
    
      // send message
      $('input#update').on('click', function(e) {
          jQuery().message();
      }); 
      
      // push enter
      $('input#message').keypress(function (e) {
        if(e.which == 13){
          jQuery().message();
        }
      });
    
      // util
      jQuery.extend(jQuery.fn, {
        message: function() {
          var message = $message.val();
          if (message.length === 0) return;
          socket.emit('post', message);
          // clear message text
          $message.val('');
        }
      });
    

    [Tizen]MacBookAirのVirtualBoxにUbuntuを入れてTizenの開発環境を構築した時の手順メモ

    このエントリーをはてなブックマークに追加 はてなブックマーク - [Tizen]MacBookAirのVirtualBoxにUbuntuを入れてTizenの開発環境を構築した時の手順メモ
    Bloggerへの移行前のWordpressにて2012-11-07に投稿した記事です。

    今後もしかするとTizen(詳細はこちら)を利用する事があるかもしれなかった為、自分のMacBookAirに開発環境を構築してみました。といっても、SDKがWindows版Ubuntu版しかなかった為、仮想環境のVirutualBox上にUbuntuを載せて、そこに構築しました。

    構成


    ハードウェア、ソフトウェアの構成は以下の通り。
    • MacBookAir 11-inchi MacOS X Mountain Lion(CPU:Intel Core 2 Duo 1.4GHz、Memory:4GB)
    • VirtualBox v4.2.4
    • Ubuntu 12.10-desktop(32bit)
    • Tizen SDK 2.0 Alpha

    作業の流れ


    以下の感じです。
    1. VirtualBoxのダウンロード、インストール
    2. Ubuntuのisoイメージダウンロード
    3. VirtualBoxでUbuntuの環境を作成
    4. TizenのSDKダウンロード及び、インストール
    5. IDEの起動
    6. Tizenエミュレーターの起動
    7. Tizenエミュレーターでのサンプルアプリ起動
    上記の通り、ダウンロード作業があるのでなるべく通信環境は良い場所で作業した方が良いです。また、Ubuntuなどのインストール自体もそれなりにお時間が掛かりますのでご注意を。

    1.VirtualBoxのダウンロード、インストール

    以下のサイトからダウンロードしてきます。 Oracle 基本的にはダウンロードタイミングの最新の物で良いかと思います。 ダウンロード後はインストールして下さい。特にはまる事はないかと思います。

    2.Ubuntuのisoのイメージダウンロード

    以下のサイトからダウンロードしてきます。 Ubuntu こちらも基本的にはダウンロードタイミングの最新の物で良いかと思います。 (私は12.10で実施) なお、Tizenの公式サイトでは
    Ubuntu® 11.04 or 11.10 (32- or 64-bit)
    と書いてあるため、上記バージョンよりは新しい方が良いとは思われます。

    3.VirtualBoxでUbuntuの環境を作成

    VirtualBoxの使用方法の詳細は記載しませんが、私は以下の構成にしました。
    • HDD:8GB
    • Memory:2GB
    HDDはUbuntuで4.8GBだったかな?ほどが必要で、さらにTizenSDKをインストールする場合にもある程度の領域が必要なので、8GBもしくはそれ以上あると良いかと思います。
    
    メモリはなるべく割けるだけ割いた方が良いと思われます。2GBでも動きますが、結構重い(特にエミュレーター)です。
    
    また、Ubuntu標準のデスクトップ環境Unityそれだけで結構メモリを食ってしまうようです。
    
    潤沢なメモリを割り当てる事が出来れば良いですが、難しい場合には軽量のデスクトップ環境を導入する事をお勧めします。
    
    私はLXDEに変更しました。Unityだと2GBを割り当てても操作がガクガクだったのが、変更することでかなり解消されました。
    
    上記、LXDEの変更はGUIのUbuntu Software Centerもしくはapt-getコマンドでも出来ます。
    
    また、VirtualBoxを利用する場合にはファイルの共有、画面解像度の最適化などが出来るGuest Additionsも導入しておくと便利です。今回のエントリーとは趣旨がずれる為、詳細については記載しません。
    
    

    4.TizenのSDKダウンロード及び、インストール

    4-1.Javaのインストール

    まずは、Javaをインストールします。 なお、Tizenのサイトに
    Oracle® Java* v7 or later (do not use OpenJDK)
    とあるので、Java 7(OpendJDKではなく、pureな)をインストールします。 こちらを参考にさせて頂いたインストールします。 [ubuntu 12.04 LTS] Oracle Java(JDK)のインストール 特に問題なく出来るはずです。

    4-2.TizenSDKのインストール

    次にTizenSDKをインストールしてきます。
    Tizen Developers SDK
    
    Install Managerの一覧から対応するファイルをダウンロードします。
    
    SDK本体以外に画面下部にisoイメージのダウンロードリンクもあるのでご注意下さい。
    isoイメージのダウンロードは必須ではないですが、予めダウンロードしておけばSDKのインストール時にインターネット環境を利用せずともできそうです。
    
    ダウンロード後は以下のコマンドを実行します。
    なお、ダウンロードファイルは/Downloadsフォルダに配置した場合の想定です。
    
    cd ~/Downloads/
    ./tizen-sdk-2.0-ubuntu32.bin 
    
    とすると多分、色々ないから駄目よ的なメッセージが出ます。
    以下の文がダウンロードページに有るのでこちらに該当するものがないとNGのようです。
    
    In Ubuntu®, the following packages: procps, gettext, libdbus-1-3, libcurl3, expect, gtk2-engines-pixbuf, grep, zip, make, and qemu-user-static
    足りない物はapt-getを使って取得します。 私の環境では以下のような操作を実施しました。
    sudo apt-get install expect gtk2-engines-pixbuf libgnome2-0
    
    その後、もう1回
    ./tizen-sdk-2.0-ubuntu32.bin 
    
    とするとInstall Manager画面が起動します。
    isoイメージをダウンロードしていない場合、そのままボタンを押していけばOKです。詳細はこちらのサイトに画面キャプチャ付きであるので、参考にさせて頂きました。 Ubuntu 11.10 に Tizen SDK をインストールしてエミュレータを試してみる なお、isoイメージをダウンロードしている場合、Advance→SDK Imageを選択し、ダウンロードしたisoファイルを指定後、元の画面に戻ってNextボタンを押せばOKです。 なお、Proxy環境でやる場合には以下のような記述が公式にあったので起動する際にProxyのIPアドレス、ポート番号の指定が必要のようです。
    Are you using a network proxy? If yes, run the Install Manager with the -proxy : argument.

    5.IDEの起動

    インストールが正常に終了すれば、アプリケーションが登録されているはずです。
    IDEをコマンドラインから実行する場合には以下を実施。
    
    tizen-sdk/ide/startup.sh
    
    で、場合にはよって起動後、 MOZILLA_FIVE_HOMEを指定しろ、というメッセージが出ます。(会社のPCでは出なかったですが、自宅のMacBookAirでは出た)
    
    エラー内容を見る限り、SWT関連のファイルを参照するか何かで利用しているようです。
    
    上記は以下のサイトを参考に、libwebkitgtk-1.0-0のインストールと、eclipse.iniへの追記で解決しました。
    
    [Tizen Application-dev] Firefox or Xulrunner problem with Tizen IDE on Ubuntu 12.10 64bit
    
    実際には以下のような操作を実施。
    
    sudo apt-get install libwebkitgtk-1.0-0
    vi tizen-sdk/ide/eclipse.ini
    ★最終行に追記→-Dorg.eclipse.swt.browser.DefaultType=webkit
    
    上記操作実施後、IDE再起動によって事象は改善するかと思います。

    6.Tizenエミュレーターの起動

    次にTizenのエミュレーターを起動します。
    
    tizen-sdk/tools/emulator/bin/emulator-manager
    
    起動後の画面はAndroidのエミュレーターを作成する画面と似てます。
    Create newで新しい仮想端末を作成後、起動して下さい。すごい時間が掛かりますが、辛抱して下さい。
    
    

    7.Tizenエミュレーターでのサンプルアプリ起動

    最後にサンプルアプリを作成してエミュレーターで表示させます。
    New→Tizen Web Projectを指定。
    
    その後、下記画面のように選択し、適当にProjectName指定後、Finishを押します。
    なお、Finishボタン押下後に、プログレスバーが永遠に進まないなどの場合があるようです。その場合、IDEは終了させて下さい。上記場合でも下記サイトに記載があったようにプロジェクト自体は作成されているようです。
    
    Ubuntu 11.10 で Tizen のサンプルプログラムを動かしてみた
    
    作成後、右クリックしてRun as→1.Tizen Web Applicationでエミュレーターにインストールされ、画面が表示されるはずです。(エミュレーターが接続されている場合にはIDEの左下に下記のようにemulatorの文字が出ます)
    
    エミュレーターを起動するとこんな感じです。
    
    なお、エミュレーターの起動が遅い場合にはRun as→2.Tizen Web Simulator Applicationを選択する事でブラウザでも動作確認我で来ます。
    
    起動するブラウザの設定はWindow→Preferences→TizenSDK→Web→Simulatorで可能です。GoogleChromeがデフォルトの設定のようなので、未インストールの場合にはまずはインストールを実施して下さい。
    

    最後に

    とにかくエミュレーターの起動が遅い!です。本当に。
    ただ、途中で紹介したGoogleChromeで確認可能なTizen Web Simulator Applicationの起動はそれなりだったので、実際にはだいたいこちらで確認してエミュレーターは最終確認のみ、という感じになるのかなと。
    
    IDEに関してはほぼEclipseなので、割と取っ付きやすそうですね。
    

    [ruby+sinatra+jQueryMobile+Erb]InstagramAPIを使って今年行った夏フェスの写真を取得して表示させてみた

    このエントリーをはてなブックマークに追加 はてなブックマーク - [ruby+sinatra+jQueryMobile+Erb]InstagramAPIを使って今年行った夏フェスの写真を取得して表示させてみた
    Bloggerへの移行前のWordpressにて2012-11-01に投稿した記事です。

    何故か思い立って作成してみました。 せっかく作るのであれば楽しみながらやろう、と思って今年行った夏フェスの写真情報を取得して、表示させるものを作ることにしました。 行ったフェスは以下の3つです。
    • FujiRock(#fujirock)
    • SummerSonic(#summersonic)
    • 朝霧Jam(#asagirijam)
    それぞれのハッシュタグをキーにInstagramから提供されているrubyのライブラリを利用して取得してみました。その他構成は以下のような感じです。
    • ruby
    • sinatra
    • jQueryMobile
    • Erb

    GitHub

    ソースコードはGitHubに配置しましたので、良ければ是非ご覧下さい。(ruby初心者が書いたので微妙であればすいません。。。。。) GitHub-musi9festagram

    デモサイト

    以下の通りになります。Herokuで動いてます。jQueryMobileでの構築の為、スマホでの閲覧推奨です。 musi9festagram

    感想

    sinatraは初めて使ってみましたが、可読性が高いようなコードが簡単に書けて良い印象でした!rubyはまだまだ勉強不足で結構ハマってしまいました。。 今度は時間があればTwitter Bootstrap使ってみたい!

    参考サイト

    API - Instagram Developer Documentation InstagramAPIのDevelopr向けサイト。とりあえずAPIを使う場合には、サイトから登録が必要。また、TwitterAPIなどと同様にACCESS_TOKENなどの発行が必要です。 URLを指定して実際に取得出来る情報が閲覧出来るAPI Consoleが便利です。ライブラリを使わず情報を取得する場合のAPI仕様もこちらに有ります。 instagram-ruby-gem InstagramAPIのrubyライブラリ。使い方の詳細はコードにコメントが有るのでそれを見てみました。 [ruby][jquery]sinatraとjQuery Mobileを使った ruby+jQueryMobile+sinatra+Erbの構成だったのでかなり参考になりました!ありがとうございます。 Rubyのフレームワーク「Sinatra」を使ってみた(View編) Viewについてどうつくれば良いか不明だったため、こちらを参考に。Hamlも良さげ。 今さらSinatra最低限メモ shotgunを使うとファイルの自動Reloadとなるので、デバックする時とかかなり便利。 Heroku上でSinatraアプリを動かすまでのまとめ 今まで作ってみたアプリはdotCloudで動かしてみたりだったのですが、何故か当日うまくいかず、初めてHerokuを使うに当たり、参考にさせて頂きました。

    [洋楽]SoundCloudで音源無料ダウンロード可能な曲をまとめてみた[13曲]

    このエントリーをはてなブックマークに追加 はてなブックマーク - [洋楽]SoundCloudで音源無料ダウンロード可能な曲をまとめてみた[13曲]
    
    Bloggerへの移行前のWordpressにて2012-10-23に投稿した記事です。
    
    SoundCloud便利ですよね!
    
    SoundCloudはすごーくざっくり言うと音源の視聴が出来たり、音源のアップロードが出来たりするサービスです。
    
    僕は基本的にブラウザやアプリを利用して視聴を行っているのですが、たまーに音源が無料でダウンロード出来るものがあるんですよね。しかも公式に。(レーベルサイトとか、アーティスト公式アカウントとか)
    
    音源がダウンロード出来るってことはiPhone等の音楽プレイヤーに入れる事が出来て、オンラインオフラインに関わらず、曲を聴く事が出来るのです。
    
    ああ、素敵。
    
    ということでさっそく例を。
    
    
    
    下記以降にバンド毎の2012年10月24日現在ダウンロード可能な曲リストを記載します。リンクをクリックすると上記のような音楽プレイヤーが存在するページが表示されます。そのページの音楽プレイヤー内にあるDownloadという箇所をクリックすることで音源が無料でダウンロード出来ます♪
    
    視聴して好きな曲だけダウンロードしたり、えーい、とりあえず全部落とす!!などなどでお気に入りの曲を探してみて下さい。(ダウンロードが出来なくなる可能性がありますが、ご了承ください)
    
    -Fleet Foxes
    ロック好きか何が好きかなんか関係ないぐらいメロディが綺麗。
    ライブも良かったですよー!!
    Fleet Foxes - Helplessness Blues
    
    -Poor Moon
    Fleet Foxesのサイドプロジェクト!
    Poor Moon - Birds
    
    -Father John Misty
    元Fleet Foxesドラマーのバンド。アートワークはサイケですが、曲はFleet Foxes、Poor Moonと似て優しい感じ。
    Father John Misty - Hollywood Forever Cemetery Sings
    
    -Dum Dum Girls
    このバンドが好きならVivian GrilsLa SeraFrankie Roseも♪
    Dum Dum Girls - Lord Knows
    Dum Dum Girls - Bedroom Eyes
    
    -Team Me
    ノルウェー出身のバンド。POPでめちゃ聞きやすい。1stめっちゃ良い♪
    Team Me - With My Hands Covering Both of My Eyes I Am Too Scared To Have a Look At You Now
    
    -Digitalism
    最近も日本に来日してましたね!フジロックで観ましたが、かっこ良かった!
    2 Hearts
    
    -Crystal Castles
    2013年にSleigh Bellsとツーマン!
    Crystal Castles - Plague
    
    -METZ
    まだ新人だけどかなりカッコいい!
    METZ - Wet Blanket
    
    -Motion City Soundtrack
    ASIAN KUNG-FU GENERATION主催のフェスNANO-MUGEN FES 2012でも来日してました。この曲めっちゃ良い!
    Motion City Soundtrack- True Romance 
    
    -King Tuff
    この曲、PVがまた良いんです♪
    King Tuff - Bad Thing
    
    -Washed Out
    実はアルバムをあまり聞けていない。。。でも2011年度のアルバムで結構好評化だったアルバムだったと思われます。この曲は好き。
    Washed Out - Amor Fati
    
    -Memoryhouse
    これもあまり聞けていない。。。レーベルがSub Popなのできっと自分は好きな感じだと思われます。
    Memoryhouse - The Kids Were Wrong
    
    以上です。Sub Popのアーティストは本当に無料ダウンロードが多くて嬉しい限りです♪
    
    

    朝霧JAMにフジロッカーが参加して事前に知っておくべきだと思ったこと

    このエントリーをはてなブックマークに追加 はてなブックマーク - 朝霧JAMにフジロッカーが参加して事前に知っておくべきだと思ったこと
    Bloggerへの移行前のWordpressにて2012-10-12に投稿した記事です。

    朝霧JAMに行ってきました!

    フジロックは4回行ってて、その間朝霧JAMはずーっと行きたかったんですよね♪

    結果、行ってすごい楽しかったので、もっと多くの人に来てほしい!

    という訳でフジロックと比べて、感じた事や、「あ、これ気をつけておくべきだった」というのを書いてみます。

    1. 基本テントが前提
    2. 風呂とかシャワーは会場にないよ
    3. 2日目もテントで過ごせるのは場内駐車場券所有者のみ
    4. テントの場所取りは早めに
    5. テント設営まで道はかなり悪い
    6. 現地へ発送、現地から発送可能な宅急便はない
    7. 出演者の発表はかなり遅い
    8. 参考にさせて頂いたサイト

    ※基本的に朝霧JAMの情報は2012年の情報となります。今後変更となる可能性がある点についてはご了承下さい。

    1.基本テントが前提

    フジロックは車で来て、それから近くの宿へ行くという事も可能ですが、朝霧は場内駐車場以外は基本会場からかなり遠く(会場、駐車場間の移動はシャトルバス)、しかも各駐車場は出庫制限も有る為、基本最後まで観ようと思うとテントで過ごす事となるかと思います。

    タイトルにもCamp in 朝霧 Jamと書いてあるのでせっかくだし、キャンプを楽しむのがベストだと思います!(実際、かなりの人はテントだと思います)

    2.風呂とかシャワーは会場にないよ

    フジロックテント利用者は苗場温泉や簡易シャワーが使えますが、朝霧JAMはそれに変わるような風呂場やシャワーがありません。

    なので、ボディシートを用意するなり、何なりで対応する必要が有ります。

    どーしても行きたい場合、途中で駐車場まで行って車で日帰り温泉に行く事も可能だと思いますが、結構面倒そうです。

    個人的にはフジロックの場合、夏という事もあって、汗をかなりかいてお風呂に入りたい願望が強いのですが、朝霧は10月という事もあって僕はあまり汗をかかず、しかも2日目の途中で帰ったのでそんなに苦ではなかったです。

    3.2日目もテントで過ごせるのは場内駐車場券所有者のみ

    ここが少し分かりにくいのですが、朝霧JAMにはオーバーナイトという単語が出てきます。

    これ、何かという2日目の夜をテントで過ごす事ができるの事なのです。

    これ以外の人は2日目の日にテントを片付けて出て行く必要が有ります。フジロックであれば、その区分がなく、あくまでテント利用者は同じ時間居れるので注意が必要です。

    なお、オーバーナイトはそういう種類のチケットがあるという訳でなく、場内駐車場券所有者=オーバーバーナイト可能となっており、場内駐車場をGETした人は2日目もテントを過ごせるが可能です。

    上記も原因もあり、場内駐車場はかなり人気のようです。。。(僕は取れなかった)

    4.テントの場所取りは早めに

    テント設営可能場所は大きく分けてCAMP SITE A、CAMP SITE Bの2つがあります。

    ただし、オーバーナイトが可能なのはCAMP SITE Bのみなので注意が必要です。

    なお、いずれの場合もかなり早い段階で良い場所は取られてしまいます(僕は十時半ぐらいにグリーンパーク駐車場着いて、それからシャトルバスで会場まで移動後、CAMP SITE Bの設営場所を探しに行きましたが、かなり奥まで行っても場所が取られていました)

    上記より大人数で来てテントを楽しむ場合は買い出し組、場所取り組で分かれて行動することをオススメします!

    5.テント設営まで道はかなり悪い

    前段にも書いた通り、基本的にキャンプで過ごす人が多いと思うので、荷物がかなりの量になってしまうかと思いますが、CAMP SITE Bに行く場合、途中の道はかなり状態が悪く、道は砂利道でしかも坂になっています。

    フジロックのテント設営場所も坂ではありますが、石がないので、キャリーの移動にそこまで手間取った事はないです。

    が、朝霧はがある為にあまりタイヤが安定していないキャリーを持っていくと、結局うまく動かせず、持って行くしかない、という状況になってしまいます。(経験談)

    なので、荷物が多い場合には思い切って大きなキャリーやリアカーなんかでも良いかと思います。

    毎年行くと考えれば、安い投資ですよ。笑

    6.現地へ発送、現地から発送可能な宅急便はない

    フジロックでは毎年テント生活なのですが、電車で移動する場合、重すぎるため、基本的にはフジロック会場へ事前にテントを送っておくということをしています。

    あれ、本当に便利なんですよ。電車もしくはバス組移動でテントの人はかなり役立っているかと思います。

    が、残念ながら朝霧JAMでは、上記の制度はありません。。。そのため、基本は車で移動し、荷物をつめるか、バスもしくは電車で来て、荷物を最小限に抑える事になるかと思います。

    今回は車で行く事が出来たのでそこまで苦労しませんでしたが、バスもしくは電車の人は大変だろうなぁ。。

    7.出演者の発表はかなり遅い

    フジロック開催の結構前から少しずつに出演アーティストを発表していきます。なので、自分の気に入っているバンドが出たらとか、良さそうな日を選んで参加とかが可能です。

    ただ、朝霧JAMについては朝霧の出演者は開催2、3週間前にならないと出ません!
    しかも、一気に出演者が出る!(いずれも2012年度)

    今までフジロックやサマソニの流れが普通だったので、結構意外でした。。。
    上記アーティストが決定する段階では、2012年度では場内駐車場は当然、2番目に近い駐車場のグリーンパークも売り切れていたような気がします。
    上記の通りなので、オーバーナイト目当ての方はお気をつけ下さい。

    8.参考にさせて頂いたサイト

    行く前に情報調査の際に拝見させて頂いたサイトを紹介させて頂きます。僕のはあくまで気になった事抜き出しただけなので、詳細は以下を参考にしていただくと良いかと思います。

    特に妄タイさんのサイトはかなり参考にさせて頂きました。

    妄タイ 朝霧JAM FAQ
    朝霧JAMのFAQがすごく綺麗にまとめられています。写真もあり、素敵♪

    朝霧JAM(公式)
    公式サイト。こちらも参考になります。今後各情報も変更となる可能性もあるので、ここも当然チェック!

    朝霧ジャムレポート〜「ふもとっぱらオートキャンプ場ってどうだった?」編〜
    朝霧ジャムレポート〜「朝霧デビューは大雨でした。」編〜
    上記2件はfujirockers.orgのレビューですが、会場の雰囲気が掴めてとても参考になりました。

    そんな感じです。来年、一人でも多くのフジロッカーが朝霧JAMに来てくれたら嬉しいです!僕は来年も絶対行きますよ!

    TwitterのbotをdotCloud環境で動かしてみた時のメモ

    このエントリーをはてなブックマークに追加 はてなブックマーク - TwitterのbotをdotCloud環境で動かしてみた時のメモ
    Bloggerへの移行前のWordpressにて2012-10-11に投稿した記事です。

    タイトルの通り、TwitterのbotをdotCloud環境を利用して動作させてみた。せっかくなので、自分の好きな音楽に関係のあるものを作ろうという事で、10月6日、7日に開催される、「朝霧JAM」というフェスまでの日数をカウントダウンするbotを作成。(@asagiri_countとして稼働中)概要は以下の通り。
    • rubyで作成
    • dotCloud上にアプリケーションは配置
    • cronで1日4回実行
    本当は細かく書きたいのですが、別に何かに書こうとか考えてなくて、適当に作業してたので自分の中のポイントだけ。(本当に役に立たない)
    1. dotCloudのサーバーの時間と日本の時間の差
    2. Twitterの重複投稿エラー?
    3. cronが止まる?

    1.dotCloudのサーバーの時間と日本の時間の差

    まあ、そりゃそうだろ、って思ってたけど差分あり。ただ、ありがたいことにdotCloudのサーバーへはssh接続が出来るのでログイン後、確認。
    dotcloud@ramen-default-www-0:~$ date Sun Sep 30 14:10:36 UTC 2012
    
    toshihiro308$ date 2012年 9月30日 日曜日 23時10分59秒 JST 
    
    という事でだいたい9時間ほど違うようなので、それだけプログラムで引いた。そんだけっす。

    2.Twitterの重複投稿エラー?

    全く同じ投稿をするとエラーになって以下のステータスが返却される。
    Status is a duplicate. (Twitter::Error::Forbidden)
    そういえば、自分も連投してしまった時エラーになってたけど、内部ではこれが発生していたのね。これは単純にtweetする内容の先頭にランダムで文言を追加するようにして逃げた。どうやら少しでも違えば大丈夫らしいので。

    3.cronが止まる??

    これが一番厄介だった。dotCloudではcronが設定出来て、僕の場合は1日に4回投稿したかったので、6時間毎にrubyを実行するようにしておいた。が、1日ほど経過するとcronが動いてないのか、投稿されなくなってしまう。ついでにsshも繋がらない。とりあえず、サイトのURL(Webアプリケーションとして登録しているので)を叩くと、すぐに表示されず、以下の文章とローディング画面が。
    This application has no recent traffic and has been put into hibernation. It may tala up to 30 seconds to wake up….
    上記に書いてある通り、30秒ほど待つとページが表示される。それからはsshが接続出来るようになった。これより仮説として、一定時間リクエストがないとWebアプリは落ちてしまって、cronもついでに動作しなくなるのではないかと考えてた。そこで実験的に1時間に1回自分のWebサイトにアクセスするようにした。
     00 0-23/1 * * * wget http://myapplicationname.dotcloud.com/
    
    これ以降はcronがかずっと停止せずに動くようになったので、上記仮説は正しかったのかも。(それらしい文献を見つけれなかった)そもそももっと根本的な解決法方法があったのかもしれないけど、よく分からなかったのでこれでOKという事にさせて下さい