Chromeのuserスクリプト書いてみた

なんて簡単に･･･
FireFoxでGreacemonkey書いたときは苦労した記憶がある。
まだJavaScriptに慣れてなかったからか、jQueryのインストールに苦労したのか･･･

ともあれ、
JavaScript書く⇒Chromeにインストール
がこんなに簡単なんて。

◆書いたコード：

// ==UserScript==
// @match http://dev.example.com/*
// ==/UserScript==

links = 
  document.evaluate(
    '//a[contains(@href,"http://www.example.com")]|', 
    document, null, 
    XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
for (i = 0; i < links.snapshotLength; i++) {
  links.snapshotItem(i).href = 
    links.snapshotItem(i).href.replace( 
    /\/\/www.example.com/i, "//dev.example.com" );
}

開発サーバー（dev.example.com）を立ち上げたけど、絶対パスでリンクが張ってある箇所が多いので、ユーザースクリプトでリンク先を強制書き直し。

◆上のファイルを自分のPCに保存。

「test-server.user.js」とかにして保存した。

で、Chrome上にドラッグ＆ドロップで、ドロップ。

すると、

• 左下に確認画面（Extensionはコンピュータにダメージ与えるかもしれないけど、続けていい？）が出るので「Continue」を押す、
• ダイアログウィンドウが出るので「Install」ボタンを押す、
• で、インストール完了。

何度もやる作業なので、インストールが簡単なのは素晴らしい。

ChromeでGreasemonkey：JavaScriptでリンク先を変更

仕事で使いそうなので。メモ。

◆ChromeでもGreasemonkeyが使えるらしい。
http://internet.watch.impress.co.jp/docs/news/20100202_346437.html

知らなかった～
早速、ウェブページ内のリンクを書き換えるスクリプトを書きたい。

◆が、jQueryが使えないとの話。

まぁこういうスクリプトを入れればよさそうだ。
http://stackoverflow.com/questions/2246901/how-can-i-use-jquery-in-greasemonkey-scripts-in-google-chrome

◆でも、もっとピュアJavaScriptでリンクの書き換えぐらい出来ないのか？

ちょっとググルと、サンプルコードがあった。
http://userscripts.org/topics/1966?page=1

◆document.evaluateってなんだ！

そんなメソード知らなかった！！！
XPathって言うんだ。。。
うん？「XPath」は聞いたことがある気がする･･･

なんか、とてつもなく、使えそう。
http://www.softel.co.jp/blogs/tech/archives/2067

こちらは、引数について説明が細かくある。
http://deltatech.blog90.fc2.com/blog-entry-332.html

ちょっとしたことでも、jQueryが便利だから使ってたけど、
ピュアJavaScriptでも、かなりのことが出来そう。

gitのbranchを覚える

gitを使うなら、branchを覚えるべきらしい。
なので、勉強がてらにメモ。

◆githubにレポジトリがある状態から

既にgithubでレポジトリを作ってるとして、まずはclone。

git clone git@github.com:asaokamei/test.git

◆ブランチの作成と確認

覚えるのはgit {branch|checkout} コマンド。
これでローカルレポジトリ上でbranchを作成したり、
branchを行ったり来たりできる。

まずはブランチを作成。そして現在のブランチを確認。

> git branch jpn
> git branch
  jpn
* master

新しいブランチ「jpn」に切り替え。そして現在のブランチを確認。

> git checkout jpn
Switched to branch 'jpn'
>git branch
* jpn
  master

◆で、ここからgit gui（笑

軟弱ものなので、gui版を使ってます。
「git gui &」でgui版を走らせます。

すると「現在のブランチ jpn」と出てます。
うまくいってる感じ。

適当にファイルを追加・編集したら
コミットしてプッシュを押すと、「元のブランチ」で

jpn
master

が出た。
「jpn」が選ばれてるのを確認してから、
「リモート：origin」でプッシュ。

githubで確認したら、ちゃんとブランチが切られてできてました。

◆簡単でした。

なんか悩んでましたが、これだけなら簡単ですね。
gui版を使えば、どこにプッシュするかもわかりやすいので、
間違えないですみそうです。

まぁブランチの入門編でしかないですが。

fluxflexを使ってみる＠Simple

PHPが使えて、githubから簡単インストール、で有名な？
Fluxflexを使ってみます。
https://www.fluxflex.com/

日本人がサンホセ（シリコンバレーのことですね）で立ち上げた新しいPaaSらしいです。

◆アカウント作成・認証。

簡単にtwitterを使って認証。
ものの５分たたずに最初のsandoboxが立ち上がった。
http://sandbox-6bh0ihgi.fluxflex.com/

素晴らしい。

◆新しいプロジェクト作成

適当にプロジェクト名を決定して・・・
もしかして大文字不可？

ともあれ、名前を入力して、Create A New Project を押して、完了。

名前：cenadta-demo

◆fluxflex用のgithubレポジトリを作成

CenaDTA-fluxflexというレポジトリを作成。

次に作業フォルダーを作って、
public_htmlというフォルダーを作成。ここが公開フォルダーになるとのこと。

その中に、Cena-DTAを放り込む。
噂ではgit内に別のgitがある場合、fluxflexが動かないらしい。
ので、.gitフォルダーはすべて削除。

データベース接続の設定ファイル内のユーザー名などをCENA_DB_USERに変更。後述しますが、設定を変換できるらしい。

そんで、git commit してpush。

◆fluxflexでの設定の方法

さて、githubからimportする際に、DBへの接続パラメータを上書きできるようになってます。これがないと、公開レポジトリ使うとパスワードが漏れてしまいます。

まずは、SetUpの中のDatabaseで、データベース接続パラメターを確認。
同じくSetUp内のInitialize Scriptで、Initializer ScriptとSetEnv Variablesをセットアップ。こんな感じ。

[replace]
public_html/demo/dba.ini.php   CENA_DB_USER     DBA_USER

DB_USER   cenadta-demo

ここで、Github Importで、先のgithubレポジトリ

git@github.com:asaokamei/CenaDTA-fluxflex.git

を指定してimport！

◆動いた・・・が、

早速、DBの初期化。
が、データベースの接続で

SQLSTATE[HY000] [2002] Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2)

