World Wide Windblue: 2011

2011年11月30日水曜日

2011年10月23日日曜日

phpMyAdminで他のサーバのDBを制御する

仕事で標記の件が必要になりそうだったので

イメージだけでも掴んでおこうと自宅で試してみました。

どういう風に試すかですが、簡単に言うと
1. まず2台のPC(Ubuntu 11.10 と Mac 10.6.8)にAMP環境を構築する
2. 更にUbuntuにphpMyAdmin を入れる
3. Ubuntu内のphpMyAdminから、LAN経由でMacのDBを制御してみる
って感じです。

このエントリーの目次

1.MAMP環境を構築する
2.LAMP環境を構築する
3.UbuntuのphpMyAdminの設定をする
4.MacのMySQLの設定をする
5. Ubuntu内のphpMyAdminから、LAN経由でMacのDBを見てみる
6.できた！

1. MAMP環境を構築する

下記を参考に(手抜き)
Mac に MacPorts を使って MySQL と PHPMyAdmin をインストールする方法 | WEBLE

バージョン5.1.45が入りました。

MacのMySQL系のコマンドは全く慣れないので、引用させて頂きます。

・MySQLサーバの起動コマンド

sudo /opt/local/share/mysql5/mysql/mysql.server start

・rootユーザにパスワードを設定する

/opt/local/lib/mysql5/bin/mysqladmin -u root password 'password'

・MySQLにログイン

/opt/local/lib/mysql5/bin/mysql -u root -p

2.LAMP環境を構築する

下記を参考に(手抜き)
Ubuntu に MySQL と phpMyAdmin をインストールする | hiratake55 の開発メモ

・apacheのリスタートコマンド

sudo /etc/init.d/apache2 restart

バージョン5.1.58が入りました。

3.UbuntuのphpMyAdminの設定をする

phpMyAdminの設定ファイルを編集します。Ubuntu に MySQL と phpMyAdmin をインストールする | hiratake55 の開発メモの通りに作業したので、下記のファイルを編集することになります。

/var/www/phpmyadmin/config.inc.php

30行目からのあたりを下記のように編集します。

$cfg['Servers'][$i]['auth_type'] = 'http';

$cfg['Servers'][$i]['host'] = '192.168.x.x'; //MacのプライベートIPアドレス

$cfg['Servers'][$i]['port'] = '3306';

4.MacのMySQLの設定をする

ここでは4.7.5. アクセス制御の段階 1：接続確認 | MySQL5.1 リファレンスマニュアルを参考にしました。
で、まず、コマンドでMySQLにrootにログイン。

/opt/local/lib/mysql5/bin/mysql -u root -p

以下のように、このDBにアクセスを許可するアカウントを作成します。

grant all privileges on *.* to アカウント名@'192.168.x.x/255.255.255.0' identified by 'パスワード';

ちなみに、「all privileges」文で新アカウントに全ての権限を与えてます。

5. Ubuntu内のphpMyAdminから、LAN経由でMacのDBを見てみる

「http://UbuntuのプライベートIPアドレス/phpmyadmin/」にアクセスすると、以下のような画面が出ます。

そして4.MacのMySQLの設定をするで設定したアカウント名とパスワードを入力すれば、MacのDBにログインできます。
DBの内容を見て、Mac内のDBが取得できているコトを確認します。

6.できた！

MacでMySQLをいじるのは初めてなので色々と戸惑いました。ログインできないとか、そもそも起動の仕方が分からないとか。。

長々と書きましたが、間違いなどありましたらご指摘いただきたいです。

2011年10月18日火曜日

2011年10月2日日曜日

Ubuntu 11.04 にErlang と Android の開発環境を構築する

どちらもネットを調べて簡単にできました

ほんとに迷わず環境構築できました。

Erlangの開発環境構築

UbuntuにErlangを入れる - ありの日記を参考に。

体感3秒でできた。

Androidの開発環境構築

Ubuntu 11.04にAndroid開発環境を構築する - TechBoosterを参考に。

色々とダウンロードとかするのに時間かかったけど、1時間強でできました(殆ど待ち時間)。

追加でGoogle TVの仮想デバイスも入れた。
それについてはGoogle TV add-onを試してみた（Preview版）。 - BRILLIANT SERVICEを参考にした。

ほんと簡単だった

しかしErlangはさっぱり分かりませんな！
頑張ってできるようになろう。

2011年9月28日水曜日

2011年9月27日火曜日

2011年9月5日月曜日

DotCloud + PHPで「Hello World」をUbuntu 11.04で試してみた

本当に簡単にできました

「Ubuntu？あれだよ、Linuxだよね！」
レベルの僕でも簡単にできました。

