ふじもんのブログ

みなさんこんにちは。

ふじもんです。

今回はとあるWebアプリケーションの案件でハマったことをメモ。

 

通常htmlやPHP等のボタンで値を送信する場合(formを使って)、

<input type="submit"...>

を記述して送信します。

今回はボタンではなく画像をクリックした時に値を送るので

<input type="image" src="abc.jpg" name="action" value="public" />

といった感じに書き換えました。(どの画像がクリックされたか判断し、GETで送信する処理)

Google Chromeでは通常に値が送信されていたのですが、FireFoxやIEでは値が送信されず、「action.x=7&action.y=12」といった値が送られていて、actionの値はNULLが送られていました。

そこで、inputタグの仕様について調べてみた結果、

 

“image ： イメージ付き送信ボタン（Src属性値のイメージを表示します。 Alt属性の指定も必須となります。データ送信時はクリック地点に関する情報も送られます。 非視覚系ブラウザにも対応させるため、送信ボタンを複数用意するか、 クライアントサイドイメージマップを利用して下さい）”

http://www.hajimeteno.ne.jp/html40/i/input-image.html

 

とのことでした。

 

結局スマートなやり方ではないのですが、

<form name="fuji" method="get" action="fujimonia.php">
<input type="image" src="abc.png" name="public" width="20" height="20"/>
<input type="image" src="def.png" name="trash" width="20" height="20"/>
</form>

といった感じで「name」属性の名前(送られる値はpublic_xやtrash_x等のため)で判別するようにしました。

 

ちなみに、submitボタンを画像にするのは数通りのやり方があって、

1. <input type="image"...
2. <button type="submit"...
　　　<img src="...
　 </button>
3. <img onclick="document.フォーム名.submit();"...

があるらしいですね。

 

ちなみに今作っているのはこんな感じのブログに似たポートフォリオシステム。

 

とりあえず走り書きですが。

以上，徒然なるままに。

ふじもん

 

[参考文献]

Webデザインのタネ

HTML4.01 Reference

inputタグ（type=”image”）の謎

みなさんこんにちは。

ふじもんです。

今日は前回の予告通りArduinoを使って遊んでみました。

Arduinoとは？

• Arduino(アルドゥイーノ)は、AVRマイコン、入出力ポートを備えた基板、C言語風のArduino言語とそれの統合開発環境から構成されるシステム。Arduino はスタンドアロン型のインタラクティブデバイス開発だけでなく、ホストコンピュータ上のソフトウェア（例えば、Adobe Flash、Processing、Max/MSP、Pure Data、SuperCollider）で制御することもできる。組み立て済みの基板を購入することもできるが、オープンソースハードウェアであり、ハードウェア設計情報のEAGLEファイルは無料で公開されており、誰でも自分の手で Arduino を組み立てることができる。

まあ簡単に言うと、PICと同じような事ができて、プログラムの書き込みがUSBにつなぐだけで簡単にできるツールキットです。

余談ですが、Arduinoの互換機のJapanino(ジャパニーノ)もあるそうですね。

表面

裏面

Arduinoも最近はインターネット上に文献がたくさんあるのでそっちを参考にしても良いと思いマウス。

今回は「Arduino UNO」という「最も標準的なArduino」を使いました。

では早速このArduinoで遊んでいきたいと思います。

 

1.Arduino IDEのインストール

Arduinoボードにプログラムを書きこむためにはIDE(統合開発環境)が必要になります。

下記のページから自分の環境に合ったファイルをダウンロードします。

Download the Arduino Software

今回のふじもとの環境はWindows 7 64-bitなので「Windows」をクリック。

ダウンロードしたファイルを解凍して、できたフォルダ「arduino-xxxx」(xxxxのところはバージョン番号で今回は「arduino-0022」)をどこか適当な場所へ移動させます。

(例)　「C:\software\arduino-xxxx」、 「C:\arduino-xxxx」

この理由はこちらをご覧ください。

※Macだと保存場所はアプリケーションフォルダが一般的らしいです。

あとはフォルダの中の「arduino.exe」を実行すればArduino IDEが起動されます。

