CacooでTableViewを使う方法

sxchu_490307_poolbreak.jpg

ブラウザ上でサクサクとワイヤーフレームを作れる高機能作図ツールCacoo。前回紹介したとおり、iPhoneの画面部品もステンシルとして使うことが出来ます。

cacooで簡単にiPhoneワイヤフレームが書けるようになった – もぎゃろぐ


で、そのステンシルのなかに、グループ化されたTableView部品があるのですが。
cacoo2.png
ふしぎなことに、4列セット、真ん中二個に右矢印付きというセットで部品になっています。一列ごとの部品もあるのですが、これも、ある列は矢印付き、ある列はチェックマーク付きになっています。
この部品とぴったり同じ物を作りたい時はいいのですけど、そんなことは普通ないはずなので、Cacooさんに問い合わせたところ、対応方法を教えていただけました。

この部品、グループ化されているので、右クリックメニューから解除してあげれば自由に編集できるのだそうです。
cacoo4.png

言われてみればナルホドなのですが、気づかない時はどうにもならないポイントですね。
というわけでこれを使うと、こんなワイヤフレームを描くことが出来ました。

cacoo5.png

GoogleChromeでURL補完

この間開発合宿でお世話になったmsngの人のお悩み。

.bbpBox{background:url(http://a3.twimg.com/profile_background_images/3222957/bg.png) #ffffff;padding:20px;}

Fx だったらロケーションバーに “ap tw” などと入れたら http://apiwiki.twitter.com/ が候補に出てくるんだけど、Chrome でそういうのできないでしょうか。Wed Oct 27 03:59:22 via YoruFukurou

できたよ!
searchengnine1.png

アドレスバーで右クリックして、「検索エンジンの編集」を呼び出す。


searchengnine2.png

こんな感じで入力。%sを使って検索エンジンを登録するための機能だけど、使わなくても登録できるみたい。


searchengnine3.png

こんな感じで、キーワードとして登録しておいた文字列で呼び出すことが出来ます。


追記:残念ながら、求めていたのはこれじゃないらしい。AND検索までは聞いたことがないなぁ。

.bbpBox{background:url(http://a3.twimg.com/profile_background_images/3222957/bg.png) #ffffff;padding:20px;}

@mogya スペース区切りの AND 検索がしたいんです。”api” だけだとたくさん出てくるけど、Fx なら “api tw” だと api.twitter.com に絞られて便利なので。Wed Oct 27 04:19:07 via YoruFukurou

cacooで簡単にiPhoneワイヤフレームが書けるようになった

ドラッグドロップするだけで簡単にWEBアプリケーションのワイヤーフレームが書けるCacooがバージョンアップして、iPhoneの画面も描けるようになったそうですよ。
cacoo_iphone1.png
こんなふうにiPhoneのフレームや画面部品が用意されているので、ドラッグドロップするだけで、ブラウザっぽい画面ができあがります。
cacoo_iphone2.png
自分で用意した画像を貼り付けることも出来るので、地図の画像を貼り付けると、こんな感じに。
cacoo_iphone3.png

仕様書とか提案書にiPhoneの画面を書く時はとっても便利ですので、一度おためしあれ☆

HootSuiteで非公式Retweet

ブラウザから使える多機能twitterクライアントhootsuiteがリニュアールされましたね。

WS003.JPG

以前から要望されていた公式retweet機能に対応したり、スキン変更が出来るようになったりしました。あと、UIが日本語対応したのも今回からだっけ。

一気にがらっと変えたので、ついて行けない人が続出しているように見えます。
この手のリニューアルは、大胆にやり過ぎるとユーザー離れのきっかけになるので怖いところですね。
ボクは、しばらくたったら慣れるんじゃないかと思っているのですが。

それはさておき、新UIになって公式retweetが標準になったので、以前みたいにコメントが書けなくて戸惑っている人がたくさんいる模様。以前使っていた非公式retweetが使えるようにする方法をまとめました。
WS000.JPG

左上のフクロウをクリックすると、いろいろメニューが出てきます。「設定-初期設定」を開いて

WS001.JPG

「Twitterの公式リツイート」のチェックを外すと、以前と同様の非公式retweetが出来るようになります。

あと、がんばって日本語訳した人には申し訳ないのですけど、ボクはなんだか変な日本語がとても気になるので、言語選択を「English」にして使っています。

位置情報サイトのAndoroid対応まとめ

WMではGPSが効かないー とのお声をいただいたので、対応できるかな?と思って調べていたところ、なぜかモバイラーズオアシスがAndoroid携帯のブラウザでも動くようになりました。

Twitter/さきら:@mogya お、場所とれました。表示されました。便利です。

WindowsMobileでも動くようにしたいのですけど、安定してブラウザから位置情報を取得できる方法が見つかっていないので、今のところちょっと手が出せないでいます。

それはさておき。Andoroid端末に対応するために調べたページのまとめです。

エミュレーター

AndroidエミューレータでWebKitウェブブラウザを起動する手順:MediaTechnologyLabs(MTL):メディアテクノロジーラボ ブログ

を参考にインストールしました。

geolocation

AndroidのgeolocationでGPSを使う方法-冬通りに消え行く制服ガールは、夢物語にリアルを求めない。-subtech

にあるとおり、GoogleGearsが使えます。

Chromeなんかだと、何も考えずに google.gears.factory.create を呼び出せるのですが、Andoroidでは、
ResourcesandTools-GearsAPI-GoogleCodeにあるgears_init.jsをロードしてあげないと動かないので注意。最初これではまりました。

if(!navigator.geolocation) navigator.geolocation = google.gears.factory.create(‘beta.geolocation’);

っていうふうに書いておくと、 HTML5とgearsでコードを共有することができますね。

Andoroid携帯、手元にないので、どんなブラウザだと動くのかとか、全部の機種で動くのかとか自信がないです。モバイラーズオアシスにアクセスすると自動でAndoroid用ページにジャンプするはずなので、興味のある方は是非試してみて結果を教えてくださいませ。

html5 number inputで数字以外が入力できてしまう

HTML5になって、input要素にtype=”number”というのが指定できるようになる事になっていて。現行でも対応済みっぽい挙動を示すブラウザがいくつかあるんだけど、なんだか納得のいかない挙動。

↑100の後ろで、「a」とか押してみて?

opera.png←Opera9.8で試した結果
number inputというからには、数字以外を押しても無視される事を期待していたのだけれど、現に「a」って押したら「100a」になってしまう。

実験用HTMLファイル
test.html

上記で試した挙動は以下の通り。

  • Opera9.80:数字以外も入力できる。ただし、submitした時、数字以外が含まれていると、valueが空文字に置き換えられる。
  • Chrome4.1.249.1045:数字以外も入力できる。POSTもできてしまう。
  • FireFox3.6.2:数字以外も入力できる。POSTもできてしまう。
  • Safari4.0.5:数字以外も入力できる。POSTもできてしまう。

自分がなんか勘違いしてたりするかなぁ?

仕様見ると、「User agents must not allow the user to set the value to a string that is not a valid floating point number. (ユーザーエージェントは、ユーザーが妥当な浮動小数点数でない文字列をその値にセットできるようにしてはいけません。)」って書いてあるんだけど・・・

linodeに移行中

photo by aka_kath

さくらインターネットの7800円の専用サーバに長いことお世話になっていたのですが、Linodeの便利さに惚れ込んだので、サーバを引っ越し中です。

メールサーバは、先日、自前運用からGoogleAppsへ移行しました。

現在、*.mogya.comの各サービスを移行中。

というわけでこの記事は、MovableTypeの移行がうまくいっていることのテストを兼ねています。てへ。

これは怖い。USB充電器に仕掛けられたバックドア

energizer_duo.jpg

Energizer という米国の会社の電池充電器が、パソコンにバックドア(他人がパソコンをコントロールできるようにしてしまう悪意あるソフトウェア)を仕掛けてしまう事がわかったとして、警告が発表されています。

Energizer battery charger contains backdoor|ZeroDay|ZDNet.com

USBでパソコンにつないで充電式の電池を充電できるものなのですが、パソコン上でどれくらい充電できたか表示する機能がついていて、そのためにドライバが必要なのだけど、ドライバと一緒にバックドアもインストールしてしまうようになっていたみたい。

この製品は日本では普通手に入らないので、セキュリティ的には大騒ぎするほどの話ではないのですけど、とっても怖いことを暗示しています。
USB充電器を装ってパソコンにウイルスを仕掛けるようなデバイスを作ることが可能だと言うことです。

USBメモリなどは、挿した瞬間にソフトウェアを起動させる仕組みがあって、これを悪用したウイルスがいることはすでに知られています。

USBメモリで広まるウイルスへの対策|セキュリティ情報:トレンドマイクロ

でも、いまやUSBメモリなんてコネクタと同じサイズまで小さくすることが可能です。ということは、携帯電話の充電器のように見えるのに、実はUSBメモリで、そこにはウイルスが仕掛けられている!という凶悪なデバイスも、作ろうと思えば作ることが可能です。

たとえば、IT系の展示会で、どこかの企業のスタッフのふりをして上記のウイルス付き充電ケーブルをばらまいたら?
大多数の人は、「あらちょうどいい」と思ってパソコンにつないでしまうのではないでしょうか?

コストがかかるのでそうそうやる人はいないだろうとは思いますが、ソフトウェアと関係なさそうに見えるものにウイルスを仕掛けることが可能だというのは今まで頭になかったので、ちょっと気をつけておいた方がいいかと思いました。

ファイル一個コピーするだけで動くPHPテスト環境”lime”

 ファイル一個で動くphp用testunit”lime”。関西アンカンファレンスで紹介されていたのを思い出して使ってみた。

 
使い方(PHPが動くことを前提として。)
1.lime.phpをコピーしてくる
2.lime.phpと同じフォルダに、test.phpを書く。
<?php
   require ‘./lime.php’;
   $t = new lime_test(null, new lime_output_color);
   $t->ok(1+1===2);
?>
3.ブラウザでtest.phpにアクセス
 
lime.png
なんて簡単!
  $t->ok(1+1===2);
の行をコピペしていけばどんどんテストを追加することができます。
 
 
一応解説しておくと、limeはSymfonyというWEBフレームワークで使われているテストツールですが、そんなことは気にしなくても使うことができます。
上記の通り、ファイル一個includeするだけで使えるのが特徴。劣悪な開発環境によくある「アクセス手段はFTPとブラウザのみ、pearのライブラリすら使えません」という環境ですら動かすことができます。
コレは便利☆

AU biblio携帯のWifi設定

biblio.jpg
ヨメがAUのWifi対応携帯biblioを買った。
無線LANが使えることになっているのだけれど、自宅の無線LANにつながるようにするために二時間くらい苦戦した末、ようやくつながるようになった。
ググってみたら死屍累々みたいなので、やってみてわかったことをメモ。

  • AU初のWifi対応機種だから、きっと何か変なところがあるに違いないと疑ってかかったけど、結局、極端に変なところはなかった。
  • WEPの場合、認証方式で「認証なし」と答えるのがポイント。認証と暗号は全然別の話で、「認証なし」と答えても、そのあとで暗号化キーを聞いてきてくれます。
  • 暗号化キーは、16進数でも文字列でもどっちでもいいように処理してくれるみたい。両方試したけど、どっちを入れてもつながった。

あと、設定して、接続したら「アクセスポイントに接続されました」って出るのに、実際にサイトを見ようとすると「接続できません」って出ることがあった。携帯電話の電源を切って、再起動したら直った。
ちなみに、biblioは普通の携帯電話と違ってソフトキーなので、受話器のボタンを長押ししても電源が切れません。電源キーはサイドにあります。

参考になったサイト