このエントリーの目次

1. DotCloudとは
2. まずはDotCloudにサインアップ
3. DotCloudの開発環境を整える
4. DotCloudでHello Worldを作成してみる
5. Hello Worldサービスを公開、Webで確認してみる
6. もし403 Forbiddenと表示されたら。。
7. まとめ

1. DotCloudとは

Paasです。
2サービスまでは無料のようです。
詳しくは以下のエントリーなどから(手抜き)

1. プログラミング言語やデータベースが選べる新世代PaaS「DotCloud」が正式サービス開始 | Publickey
2. PythonでWebアプリつくるのにDotCloudに登録しない手はない | YAMAGUCHI::weblog
3. DotCloudは開発者のための優良なプラットフォーム | ゆーすけべー日記

2. まずはDotCloudにサインアップ

という訳で、まずはDotCloudにアクセスし、サインアップします。

3. DotCloudの開発環境を整える

DotCloudのチュートリアルに従って。

ターミナルにて。
dotcloud環境をインストールするにはeasy_installが必要なので、まずそれをインストールします。

$ sudo apt-get install python-setuptools

続いてチュートリアルに従ってdotcloudをインストールします。

$ sudo easy_install pip && sudo pip install dotcloud

インストール完了したら、まずdotcloudコマンドを実行してAPI Keyを入力します。

$ dotcloud