※まだ実行はしないでください。まだやることがあります。

 

2.ドライバのインストール

※Windws 7の場合はドライバのソフトウェアを自動でインストールしてくれるためここの項目は飛ばしてもおｋです。

・Windowsの場合

ドライバをインストールするため、ArduinoとPCをUSBで接続します。

その際に、Windows XP(多分Vistaも)の場合はドライバの場所を聞かれるので、先ほどダウンロードしたArduinoフォルダの「\drivers\FTDI USB Drivers」を指定する。

Windows 7でインストールに失敗した場合、もう一度自動でインストールするか、手動でデバイスマネージャを開いてドライバソフトウェアを更新してください。その際にはArduinoフォルダの「\drivers」を指定してください。

 

・Macの場合

ソフトをダウンロード、解凍すると、Arduinoのアイコンと、PPC・Intel 用のUSBドライバパッケージが入ったフォルダが開きます。

Arduinoのアイコンをアプリケーションフォルダ内にドラッグ＆ドロップします。ドライバパッケージは、お手持ちのMacintoshにあわせて、PPCまたはIntelをダブルクリックすれば、インストールが始まります。

その後、Arduino基盤をUSBケーブルでMacに接続します。

 

以上でインストールは完了です。

 

3.シリアルポートの選択

まずArduinoとPCを接続したままデバイスマネージャを開きます(開き方がわからない場合はこちらの記事を参考にしてください)。

ポート（COMとLPT）にシリアルポートの一覧が表示されるので、そのツリーの中から、Arduino UNOの（）内の番号を確認します。

正常にインストールされている場合はArduino UNOにCOMポートの番号が設定されています。

ふじもんの環境ではCOM7になりました。

COMポートの番号がわかったら、Arduino IDE(Arduino.exe)を起動して、メニューの「Tools」→「Serial Port」でその番号と同じ番号を選択してください。

※COMポートの番号の確認でCOM10以上だった場合には、それが原因で通信に問題が生じる場合があるそうです。これについては公式サイトのトラブルシューティングを参照してください。

 

4.サンプルプログラム実行

では実際にArduinoを動かしてみましょう。

まずはArduinoにLEDを指します。

アノード(リード線が長い方)を「13」に、カソード(リード線が短い方)を「GND」に指します。

次にArduino IDE(Arduino.exe)を起動させて、サンプルプログラム1を入力します。

サンプルプログラム1

入力し終わったら、メニューの「File」→「Save as…」で適当に「arduino_sample1」と名付けて保存します(名前は好きな名前を付けても大丈夫です)。

※Processingがダウンロードされている環境ではProcessingの保存先(ドキュメント\processing)にデフォルトで保存されるようになっていました。特に問題はないので保存先はProcessingフォルダで大丈夫です。Processingをダウンロードしたい方は前回の記事の一部を参考にしてください。

保存したら「Verify」ボタンという▲が横になっているボタンをクリックしてコンパイルします。

コンパイルをしてエラーが検出されなければ、「Upload to I/O Board」ボタンをクリックしてArduinoに書き込みます。

するとArduinoの基盤にプログラムが書き込まれたため、後はPCに接続しなくても電源さえあればLEDが点滅します。

ね？簡単でしょ？

※実際に動作させるときはきちんと抵抗値やらを計算して抵抗をつけてください。

 

[おまけ]

こんな簡単なプログラムじゃなくもっと複雑なの作れって？

生意気な奴らめ。

では前回同様、外部出力を得てLEDを光らせるようなサンプルを作ってみます。

赤外線センサから距離の値を取得して、その値をLEDの光の強弱に変換するプログラムを作ってみました。

サンプルプログラム2

※回路はけっこう適当です。あまり参考にしないでください。

実行したプログラムはこのように動作します。

ちょっと見えづらいですが、マウスパッドを上下してその距離に応じてLEDの光の強さを決定しています。

ちょっと長くなりましたが、とりあえずこんなもんで。

ここ最近ハードウェアを久しぶりにいじってみて思ったのは、やっぱり私はソフト屋さん(ソフトウェア)なんだなと実感しました。