と怒られた。

◆なぜでしょう？

まずimportする際に、「Run initialize scripts for setting up the project.」にチェックを入れて押すことに。これで少し前進した様子。

次に、fluxflexのstatistics内のInitialization Logsにエラーを発見。

[!FAILED] invalid fixture key : XPS in line 3

とあって、XPSという文字列の変換に失敗している様子。その後のファイルが見つかりませんのエラーは、最初のエラーが原因で発生しているようで、無視して大丈夫みたい。

うん？XPSなんて文字は指定してないぞ。
どうやら、XPSは環境変数に設定されていない場合のエラーのようです。

◆もう一度、落ち着いてimportとinitializationから

まず、Initialize Scriptの[replace]ですが、
  ファイル名、変換する文字、変換後の文字、
なのですが、変換後の文字はEnvironemntを通して設定するようです。

ただし、最初から次の変数は環境変数に設定されているようです。

# DB_USER ... The username of the project database. This name is the same as project name in almost all cases. # DB_PASSWORD ... The password of the project database. # DB_HOST ... The hostname of the project database. # PROJECT_NAME ... The project name.

なので、Initialize Scriptに、

[replace]
public_html/demo/dba.ini.php   CENA_DB_USER     DB_USER
public_html/demo/dba.ini.php   CENA_DB_PASSWORD    DB_PASSWORD
public_html/demo/dba.ini.php   CENA_DB_HOST     DB_HOST
public_html/demo/dba.ini.php   CENA_DB_NAME     PROJECT_NAME

と設定するだけで動きました。

追記：最初は.fixファイルを使うつもりだったのですが。
忘れてた。こちらの方がgitで管理できるので便利と思われる。

◆Cena-DTAのでもサイトが公開！

http://cenadta-demo.fluxflex.com/

よろしく〜
まだセキュリティ関係があれなので、気をつけて使ってください。
変なデータ入れられても、XSSしてしまいます。
また、定期的にDB内はクリーンアップしますので、大事なデータとか入れないように。

◆文字化けしている。

が、ちょっとみたら文字化けしていますね。
DBに入れた文字が化けてるみたいです。

fluxflexからphpMyAdminを使えますので、早速ログイン。
データベースの操作メニューで、照合順序をみたら、latinとなってます。
これをutf8_unicode_ciに変更して、実行。
一旦テーブルをドロップしてから、作り直したらなおりました。

午後いっぱいかかりましたが、サイト一個アップするのも簡単になりました。
素晴らしいサービスです。いい時代です。

Simple@中山

いつもの勉強会＠中山。

◆まずは血圧の測定。

最近、医者に高血圧といわれ薬を飲み始めた。
ので、今日は一日の血圧の変動を測定する。