Enter your api key (You can find it at http://www.dotcloud.com/account/settings):

API KeyはDotCloudのsettingsページから確認できます。

これで環境が構築できました。

4. DotCloudでHello Worldを作成してみる

まずは、これから作るHello Worldサービスに対してdotcloudにおける名前空間を設定します。

$ dotcloud create helloworld

こんなふうに表示されれば成功。
Created application "helloworld"

次にHelloWorld用のディレクトリを適当に作成します。
僕は例えば以下のように作成しました。
~/work/dotcloud/helloworld/

(設定した名前空間と同じ「helloworld」でディレクトリ作ってますが、本来は一致させる必要はありません)

以降はこのhelloworldディレクトリで作業をし、ここにプログラムなどを配置していきます。
今回作るHello Worldサービスは、最終的には以下のようなファイル構成になります。

$ tree ~/work/dotcloud/helloworld/
~/work/dotcloud/helloworld/
├── dotcloud.yml
└── index.php

それでは、簡単なindex.phpを作成します。

<?php

echo 'hello world! ';

次にdotcloud.ymlです。
これはHello Worldサービスンについての設定ファイルで、このファイル名にしないといけないようです。
以下の記述をします(インデントを表すために全角スペースにしてますが、半角スペースにしてください)。

www:

type: php

これでHello Worldサービスの作成が完了しました。
次はいよいよリリースです。

5. Hello Worldサービスを公開、Webで確認してみる

リリースもコマンド一発で簡単にできます。

まずは、念の為カレントディレクトリを確認。
~/work/dotcloud/helloworld/

ではリリースです。
コマンドは以下。

$ dotcloud push helloworld .

僕の場合、リリース完了まで10秒くらいかかりました。

ターミナルの表示を見てると、sshで接続してrsyncしてbuildして〜みたいなコトが行われています。

最終的には以下の表示がされれば完了です！
「このサービスは以下のURLで見れるよー」って書かれてますね。

The build finished successfully
2011-09-04 16:01:55 [api] Deploy finished

Deployment finished. Your application is available at the following URLs
www: http://helloworld-<username>.dotcloud.com/

<username>の前の「helloworld」は、設定した名前空間と一致します。

という訳で、実際にHello Worldのページを確認してみてください。
ちなみに、以下のコマンドを打つとURLが確認できます。

$ dotcloud url helloworld

「index.php」だとドメインだけでアクセスできるのかな？？
ちなみに、index.phpと同時にhoge.phpを作成したとき、hoge.phpへのアクセスは
「http://helloworld-<username>.dotcloud.com/hoge.php」
でできます。

6. もし403 Forbiddenと表示されたら。。

ファイル構成などが間違っている可能性があります。
僕も一回403になりました。

繰り返しになりますが、今回の例では以下のファイル構成にして

$ tree ~/work/dotcloud/helloworld/
~/work/dotcloud/helloworld/
├── dotcloud.yml
└── index.php

以下のディレクトリにて
~/work/dotcloud/helloworld/
以下のコマンドでリリースしています。

$ dotcloud push helloworld

7. まとめ

という訳で、簡単にですがまずはとにかくHello Worldを試してみました。
環境構築がかなり苦手な僕ですが、それでも非常に簡単にできました。
すごい！

DotCloudを試した理由はNode.jsが動くからです。
これで何か作ってみたいなーと。
個人的に勉強中のErlangもalphaになっているけど、一応使えるのかな。。？

ちなみに、DotCloudのPHPは、Apacheではなくnginxで動いているようです(nginxのWikipedia)。
何それおいしいの。。。

以上です。
繰り返しになりますが、本当に簡単なのでサクッと試してみてはいかがでしょうか。

2011年8月20日土曜日

JavaScriptでObserverパターンを書いてみた

Observerパターンのサンプルはこちら

http://jsdo.it/windblue/y87e

サンプルの概要としては、

「左のボタン」と「右のボタン」がある
「左のボタン」を押すと、「左のボタン」が大きくなり、「右のボタン」は元の大きさに戻る
「右のボタン」を押すと、「右のボタン」が大きくなり、「左のボタン」は元の大きさに戻る

中規模程度のDHTMLで且つ、ある要素で発生したonclickなどのイベントが他の要素に影響を与えるような場合に使えるのではと思います。
逆に言えばごく簡単なDHTMLには冗長な記述だし、大規模なDHTMLとしてはStateパターンなどを組み合わせるなどしないとつらいと思います。

Observerパターンとは

Observerパターン - Wikipediaを参照してください(手抜き)。

これでif文地獄から抜け出せる

ストレートに書くなら、

if(左のボタンを押されたとき){ doSomething(); }

と

if(右のボタンを押されたとき){ doSomething(); }

のようなコードになりがちですが、中規模以上のWebアプリなどになると、これではif文地獄になってえらいコトになると思います。

それを避けるために、サンプルでは画面上の要素たちを各モデルに分解して、それぞれのモデル(「左のボタン」モデルと「右のボタン」モデル)に、「左のボタン」を押されたときの挙動、「右のボタン」が押されたときの挙動、を記述していきます。

サンプルコードの簡単な説明

http://jsdo.it/windblue/y87eのソースにもちょこちょこコメントを書いていますが。

各モデルに対し、イベントハンドラを登録。
たとえば、「左のボタン」モデルに対しては「左のボタン」のonclickのイベントハンドラを登録。
そのイベントハンドラが、コントローラの「左のボタン」が押されたよメソッドを呼ぶ。
すると、コントローラは「左のボタン」モデルと「右のボタン」モデルの、「左のボタン」が押されたよメソッドを順番に呼んでいきます。
この順番に呼ぶ部分がObserverパターンです。
で、それぞれのメソッドが全て呼ばれたら、表示を変更するために、コントローラが「左のボタン」モデルと「右のボタン」モデルのonUpdateメソッドを呼んでいきます。

また、各モデルは大本となるモデルクラスを継承しています。
モデルクラスは、コントローラから呼ばれる各モデルのメソッドを全て定義しています。
Javaでいうinterfaceのような役割を持っています。
サンプルでは全て空のfunctionです。
「このモデルではこのメソッドがコントローラから呼ばれても特に何もさせない」という場合、そのモデルではそのメソッドを定義していません。
すると、大本のモデルクラスの空メソッドがコントローラから呼ばれるコトになります(interfaceというよりはabstractって感じですね)。
これにより、
コントローラ「このモデルにメソッドが定義されていないじゃないか！（怒）」
というコトが避けられます。

以上になります。

あと全然関係ないけど

Operaだとなぜかjs do.itのタイトルが編集できませんでした。
なんで！（怒）

2011年6月23日木曜日

Chromiumのソースコードの場所

本当にメモです

SVN

ちなみにビルドの仕方はコチラ

こんな記事を見つけたのでこちらもメモ。
Chromium (Chrome) のソースを読む | NyaRuRuの日記

2011年6月15日水曜日

Web上のすごい音楽サービス

3つほど

Grooveshark
これはWebアプリとしてすごいクオリティー。
アーティスト名や曲名で検索して、ヒットした曲一覧から聞きたいものを選択、プレイリストに追加していく。できるコトが多すぎて最初はちょっと戸惑うかもしれないけど、慣れれば気ににならない。アーティスト名をクリックすると、アルバム毎の曲データが見れる。
また、「ラジオ」という項目もあって、これは「80's」や「90's Alt Rock」など、各ジャンルの曲が自動でプレイリストに追加される。有線のような感じで使える。
君のラジオ
GroovesharkよりシンプルなUIで、使い勝手がよい。アーティスト名や曲名で検索すると曲一覧が出てくるので、そこから聞きたいものを選択、プレイリストに追加していく(その曲を聞き終わると、プレイリストからは削除されるので、もう一度聞きたいときは再度プレイリストに追加する必要がある)。画面左上にYouTubeのプレイヤーが表示される。検索後の画面に「Top20 をQueueに追加」というボタンがあり、20曲一気にプレイリストに追加できるので便利。
MoonPlayer
非常にシンプルなUIで、Youtubeの音楽動画がブラウザのほぼ全領域で再生される。非常に秀逸な10フィートUIだと思う。シンプルがゆえに、トリックプレイとしては「前の曲へ」「一時停止/再生」「次の曲へ」のみで、上の2サービスにあるような「プレイリスト」はない(次に何の曲が流れるのかわからない)。同じく10フィートUIを目指したYouTube XLよりも洗練された感じで好み

2011年6月14日火曜日

「スマートテレビで何が変わるか」を読んだのでメモ

スマートテレビで何が変わるかという本を読みました。
情報量が多かったので、本の中で興味を惹かれた登場人物やサービスの概要について、「個人的なメモとして」まとめます。
マーケティング的な背景やマネタイズなどについては特に流します。

スマートテレビとは

従来のテレビ番組に加え、動画などインターネット上の各種コンテンツ情報をテレビ画面で楽しめる
パソコンやスマートフォンのような、情報処理能力を持っている
インターネットを通じた心理的なソーシャル視聴が可能

アップス

様々な機能を持つスマートテレビを、よりシンプルな操作で利用してもらうためにはアップスがポイント。
テレビアップスにちては、大きく4種類に分類している。

見逃し放送をストリーミングするためのアップス
個々の番組と連動する番組連動型アップス。
番組と連動しない番組非連動型のアップス。ヤフーコネクトテレビなどで提供される天気予報やニュースなど
個々のデバイスに特有のアップス。テレビメーカーによるお知らせなど

従来型の放送は残る？消える？

まず、番組が出来上がるごとにインターネットのサーバに登録され、視聴者が自由に引き出すクラウド放送へと大きく変化するとみられている
そして、将来的にはユーストリームのような形態のコンテンツも、そのまま電波に乗る可能性がある

一方、スマートテレビを推進する英国BBCのアンソニー・ローズ氏(You Viewの構想策定者)は「当分は従来型の放送が残る」と言っている。

タイムシフトとプレースシフト

タイムシフト(時間シフト視聴)とは
視聴者が「好きなときにいつでもテレビを見られる」というコト。
ユーチューブなどやGyaoのような視聴スタイル。NHKが見逃し放送のサービスNHKオンデマンドを開始した。

プレースシフト(場所シフト視聴)とは
視聴者が「見たい場所でいつでもテレビを見られる」というコト。
例えばアップルのエアープレーではiPadやiPhoneの映像をテレビに受け渡せるようになっている。

時代は着実にこの方向に進み始めており、DECE(業界団体デジタル・エンターテインメント・コンテンツ・エコシステム)などの参加企業は、この方向を目指している。

* DECEでUltraVioletという取り組みがある。Tech Crunchの「DECEのUltraVioletで、Appleの本当の実力がわかる」という記事によると、UltraVioletとは、
「DECEの参加企業が製造するデバイス間で、コンテンツを安全に相互利用できるようにするために、DECEが採用した技術である。これはDRMではあるが、あらゆる家電やコンテンツで使えることで、消費者に受け入れらるものとDECEが期待するDRM方式だ。」
とのコト。

クラウド放送に向けた国内外の取り組み

クラウド放送が成熟すれば映像だけでなく、電子書籍や音楽、ゲームなどのコンテンツを、あらゆるデバイスで視聴することができる。

まず、国内市場について。
SHARPは、自社のスレート端末GALAPAGOS用のコンテンツとして、TSUTAYAを運営する企業と共同でクラウド放送企業「TSUTAYA GALAPAGOS」を立ち上げた。ここでは遠視新聞や電子雑誌、電子書籍約2万点が用意されている。

SONYは凸版印刷、KDDI、朝日新聞社とで、電子書籍共通配信プラットフォーム「ブックリスタ」の運営を開始した。

NTTドコモが出資する「株式会社mmbi」が、2012年春から放送サービスを開始する予定。

次に米国市場について。
米国のクラウド放送ではHuluとネットフリックスが有力。

Huluとは、CBSをのぞく米国地上波(FOX、NBC、ABCなど)が立ち上げた見逃し放送配信サービス。
ネットフリックスは、米国のオンライン映画ストリーミング企業。

どちらも、放送局や映画配給会社などのコンテンツホルダーから作品の提供を受けて代理販売したり、広告付きで無料で提供したりしているため、「アグリゲーター」とも呼ばれる。
Huluはテレビ番組中心、ネットフリックスは映画中心のアグリゲーター。

アグリゲーターとしては、他にも2011年1月から日本でもサービスを開始したSONYのキュリオシティ、欧州では「イギリスのネットフリックス」と呼ばれるラブフィルム(アマゾンが買収)、東芝がフランスで立ち上げた東芝プレーシーズなどがある。

海外市場での日本メーカー

多くの日本メーカーが、欧米ではスマートテレビ市場に進出している。

例えば東芝。欧州ではHbb TV(ドイツ・フランス・オランダを中心に欧州放送協会が設定したスマートテレビ標準規格)に対応したテレビを発表しており、米国ではヤフーコネクトテレビと、Vuduの仕組みを活用したスマートテレビを販売している。

SHARPのテレビ「AQUOS」も、米国ではVuduのアップスを搭載。

SONYもまず電子書籍リーダーを米国向けに開発、2010年12月には電子ブックストア「リーダーストア」を立ち上げた。

スマートテレビの欧州事情

欧州では各国ともスマートテレビに大して、テレビ業界の方が熱心。

イギリスでは公共放送BBC、民放のITV、英国テレコムのBTが参加したYou Viewが、2012年初等に立ち上がる予定。You Viewの特徴は、IPTV。インターネット上に置かれた見逃し放送をテレビに送信するサービス。この手法は「オープンIPTV」と呼ばれる。

ドイツ・フランス・オランダでは先に書いたHbb TVという標準規格を設定している。

見やすいのは1画面方式？2画面方式？

スマートテレビのありかたについては1画面方式か2画面方式かで戦略的な議論がある。
2画面方式は、モバイル機器の画面も含めてサービスを実現する手法。

1画面方式
グーグルテレビやヤフーコネクトテレビ、Hbb TV、You Viewなどが採用。
アップスはテレビ本体やSTB上に搭載され、放送番組に重ねてテレビ画面上に表示される。
2画面方式
アップルテレビが採用。
アップスはモバイル機器側に設置され、テレビ画面は放送番組のみが表示される。アップルはエアープレーへと発展させている。
ヤフーコネクトテレビやパナソニックやソニーや韓国サムスンなども、エアープレーに向かって進み始めている。

スマートテレビで稼ぐ4つのビジネスモデル

STBなどのハードウェアを視聴者に販売して稼ぐ。
(Roku、Boxee、ポップボックスなどが挙げられる)
PFなどを他社に提供するライセンス料で稼ぐ
(ヤフーコネクトテレビやオペラ・ソフトウェア、Vudu、マイクロソフトのメディアルームなど)
広告で稼ぐ
(グーグルなど)
サービス(映像、音楽、アップスなど)のマイクロ取引で稼ぐ

有料テレビの取り組み

英国スカイ
マイクロソフトと組み、XBOX360をセットトップボックスに活用したスマートテレビのサービスを「オープンIPTV」で開始した。また、モバイル視聴をチャネル売りにした。
ユーバースTV
米国の通信企業AT&Tが提供する有料テレビサービス。スポーツ中継に力を入れ、効果的なアップスを提供した。
ディレクTV
米国衛星放送のトップ企業。テレビアップスの展開に熱心で、TVアップスと呼ばれるテレビアップストアを立ち上げた。
ファイオスTV
ベライゾンコミュニケーションが提供するサービス。「バザール」と呼ばれるアップストアを立ち上げた。

2011年6月12日日曜日

key-valueストアについて

Software Design (ソフトウェアデザイン) 2010年 02月号より。

key-valueストアとは

key-valueストアとは、
キーと値の組み合わせを書き込み、キーを指定することで値を読み出せるデータベース管理ソフトウェア。

key-valueストアの強み

一般的に、次の特徴がある。

高い性能
高いスケーラビリティ
高い可用性(含耐故障性)

key-valueストアが割り切っていること

シンプルな問い合わせ方法(問い合わせ方法がキー1つの指定)
細かい単位に限られたatomic(不可分)な読み書き。
つまり、楽観的(optimistic)なトランザクション処理。
多くのkey-alueストアは、CAS(compare-and-swap)という条件付き更新要求を受け付ける
複製間のゆるい整合性
多くのkey-valueストアでは整合性モデル(consistency model)でいうeventual consistencyというところまで緩めている。
つまり、どの複製を読むかによっては更新前の値が読み出されるのを許容、しかし、「いつかは必ず(eventualy)」更新後のデータは全ての複製に伝わる

key-valueストアの使いどころ

上記の強みを活かせ、割り切った点に目を瞑れる場合というコト。

各種key-valueストア

Flare
開発者:藤本真樹(twitter)
kumofs
開発者:古橋貞之(twitter)
ROMA
開発者:西澤無我(Facebook)
Tokyo Cabiet/Tokyo Tyrant
開発者:平林幹雄(twitter)
Coherence開発者:Oracle
Dynamo
開発者:Amazon 社内で利用
これについてのブログがありました(「Dynamo: Amazon's Highly Available Key-value Store」のまとめ | Akito's IT技術メモ)
Kai
開発者:OSS
AppFabric
Microsoft社の商品
Voldemort
開発者:LinkedIn社発のOSS
WebSphere eXtreme Scale
開発者:IBM社の商品

UbuntuとWindowsのデュアルブートで、起動時の標準OSを変更するメモ

前提

Windowsが予めインストールされていて、後からUbuntuを入れている。

起動時の標準OSを変更する

Ubuntuのターミナルを起動して、下記のように入力

sudo gedit /boot/grub/grub.cfg

エディタが起動するので「menuentry」から始まる行を見つける。
デフォルトをWindowsにしたいのだが、Windowsの文字列が見つからない？！

Windowsの文字列が見つからないときは

下記のコマンドを入力すると、/boot/grub/grub.cfgと設定が更新され、さきのgrub.cfgに「Windows」が見つかりました。(ただ、自分のPCはWindows 7 なのだが、Windows 7 が2つと、なぜかWindows VISTAが1つ見つかった。。)

sudo update-grub

起動時の標準OSを変更する

/boot/grub/grub.cfg にて、「menuentry」から始まる行のうちデフォルトにしたいOSが何番目に書かれているかを覚えておく。
端末で下記を入力し、設定ファイルを開く。

sudo gedit /etc/default/grub

GRUB_DEFAULT=の値を、先ほど覚えたデフォルトにしたOSの順番から1を引いた数字に変更する。(ゼロベースってコトですね)
ちなみに、GRUB_TIMEOUTの値で、自動起動までの待ち時間を変更できる。

設定を反映する

下記のコマンド。

sudo update-grub

以上です

ブートローダに最初、Windowsがなかったときは少し焦りました。。

2011年5月10日火曜日

2011年5月9日に気になったニュース

2011年4月24日日曜日

Windows XP に入れているフリーソフト達

Windows 7 Professionalを買ったので

現在使っているXPに入っているフリーソフトをメモ。

フリーソフトたち

Skype | Skype
Folder Size | エクスプローラにフォルダ容量を表示する列を追加してくれる
Audacity | フリーの非破壊サウンド編集ソフト
eo | アーカイブファイルを簡単に解凍(展開)するソフトウェア
Music Studio Producer | DTM用のフリーソフト
TeraPad | シンプルなテキストエディタ
サクラエディタ | シンプルなテキストエディタ
Free Mind | マインドマッピング用のソフトウェア
Java SE | Javaの開発環境と実行環境
Eclipse | Javaなどの統合開発環境
Flash Builder 4 | Adobe AIRアプリケーションなどを開発するための統合開発環境
XAMPP | Apache、MySQL、PHPを一括してダウンロードできる

思ったより多くはないですね

2011年4月21日木曜日

2011年4月21日に気になったニュース

[CSS]最近のウェブ構築には欠かせない要件を備えたCSSのフレームワーク -The 1140px Grid | コリス

2011年4月20日水曜日

2011年4月20日に気になったニュース

2011年4月14日木曜日

2011年4月14日に気になったニュース

2011年4月13日に気になったニュース

iPad2の前面カメラをセンサーに視野角を計算し、メガネ不要の３Dを実現【湯川】 |
TechWave

2011年4月12日火曜日

PHPのコーディング規約

2011年4月12日に気になったニュース

2011年4月11日月曜日

2011年4月11日に気になったニュース

2011年4月10日に気になったニュース

2011年3月31日木曜日

2011年3月31日に気になったニュース

2011年3月11日金曜日

2011年3月10日に気になったニュース

2011年3月10日木曜日

2011年3月9日に気になったニュース

2011年3月8日火曜日

2011年3月8日に気になったニュース

2011年3月7日月曜日

PHPのCGI版とモジュール版についてネットの記事を読んでみた

とても簡単に言うと、メリデメは以下のよう。
モジュール版

メリット:Apacheのプロセスの中で実行されるため、CGI版と比較してパフォーマンスが早い
デメリット：Apacheのプロセスの中で実行されるため、問題のあるプロセスが分からない

CGI版

メリット:一つ一つプロセスとして立ち上がるため、問題のあるプロセスがすぐに分かる。またそのプロセスをkillすれば解決。
デメリット:一つ一つプロセスとして立ち上がるため、モジュール版と比較してパフォーマンスが遅い

2011年3月7日に気になったニュース

2011年3月6日に気になったニュース

2011年3月6日日曜日

2011年3月5日に気になったニュース

2011年3月5日土曜日

2011年3月4日に気になったニュース

2011年3月4日金曜日

2011年3月3日に気になったニュース

2011年1月19日水曜日

【ジョーク】ジョークRFC

ジョークRFCなるものがあるんですって

本を読んでて知った。
ジョーク RFCに日本語訳リンクが載っています。
RFCは割と真面目な団体と思ってたんですが、そうでもないんですね。

「418 I'm a teapot」ってなかなか正気の沙汰ではないｗ

2011年1月18日火曜日

URLの設計

Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus) を読んで。