以上，徒然なるままに。

ふじもん。

 

[参考文献]

ARDUINO

projects : Biotope: Arduinoを準備します

建築発明工作ゼミ2008

Arduinoをはじめよう

Arduino – Reference

ArduinoのUSBドライバのインストール方法

みなさんこんにちは。

ふじもんです。

先日Phidgetsのインストールをプロジェクトの後輩に教えたところ、

「いや、自分らやりたいのこういうのじゃないんすよ。もっと空気読んでくれません？」

とお叱りを受けたので、今度はGainerについて記述したいと思います。

じゃあ早速Gianerって何？

• GAINERは、センサ（例：明るさや加速度など）やアクチュエータ（例：LEDやモータなど）とパソコンを接続するI/Oモジュールと、Max/MSPやProcessing用のソフトウェアライブラリからなる環境です。この環境を用いることで、モニター、キーボード、マウスといった通常のパソコンの環境に留まらない作品（インスタレーションなど）やインタフェースのプロトタイプ（場合によっては最終形まで）を短時間で作り出すことができます。

 

まあ簡単に言うとPhidgetsよりかは自由度が比較的高いけど、自分で回路組まないといけないからPhidgetsよりかは少し敷居の高いツールキットだよって感じです。

Gianerはインターネット上や書籍なんかでも文献がたくさんあるのでそちらを参考にしても良いと思いマウス。

また、Gainerは「Processing」、「Flash/ActionScript」、「C#」など様々な言語で扱うことができるのも一つの特徴かと。

では早速導入してみましょう。

[ふじもんの環境]

• Windows 7 64ビットオペレーティングシステム
• Processing 1.1

 

1.ドライバのインストール

まずは公式サイトからGainerのUSBドライバをダウンロードします。

GAINER.cc

この赤丸の中から自分の環境に合ったドライバをダウンロード。

ちょっと今回はリンクが切れてたっぽいのでその下の「もしこれらのリンクが切れている場合には、次のページから該当するドライバをダウンロードして下さい。」の下のリンクからドライバのダウンロードページに飛びます。

ダウンロードページに飛ぶと、下の方にダウンロードリンクが設置されているので自分の環境に合ったドライバをダウンロード(今回のふじもとの環境ではWindows 64-bit版をダウンロードしました)。

ダウンロードが終わったら下記の公式サイトのドライバのインストールマニュアルを参考にしてインストールします。

• Windows (Windows Vistaでもこちらの設定で動作確認済み)
• Mac OS X

※Windows 7の場合ドライバのインストールを自動でやってくれるため「1.ドライバのインストール」はやらなくても大丈夫でした(；´∀｀)

 

2.Processingのダウンロード

まずはProcessingをダウンロードします。

Zipを落として解凍すればそのまま使えます。

ダウンロードURLはこちら。

Download Processing.org

Java環境がある方は「Without Java」のバージョンを入れてもおｋです。

※少しでも自分の環境がわからないという方は赤丸の方をダウンロードしてください。

 

Zipをダウンロードしたらそのまま解凍。

※Processingの保管場所に日本語が入ってると不具合が起きると聞いたので「C:\processing」等に移動して使用してください。

後はフォルダ内のprocessing.exeを起動すれば動きます。

 

3.Processingの設定

まずは先ほどドライバをダウンロードしたページから、Processing用のソフトウェア・ライブラリをダウンロードします。

GAINER.cc

ProcessingでGAINER I/Oモジュールを利用するには、必要なファイルをProcessingのインストールフォルダにコピーする必要があります。

ダウンロードしたライブラリを展開し、以下のようにファイルをコピーします。

※Processingは「C:\processing」にインストールされていると仮定して話を進めます。

1. 「C:\processing\lib\keywords.txt」のバックアップをとる
   
2. 「libraries」　→　「C:\processing\libraies\」
   
3. 「reference」　→　「C:\Processing\reference\libraries\」
   
4. 「examples\gainer_examples」　→　「\マイドキュメント\Processing\」
5. 「lib」　→　「C:\Processing\lib」
   