測定器は、アマゾンで評価のよかった手首ではかるタイプのやつ（右）。ただ医者で測定するより２０ぐらい低く出る。

０６：０９　１１６−６６
１１：４５　１２６−７９
１６：５４　１３９−８０


◆何しようかな。

◆Dioモジュール作ってます（PHP）

https://github.com/asaokamei/Dio

Yet-another-validatorですが、入力値のサニタイズ、文字種変換、バリデーション、の全部入りモジュールです。こんな感じで使える予定。

$mail = Dio::request( 'user_mail', 'email',
  array(
    'default' => 'text@example.com',
    'required' => TRUE,
    'toHankaku' => TRUE,
    'string' => 'lower',
    'regexp' => array( '*jp$', 'err_msg' => '日本ドメインのみ可' ),
  )
);

特徴は：

• できるだけ簡単に。
  例のような感じで、普通に簡単に使えるようにしたい。
• 文字種変換など順番を指定できる。
  全角英数字を半角に変換してからバリデーションする、とか順番が大事なので、前もって順番を指定しておいて、適当に使っても大丈夫にしたい。
• 複数の項目を一つにして読み込める。
  例：date_y, date_m, date_d を「date」として読み込めます。

まだ一度も走らせてません。シンタックスエラーすら未チェック状態。

◆今日の課題を決定：fluxflex

to-be-continue

Simple@高円寺、Qunitなど

いつものSimple勉強会。今日は高円寺にて。
まったりとスタート。

◆QUnitでユニットテスト

Cena-DTAのJavaScriptのユニットテストをするためにQUnitを使ってみた。
http://docs.jquery.com/Qunit

テストコードを作るのはとても簡単。

非同期（asynchronous）の場合のテストもできる。
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-test-your-javascript-code-with-qunit/

「QUnit asynchronous」でググって最初のページだけど。
疑似コードは：

test( "asynchronous test sample", function() {
  stop(); // テストを一旦止める
  async( callback_func );
    var callback_func = function() {
      start(); // テスト再開
      ok( true );
    }
{);

・時間の読めない関数（async）を呼ぶ前に、一旦テストをstop、
・コールバック関数で、実際に実行される箇所で、テストstart、
・それからテスト条件を書く、
という感じ。

面倒な点といえば・・・
テストしたいのがDOMに正しく書かれたかどうかのため、テストの設定が大変だった。また書かれた内容をjQueryで読み込んでとかも面倒。

これはQUnitが原因ではなくて、おしなべてJavaScript全般にいえることでしょう。

◆もっとテストを

結構、テスト書くのは大変です。
どの機能を、どうやってテストしたらいいのか、考えるだけでも時間がかかってます。先にテストを考えてから作るといいんですかね？

それって、ボトムアップみたいな開発ならできそうなのですが、トップダウンで作ってるとき（つまり試行錯誤しながらクラス設計する場合）後回しにしてしまいそう。いや、後回しにして、後でテスト足りなくて困るという・・・

PHPカンファレンスでCena-DTA発表

2011年9月10日のPHPカンファレンスでCena-DTAの発表してきました。
緊張したなぁ～

UStream：
http://www.ustream.tv/recorded/17175804

発表資料：
http://www.slideshare.net/asao_jp/cenadta-php-conference-2011-slides

技評さんの「PHPカンファレンス2011 スペシャルレポート」
http://gihyo.jp/news/report/01/phpcon2011/0001?page=2

技術評論社さんには
「まだ過渡期の技術ですが今後どんどん
　開発が進んでいく注目の技術かもしれません。」
と書いてもらえました。

うん？
「今後どんどん開発が進んでいく～かも」とは、どういう意味でしょう？
もっと頑張れ、ということかも知れません。

確かに、発表内容は技術の紹介が半分近くを占めてます。
発表タイトルにある「アプリ開発」には、ちょっとしか触れてません。
聞いてくれた人には、思ってたのと違う内容だったかも知れません。

そういう意味で、まだまだ過渡期。
次こそは、「ぜひ使ってください」という発表をしたいです。

使ってもらえるためには、何が必要でしょう？
コードとプロトコルをきれいにする？
セキュリティを極める？

自分としては、摘要可能なRDBの範囲を見極めたいです。
まだまだ単純なケースでしかCena-DTAが有効であることを示せてません。
もっと複雑な構造だったら？
もっと大量のデータだったら？

それと、他の技術もあるけど、
どういう場合にCena-DTAを使うべきなの？

こういった疑問に答えられるようになりたいです。