良いURLとは

以下のようにまとめられていた。

URLにプログラム言語依存の拡張子を利用しない(.pl, .rb, .do, .jspなど)
URLに実装依存のパス名を利用しない(cgi-bin, servletなど)
URLにプログラミング言語のメソッド名を利用しない
URLにセッションIDを含めない
URLはそのリソースを表現する名詞である(「add～」など、動詞のパスが入るのは避けるべき！)

これに、HTTPのメソッド(GET, POST, PUT, DELETEなど)を組み合わせてリソースへのアクセス方法を設計していくのがいいとされています。

でも実際GETとPOSTしか使っていないのが実情ですが…。

2011年1月17日月曜日

【Code Kata 翻訳その2】空手チョップ！

原文はCode Kata Two - Karate Chopです。

Code Kata Two - 空手チョップ！

バイナリチョップ(要するに、二分探索法)では、順番に並んだ値の配列の中での、目的の値の位置が分かります。
値を調べる度に考慮する値の件数を半分にしていくので効率的です。
最初のステップで、目的の値は、配列の前半にあるのか後半にあたるのかが決まります。次のステップでは、先ほどの前半or後半の中の半分についてだけ考えればよく、更に前半と後半に分かれます。目的の値が見つかるか、木を全て探索し終われば手順は完了です。二分探索法はCSの中で一番好きな講義です。