次に、I/Oモジュール(Gainer)を接続した状態で、デバイスマネージャーを開きます。

ポート（COMとLPT）にシリアルポートの一覧が表示されるので、そのツリーの中から、USB Serial Portの（）内の番号を確認します。

(コンピュータを右クリックしてのプロパティ　→　デバイスマネージャー　で開けます)

ふじもんの環境ではCOM6でした。

COMポートの番号の確認でCOM3以外だった場合には、以降のサンプルプログラムを実行する際、COMポートの指定を必要に応じて書き直す必要があります。

これについては後述します。

 

4.サンプルプログラム実行

では実際に準備が整ったところでサンプルプログラムを動かしてみたいと思いマウス。

「processing.exe」を実行してProcessingを起動します。

「File」→「Sketchbook」→「gainer_examples」→「LED」を選択してサンプルプログラムを開きます。

サンプルプログラムを開くと、I/Oモジュール(Gainer)が接続されているのを確認して実行。

表示されるウィンドウの黒い四角をクリックするとGainerのLEDが光ります。

以上でちゃんとGainerが動いているのが確認できました。

※公式サイトでは、

「COMポートが3以外の場合はプログラムの

gainer = new Gainer(this);

を

gainer = new Gainer(this, COM6);

に書き換えてあげないといけない」

と書いてあったのだが、特に書き換えなくても実行できた。

エラーが出た場合はこちらを書き換えてみてください。

 

[おまけ]

こんな簡単なプログラムじゃなくもっと複雑なのよこせって？

生意気な奴らめ。

では外部出力を得てLEDを光らせるようなサンプルを作ってみます。

まずはブレッドボードとLEDと抵抗とジャンプワイヤを用意します。

そしたら抵抗の計算やら配線やら何やらを設定します(ちょっとずるして回路を簡素化しました)。

抵抗や電子回路の組み方に関してはLED抵抗器計算や抵抗器のカラーコードを参照してください。

※丁度良い抵抗がなかったため少し抵抗の値がおかしいです。ご了承ください。また、この回路を参考にする場合は自己責任でお願いします。

設定が終わったらレッツプログラミング！！

サンプルプログラム

実行したプログラムはこのように動作します。

ちょっと見えづらいですが、マウスカーソルが右に行くとLEDの光が強くなり、左に行くと弱くなっています。

また、白い四角から外に出るとLEDを消す仕組みになっています。

ちょっと長くなりましたが、とりあえずこんなもんで。

次はArduinoか…(；´Д｀)ﾊｱ

以上，徒然なるままに。

ふじもん。

 

[参考文献]

Gainerとはどういうものですか？

GAINER.cc

LED抵抗器計算

抵抗器のカラーコード

みなさんこんにちは。

ふじもんです。

今日はPhidgetsのインストールとサンプルプログラムについてメモメモ。

「Phidgetsって何？」という方のために。

• Phidgets（フィジェッツ）は、光センサやRFID、サーボモータなどの複数のセンサやアクチュエータをコンピュータにつないで制御したいときに便利なマイコンボードのことです。USBでPCに接続して使います。C/C++やFlash、Max/MSP、VB、Javaなどいろいろな言語をサポートしています。

まあ要するに簡単にプロトタイピングができるツールキットですよってことですね。

けっこうインターネット上にはPhidgetsに関する文献が少ないんですよねー。

やっぱりお値段高いからかしら？(´・_・｀)

フルセットでたしか500$ぐらい(；´Д｀)

まあそんなこんなでインターネット上に文献が少ないため私も昔苦戦したのでこれからのことを考えてメモメモ。

(TA用の資料作るのがめんどくさいから「このページ見せればよくね？」的な考えでは決してないよ☆(ゝω・)vｷｬﾋﾟ)

1.ドライバのダウンロード

まずはPhidgetsの公式サイトでドライバをダウンロードします。

http://www.phidgets.com/

上記のサイトに行って「Drivers」をクリック。

するとWindows、Mac、Linuxなど様々なOS用のドライバがあるので自分の環境に合ったドライバをダウンロード。

(今回はWindows XP 32bit環境にインストールするため、Windows用Phidget 21 Installer (32-bit)をダウンロードしました)

2.Phidgetsのインストール

ダウンロードしたファイル(Windowsの場合はexeファイル)を実行します。

英語で記載されていますが特に気にすることなく「Next」をクリック。

ここでは「同意する(I Agree)」にチェックを付けないと先に進めないため、チェックをつけて「Next」をクリック。

インストール先フォルダを選択して「Next」をクリック。

※Windows VistaやWindows 7の方は「Program Files」フォルダに設置するのではなく、何か適当なフォルダを作って(例えば「software」とか)そこに保存するようにしてください。

どうしてかという理由はこちらをご覧ください。

(例)　C:\software\Phidgets

設定が全て済んだら「Next」をクリック。

するとインストールが始まります。

インストールが終わるとインストール完了画面が現れるので「Close」をクリックしてインストールを完了させます。

3.Phidgetsの起動

Phidgetsのインストールが無事完了すると、トレイアイコンの中に「Ph」というアイコンが出現するので、それをダブルクリック。

「WebService」タブを開いて左下の「WebService Status」が「Running」になっているか確認します。

もし状態が「Stopped」なら、右下の「Start」ボタンをクリックして起動します。

以上でPhidgetsのインストール作業は終了です。

[おまけ]

じゃあ実際にPhidgetsを使って何か作ってみましょう！

今回はセンサの値を簡単なグラフで表現するプログラムを作ってみます。

言語はJavaです(｀・ω・´)

(C/C++、Flash AS3、VB.NET等その他言語でも扱えます。詳しくはこちらの公式サイトでご確認ください。)

Javaで開発する際にはEclipseという統合開発環境を使うことでPhidgetsのライブラリのパスの設定などを簡単に設定することができます。

なのでEclipseを使って開発します。

ダウンロード方法など詳しいことはこちらのサイトを参考にしてください。

Eclipse 3.6.2 インストールと基本操作

では準備ができたところで早速初めてみたいと思います。

まずはEclipseを起動して新規プロジェクトを作成します。

プロジェクト名を指定して「終了」ボタンをクリック。

作成したプロジェクトを右クリックして新規パッケージを作成します。

プロジェクトのプロパティを開きます(パッケージのプロパティでもおｋです)。

ライブラリのパスを指定します。

「Phidgets21.jar」というライブラリを指定したら「OK」をクリック。

次にPhidgetsをPCに繋ぎます。

あとは実際にプログラミング作業に入ります。

パッケージを右クリックして新しいクラスを作成します。

名前は適当に「ExampleWindow」とし、「完了」をクリック。

クラスを作ったらLet’sプログラミング！！！

サンプルプログラム

ではこのプログラムが実際にどういう動作をするのか動画でご覧ください。

ちょっと長くなりましたが、とりあえずこんなもんで。

以上，徒然なるままに。

ふじもん。

[参考]

Phidgets公式サイト

Eclipse 3.6.2 インストールと基本操作

みなさんこんちゃこんちゃ。

ふじもそです。

最近まですごくはまってた問題が解決したのでちょっとメモろうと思います。

その内容は前回の記事に近いのですが、「PHP5.3とCodeIgniter1.7.3でセッションが消える」というものでした。

本番用サーバにプログラムを移すとなぜか画面遷移した際にセッションが消えてしまっていました。

IE、クローム、Safari等でセッションが消えて、FireFoxだとセッションは残っていました。

初めはブラウザのクッキーとかの問題かなと思っていましたが、いろいろ調べても解決しませんでした。

一週間ぐらい悩んで悩んで頭が禿げ散らかる勢いでしたが、一つのことに気付きました。

そう、それは！！！

実は本番用サーバの時間が日本時間ではなく世界標準時に設定されていました。

日本時間の10時にセッションに値を登録しても実際には日本時間の1時に登録みたいなことになっていました。

それはセッションも消えるよね。

他の方ももしこんなことが起きたらまずはサーバの時間をチェックしてみては。