このカタは明解です。あなたの好きなプログラム言語とテクニックを使って、二分探索法ルーチンを実装して下さい。ただし、後述の仕様に則って下さい。
実装できた次の日には、全く違うテクニックを使ってもう一度実装してみてください。次の日も、次の日も。。まるで異なる二分探索法の実装が5つできるまで続けて下さい。(例えば、古典的な繰り返しアプローチや、再帰処理や、配列の中を回す関数、などが考えられます)

目的
このカタは3つのゴールに分けられます。

それぞれのアルゴリズムをコーディングすることによって、出会った失敗の種類を記録しておくことができます。二分探索法は境界条件や植木算エラーを鍛えるのに適した問題です。日が経つにつれ、これらの失敗を起こす頻度が少なくなっていくと思います。(そしてそれは、一つのテクニックから学んだのでしょうか、それとも複数の異なるテクニックでコーディングしたからでしょうか？)

あなたが選択したテクニックの優劣について分かっていますか？本番用のコーディングに最も適しているのはどれでしょうか？書いていて一番面白かったコードはどれでしょうか？プログラムを動かすのに一番苦労したのは？そして、これらの問いについて、「なぜそうなのか」を考えて見てください。

5つもの二分探索法のアプローチを考えるのはかなりきつかったでしょう。4つ目と5つ目のアプローチはどのようにして考え付きましたか？突飛なニューロン脳細胞を発火させるために、どんなテクニックを使いましたか？

二分探索法の仕様
二分探索法のメソッドを記述するのには「目的の値」と「ソート済みの整数の配列」の2つが必要です。このメソッドは目的の値が配列の何番目に位置するかの整数(ゼロベース)を返します。が、目的の値が配列の中になかった場合には「-1」を返却します。論理的にこんな感じで記述できるでしょう。

chop(int, array_of_int) -> int

配列の要素数は100,000未満でよいコトとします。このカタでは、処理速度やメモリのパフォーマンスについては考慮しません。十分なRAMで十分な速度でアルゴリズムが動いているというコトにしておいてください。

コードカタの筆者が実装するときに使用したテストコードです。自由にケースを追加してくれていいです。このテストでは、配列の添え字が0から始まることを担保しています。このテストケースをあなたの選択した言語に合う形にするには、グローバル検索とグローバル置換が何回か必要になると思います(たまたまRubyを選択していたら、その限りではないですが)

def test_chop
assert_equal(-1, chop(3, []))
assert_equal(-1, chop(3, [1]))
assert_equal(0,  chop(1, [1]))
#
assert_equal(0,  chop(1, [1, 3, 5]))
assert_equal(1,  chop(3, [1, 3, 5]))
assert_equal(2,  chop(5, [1, 3, 5]))
assert_equal(-1, chop(0, [1, 3, 5]))
assert_equal(-1, chop(2, [1, 3, 5]))
assert_equal(-1, chop(4, [1, 3, 5]))
assert_equal(-1, chop(6, [1, 3, 5]))
#
assert_equal(0,  chop(1, [1, 3, 5, 7]))
assert_equal(1,  chop(3, [1, 3, 5, 7]))
assert_equal(2,  chop(5, [1, 3, 5, 7]))
assert_equal(3,  chop(7, [1, 3, 5, 7]))
assert_equal(-1, chop(0, [1, 3, 5, 7]))
assert_equal(-1, chop(2, [1, 3, 5, 7]))
assert_equal(-1, chop(4, [1, 3, 5, 7]))
assert_equal(-1, chop(6, [1, 3, 5, 7]))
assert_equal(-1, chop(8, [1, 3, 5, 7]))
end