短いですがとりあえずこんなもんで。

以上，徒然なるままに。

ふじもん。

どうもふじもんです．

あけおめことよろです．

去年はいろいろありましたね．

いろいろまとめたいけどそれはけっこう難しいかもー．

とりあえず今日はPHP5.3.x系でCodeIgniterを使用したらハマった点をメモ．

今まで開発はPHP5.2.5で行ってました．

でも本番サーバがPHP5.3.4で，PHP5.2.5+CodeIgniter1.6.1だとなぜかセッションに値が入らない不具合が…
(画面遷移するとセッションが有効じゃないって怒られた？)

けっこう試行錯誤したんですが，何が原因かいまいちわからなかった．

そこで開発環境をPHP5.3.1(XAMPP1.7.3)+CodeIgniter1.7.3に変えたらすんなりいった．

今まで通らなかったOpenIDやOauth認証も通った．

一体なんだったんだろ．

あとPHP5.3.xはデフォルトでshort_open_tagがOffになっているのでそこでもハマった．

short_open_tagがOffだと「<?=$fuji;?>」って書いても反映されないんだよねー．

一つ勉強になった．

本当はもっと詳しく書きたいけど，あんまりそんな時間ないし，まとめてないからまた今度書きます．

今度はOpenIDやOauth認証のこともまとめたい！！

いつも通りｇｄｇｄだけど，久しぶりだからいいよね!?(*´∇｀*)　←　言い訳

てな感じで，ばいにー（´・ω・｀）ﾉｼ

[参考]
CodeIgniter1.7.1とphp5.3
[PHP][フレームワーク]CodeIgniterスレ
dfgallery PHP5.3での修正
short_open_tag

こんにちは。

ふじもんです。

新しいパソコン買いました！！

なので今環境再構築中。

64bitなのでやや苦戦してます。

さて、今日はWin7 64bitにXAMPPをインストールするよー。

まずはダウンロードだよー。
SourceForge

少し下の方にスクロールしていくと最新バージョンの1.7.3ﾊｹｰﾝ。

でも32bit版しかなくね？

仕方ないので「xampp-win32-1.7.3.exe」をダウンロード。

ダウンロードした.exeファイルを起動してインストール開始。

保存先は、Vistaの時に”Program Files”のセキュリティにやられたので”C:\”直下に置きます。

設定をいろいろ聞かれますが全部デフォルトにしました。

そしてインストール完了したらコントロールパネルを起動。

ApacheとMySQLが起動できたら一応成功です。

ここでApacheがスタートしない場合があります。

その時の解決方法もメモしておきます。

[解決方法]
「/xampp/apache_start.bat」を実行します。

コマンドプロントで「make_sock: could not bind to address 0.0.0.0:80」って返ってきた場合、ポート80が使用されていてApacheが起動できないことを意味しています。

つまりポート80を使用しているプロセスを停止してあげればApacheをスタートすることができマウス。

コマンドプロンプトから「netstat -oan」を打ち込んで実行。

ポートとプロセスの状態が見れるので、「[Loval Address]0.0.0.0:80」 を使用している [PID] を確認します。

タスクマネージャを開きプロセスタブを開きます。

さらに、　「表示」→「列の選択」で、「PID(プロセル ID)(P)」をチェックして表示します。

すると、プロセス一覧にPIDが表示されるので、先ほど確認したPIDを使用しているプロセスを特定し、そのプロセスを停止します。

まあ大抵はSkypeさんが邪魔してると思いますが、知らない名前のプロセスだった場合は自己責任で停止してくださいね。

後はもう一度XAMPPのコントロールパネルからApacheをスタートさせれば起動されるはずです。

ちょっと話が脱線した気がしますがXAMPPの設定は以上です。

あとは「http://localhost/」にアクセスしてXAMPPのページが表示されれば成功です。

さて、研究もちゃんとやらないとなー。

以上、つれづれなるままに。

ふじもん。

[参考記事]
XAMPPのWindows7 64bitへのインストール
XAMPPでApachが起動しない場合のわりと汎用的な調査・解決方法まとめ