2011年1月6日木曜日

【CSS】display属性について

display属性の継承について

仕事で詰まったので調査をします。

displayプロパティ(しらぎくさいと)を見ると、display属性は下位の要素には継承されないらしい
以下、引用。

displayプロパティは、上位要素から継承されません。

ここで疑問。

最初にページが描画されたときは継承しないのか
JavaScriptで動的にdisplay属性を操作したとき、その子要素はどうなるのか

この辺りを調査します。

長文なので結論から書きます

結論。

最初にページが描画されたときは継承しない
JavaScriptで動的にdisplay属性を操作したとき、その子要素のdisplay属性には影響はない

サンプルコードはこんな感じのを使用します

HTML(サンプル1とする)

<a href="#" id="a">
 <img id="img" src="http://example.com/example.jpg"/>
</a>

aタグ、imgタグのdisplayをちょこちょこ修正して調査していきます。

描画時点のaタグ、imgタグのdisplay属性の値は、以下のようなJavaScriptで調べます。

alert("aタグのdisplay属性の値:" + $("a").style.display);
alert("imgタグのdisplay属性の値:" + $("img").style.display);

function $(id){
 return document.getElementById(id);
}

最初にページが描画されたときは継承しないのか

【まずはサンプル1で検証】
予想。

aタグはインライン要素なので、描画された時点では display:inline; となっているハズ
imgタグもインライン要素なので、描画された時点では display:inline; となっているハズ

結果。

	aタグのdisplay属性の値	imgタグのdisplay属性の値
IE7	値なし	値なし
Firefox 3.6.8	値なし	値なし
Google Chrome 8.0	値なし	値なし
Opera 11.00	値なし	値なし

予想外。
display属性の値は明示的にセットしないと、JavaSriptでは何も取得できないようです。

【aタグをdisplay:block;とするとどうなるのか】
HTML(サンプル2とする)

<a href="#" id="a" style="display:block;">
 <img id="img" src="http://example.com/example.jpg"/>
</a>

予想。

aタグは、描画された時点では display:block; となっているハズ
imgタグは、描画された時点では display:値なしとなっているハズ

結果。
予想通り。

aタグをdisplay:none;としても、上記と同様の結果になりました。

JavaScriptでdisplay属性を操作したとき、その子要素はどうなるのか

aタグのdisplay属性をJavaScriptで操作したあと、imgタグのdisplay属性を確認します。

【HTMLサンプル1で検証】
以下のJavaScriptを使用します。

//aタグのdisplay属性をblockにしてからimgタグのdisplay属性を確認
$("a").style.display = "block";  

alert("imgタグのdisplay属性の値:" + $("img").style.display);

function $(id){
 return document.getElementById(id);
}

予想。

上位のdisplay属性は継承されないので、imgタグのdisplay属性は値なしとなる

結果。
予想通り。

aタグのdisplay属性をnoneに変更しても、結果は同じでした。

結論

最初にページが描画されたときは継承しない
JavaScriptで動的にdisplay属性を操作したとき、その子要素のdisplay属性には影響はない

ただここでもう一つ疑問が。
HTMLサンプル3

<a href="#" id="a" style="display:none;">  <!-- display:none; -->
 <img id="img" style="display:block;" src="http://example.com/example.jpg"/>  <!-- display:block なのでこれは表示されて欲しい -->
</a>

としたときに、imgタグの画像が表示されて欲しいのに、表示されない。

またもっと見て行きます。

登録: 投稿 (Atom)