上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
ふぉーんなハナシ:本当になぞるだけでOK???「Swype」で文字入力してみた - ITmedia +D モバイル
 Samsung電子が5月末から欧州や北米、アジア地域での発売を予定している(日本での発売は未定)Android端末「Samsung GALAXY S」は、Android 2.1やスーパー有機EL、1GHzプロセッサを搭載するなど、高いスペックが特徴だが、“文字入力方式”にも注目したい。Samsung GALAXY Sは「Swype」と呼ばれるタッチパネル用の文字入力方式を採用しており、画面のQWERTYキーボードを一筆書きのようになぞるだけで文字を入力できる。このほか、Windows Mobile 6.5搭載の「OMNIA II」もSwypeを利用できる。

指で一筆書きするだけ文字入力ができるというSwype。英語版ではすでに実用化され5月末に発売されるAndroid端末には実装されているそうです。画面をポチポチ叩かなくても文字が入力できるのはおもしろいですし、入力ミスも減りそうですね。現在、日本語対応のバージョンを2010年後半に提供する目標で開発しているみたいなので今後に期待。



スポンサーサイト
使用電力が一目でわかる - サンワダイレクトがメーター付電源タップ | パソコン | マイコミジャーナル

サンワサプライの直営ショッピングサイト「サンワダイレクト」は、ワットチェッカー付き電源タップ「700-TP1052DW」の販売を開始した。価格は2,980円。

前々からサンワサプライからワットチェッカーは販売されていましたが、今回 電源タップにワットチェッカーが内蔵されたモデルが発売されたそうです。普段何気なく使っている電気もこれで簡単に測定できて便利そうですね。ACアダプタや携帯の充電器なんかも使い易いように考慮されていてなかなか素敵な商品です。電気代が気になる人や節約を心がけている人は購入してみるといいかも。


ワットメーター 付き 電源タップ 700-TP1052DWワットメーター 付き 電源タップ 700-TP1052DW
サンワダイレクト

商品詳細を見る
Evernoteにガリガリ書いていたものをちょちょっと整形したものなのでやや荒削りですが、とって出しレポートです。ASKII.jpで連載していたWeb制作の現場で使えるjQuery UIデザイン入門の書籍であるWeb制作の現場で使う jQueryデザイン入門ということで内容としては連載内容ともややつながりのある内容で、対象としてはかなりビギナー向けのものでした。

表紙はなぜドーナツなのか? → お手軽 おいしい 手作り ということとjQueryのロゴにかけている

jQueryとは?
JavaScriptで書かれたライブラリ
write less, do more というコンセプトで書かれている
現在、jQueryがライブラリの中で一番使われている
断トツ 検索数が多い→情報が多い→Tipsも多い ので、使いやすい
Google Trendsのデータとしては「JavaScript」よりも「jQuery」のほうが人気

何ができるの?
JavaScriptで書かれているのでJavaScriptでできることの大半
最初としては HTMLとCSSの操作 を覚えるとよい
HTML/CSSの知識がある人はコードが理解しやすい

HTML/CSSの知識に自信がない場合は「現場のプロから学ぶXHTML+CSS」を読むと良い
→ HTML/CSSの知識をつけてからjQueryを使いましょう

jQueryの利用方法
まずはライブラリを読み込む
それからコードを書

セレクターの基礎
ある要素のHTMLやCSSを変更したい
ある要素? → これがセレクター

セレクタ色々
#nav IDセレクタと同義
.image Classセレクタと同義
h1,h2
dt+dd IE6対応してないけど、CSS level2で定義されているもの
CSS3までのセレクタが使える

dd;first → jQueryが搭載しているフィルタ
CSSだけでは選べないときはフィルタを使って指定

要素を操作?
$("#nav li").css("color","red");

メソッドチェーン
.でメソッドをつなげていくことができる

イベントの基礎
マウスクリックなどのイベントをトリガーにして処理を行うことができる

アニメーション操作
jQueryのすぐれたところでフェード、スライドアップ/ダウンなどのアニメーションが簡単に実装できる

jQueryを利用したサンプル
 アコーディオンパネル

ケーススタディ

  少ないスペースを有効活用する
  スライドギャラリー
  アコーディオン
  タブパネル
  カルーセルパネル

  テーブルをわかりやすくする 
  ストライプテーブル

  お問い合わせフォームのユーザビリティを向上
  フォームバリデーション

  ナビゲーションをわかりやすく
  ロールオーバー
  透過ロールオーバー
  ドロップダウンメニュー

  補足情報を表示する
  ツールチップ
  フローティングウィンドウ

  ページ遷移せずに情報を表示
  モーダルウィンドウ → LightBoxみたいなUI。画像をクリックすつと拡大表示する
  Ajaxページング

クライアントの声にこたえる最大のポイントはWebサイトごとのオプティマイズ
Webサイトの使いやすさまでデザインできる

Q : アコーディオン スライドアップ/ダウンを同時にやってるように見えますが、アップ→ダウンと順番に処理できますか?
A : できます。アップした後にダウンを処理したい場合は完了時にファンクションで書くことで可能

Q : サーバサイドとクライアントサイドで開発を分担する際の利点はなんですか?
A : 仕様をしっかりと決めることで 分業によって連携して、同時に作業できる

Q : そのときの注意点はありますでしょうか?
A : 将来的に必要になるであろう項目もサーバサイドから出力してもらうこと

Q : (すみません、ここの質問内容を失念しまいました。)
A : UIに関してはクライアントの要望というよりは、制作サイドが提案するという形ほうがよい。プロが逆提案したほうがよい

Q : prototypeができてjQueryできないことはありますか?
A : パッとは思いつきませんが、jQueryにもできないことがあるので JavaScriptで補完することができます

Q : prototypeとjQueryではどっちが高速なのでしょうか?
A : 実装による。でも、単純なことをやるようであればprototype.使い回しという面ではjQueryに軍配

FizzBuzz問題のJavaScriptコードを改良。

function FizzBuzz(){
	var n, buf, res="";
	for(n = 1 ; n <= 100; n++){
		buf="";
		if( n%3 == 0 ){ buf += "Fizz"; }
		if( n%5 == 0 ){ buf += "Buzz"; }
		if( buf == "" ){ buf = eval( n ) }
		res += buf + '<br />';
	}
	document.getElementById('result').innerHTML = res;
}

前回に比べて違うのは毎回 document.write() で書き出さなくなったのと、条件式を1つ省略しました。

ちょっとずつ小出しにしていた簡易フォトギャラリーもさすがにマンネリ化してきたので今回で最終回



JavaScript

$(function(){
	var imgURL = "http://blog-imgs-32.fc2.com/s/o/m/soma1080/";
	var mainImgs = ["twitter.png","google.png","flickr.png","facebook.png"];
	
	for( i=0; i<=mainImgs.length-1; i++){
		image = new Image();
		image.src = imgURL + mainImgs[i];
	}
	
	$('#item_list li img').click(function(){
		if( $('#main_view img').attr('src').indexOf($(this).attr('id')) == -1 ){
			thisImg = imgURL + $(this).attr('id') + '.png';
			$('#main_view img').before("<img src='" + thisImg + "' alt='' />");
			$('#main_view img').eq(1).fadeOut("fast",function(){
				$(this).remove();
			});
		}
	});
})

HTML

<div id="main_view">
<img src="http://blog-imgs-32.fc2.com/s/o/m/soma1080/twitter.png" width="200" height="200" />
</div>
<ul id="item_list">
	<li><img id="twitter" src="http://blog-imgs-32.fc2.com/s/o/m/soma1080/twitter-thumb.png" width="48" height="48" /></li>
	<li><img id="google" src="http://blog-imgs-32.fc2.com/s/o/m/soma1080/google-thumb.png" width="48" height="48" /></li>
	<li><img id="flickr" src="http://blog-imgs-32.fc2.com/s/o/m/soma1080/flickr-thumb.png" width="48" height="48" /></li>
	<li><img id="facebook" src="http://blog-imgs-32.fc2.com/s/o/m/soma1080/facebook-thumb.png" width="48" height="48" /></li>
</ul>

CSS

#main_view{
	height: 200px;
	width: 230px;
	margin-bottom: 10px;
	position: absolute;
	top: 10px;
	left: 10px;
	border: 1px solid #999;
	padding-left: 30px;
}
#main_view img{
	position: absolute;
}
#item_list{
	position: relative;
	top: 222px;
}
#item_list li{
	float: left;
	list-style: none;
	border: 1px solid #999;
	margin: 0 10px 0;
}

今までずっとPureJSで書いてきたんですがステップアップとしてちょっとした演出を付けたかったのでjQueryで書き直しました。
参考記事:jQueryで作る画像ギャラリーのチュートリアル

今回のポイントはなんと言っても画像が切り替わる際の演出です。今までのPureJS版ではクリックする度にパッと変わっていた画像がjQueryのfadeOut()を使うことによってふわっとオーバーラップして切り替わっています。詳細な動作については参考記事を御覧下さい。

今回も見た目はまったく変わっていませんがパフォーマンスがちょっとだけ向上



JavaScript

var imgURL = "http://blog-imgs-32.fc2.com/s/o/m/soma1080/";
var mainImgs = ["twitter.png","google.png","flickr.png","facebook.png"];

// 画像のプリロード
for( i=0; i<=mainImgs.length-1; i++){
	image = new Image();
	image.src = imgURL + mainImgs[i];
}

function change( pictNo ){
	document.mainImg.src = imgURL + mainImgs[ pictNo ];
}

※HTML,CSSは変更していないので割愛


変更点は5~8行目に追加された画像のプリロードで、これが追加されたことによってページが読み込まれた直後から画像の切替がサクサクと切り替わるようになります。前回のテコいれ版ではサムネイルがクリックされてから画像を取得する動作になっていたので初回クリックの反応がわずかに遅れる感じがしていたのですが、画像を先に読ませることによってストレスなく画像が切り替わるようになるわけです。

先日の超簡易版の画像を入れ替えるJavaScriptにちょっとだけテコ入れしました。


JavaScript

var imgURL = "http://blog-imgs-32.fc2.com/s/o/m/soma1080/";
var mainImgs = ["twitter.png","google.png","flickr.png","facebook.png"];
function change( pictNo ){
document.mainImg.src = imgURL + mainImgs[ pictNo ];
}

HTML

<div id="main_view">
	<img name="mainImg" src="twitter.png" width="200" height="200" />
</div>
<ul id="item_list">
	<li><img id="twitter" src="twitter-thumb.png" width="48" height="48" onclick="change(0);" /></li>
	<li><img id="google" src="google-thumb.png" width="48" height="48" onclick="change(1);" /></li>
	<li><img id="flickr" src="flickr-thumb.png" width="48" height="48" onclick="change(2);" /></li>
	<li><img id="facebook" src="facebook-thumb.png" width="48" height="48" onclick="change(3);" /></li>
</ul>

※CSSは変更していないので割愛


見た目の動作自体はまったく同じですが、JavaScriptの中身が変わっています。それに伴ってHTMLもちょっとだけ変更。


何が変わったかと言いますと

  • ・サムネイルはサムネイル用に小さい画像を用意
  • ・画像変更用のアドレスを配列で準備
  • ・引数は番号だけを渡す this.src → 数字(今回は0~3)


前回よりはちょっとクラスアップした感じでしょうか。
※前回同様li要素に設定されているsrc属性は実際のものとは異なります。


Doorganaizer


出かけるときはいつも持ち歩いているようしているのに家に帰るとテキトーな場所に置いてしまって「アレどこいった?」となった経験は誰しもあるもの。しかし、このDoorganaizerがあれば忘れ物もすることも無くすこともなくなりそうですね。自分は腕時計をよく迷子にするのでこれがあればその問題も解決しそうです。



マイクロソフト、「IE9」ではWindows XPを非サポートと発表 - インターネット - ZDNet Japan
 ラスベガス発--Microsoftは「Internet Explorer(IE)9」の出荷時期を明らかにしようとはしなかったが、そのリリースの時期にかかわらず、「Windows XP」上で動作することはないことが発表された。

 IEのゼネラルマネージャーDean Hachamovitch氏は、当地で開催のMIX10での記者会見において「最新のブラウザの構築には、最新のOSが必要とされる」と語った。

ついさっきtwitter経由で初めて知ったんだけれど、IE9ってXPがサポート外なんですね… なんでも『「Windows Vista Service Pack 2(SP2)」以降のOSのみで動作する。』そうな。しかも今ダウンロードできるプレビュー版でもイントーラを実行してもXPでは蹴られてインストールできないみたいです。IE9にしたいならVista買えってことでしょうか…



超簡易版の画像を入れ替えるJavaScript。画像を入れ替えるだけの本当に簡単なものです。


JavaScript

function change( pict ){
	document.mainImg.src = pict;
}

HTML

<div id="main_view">
	<img name="mainImg" src="twitter.png" width="200" height="200" />
</div>
<ul id="item_list">
	<li><img id="twitter" src="twitter.png" width="48" height="48" onclick="change(this.src);" /></li>
	<li><img id="google" src="google.png" width="48" height="48" onclick="change(this.src);" /></li>
	<li><img id="flickr" src="flickr.png" width="48" height="48" onclick="change(this.src);" /></li>
	<li><img id="facebook" src="facebook.png" width="48" height="48" onclick="change(this.src);" /></li>
</ul>

CSS

#main_view{
	width: 230px;
	border: 1px solid #999;
	margin: 10px 10px;
	padding-left: 30px;
}
#item_list li{
	float: left;
	list-style: none;
	border: 1px solid #999;
	margin: 0 10px 0;
}

仕組みとしてはli要素にonclickイベントで大きく表示されている画像のsrc属性を変更する というもので、引数にthis.srcとすることでli要素に設定されている画像のsrc属性を取得しています。なので、li要素に設定されているのと同じ画像が大きな画像として表示される形になっています。この方法はサムネイル画像を用意しなくてもいいという利点がありますが、表示させたい画像が大きければ大きいほどサムネイルの画像容量が大きくなるという欠点があるので実用には向かないかと… あくまで習作のものですね。
※注意 li要素に設定されているsrc属性は実際のものとは異なります。



CEO【Chief Exective Officer】
最高経営責任者/代表執行役。経営方針や企業戦略の決定を行う人で、一般的には会長あるいは社長を指す。ただし、後者は正しくは『代表取締役』であり、実際的には比喩的な意味で同一視されている。


COO【Chief Operating Officer】
最高執行責任者。CEOの決定を、実践していくための責任者を指す。主に、運営面の実務を担う。アメリカでは、会長がCEO、社長がCOOを兼務する場合が多いが、日本では実質的に、社長がCEO/COOを兼務している。


CFO【Chief Financial Officer】
最高財務責任者/ 財務担当役員。自社のファイナンス戦略の立案・執行に責任を有するトップマネジメント担当者。日本においては、経理・財務担当部署の長を指すことが多いが、アメリカでは経営陣の一員として何に経営資源を集中すべきかまで言及する。また、財務諸表の作成業務を担当し、外部の投資家への重い責任を担う。


CIO【Chief Information Officer】
最高情報責任者/IT担当役員。経営理念に合わせて情報化戦略を立案、実行する責任者。主に社内の情報システムや、IT資産の管理に携わるが、本来はITの活用による、経営方針の変革にまでおよぶ。


CTO【Chief Technology Officer】
最高技術責任者/技術担当役員。一般的には、技術部門や研究開発部門の長を差し、単なる研究の責任者にとどまらず、経営方針や、市場に合わせた研究開発の管理、最適化などを担当する。



略称だとついつい惑わされてしまうけれど、Chief 〇〇 Officerだから真ん中の言葉だけ着目したほうが覚えやすそうですね。



3大学でiPad無料配布:「紙の教科書は時代遅れに」(動画) | WIRED VISION
米国の3大学が、教育の改革を期待して、学生と教師に米Apple社の『iPad』を無料で配布する。

シートン・ヒル大学、ジョージ・フォックス大学、およびアビリーンクリスチャン大学は、現物を見る前にiPadを大量に先行予約していた。iPadで学習がどう変化するのか実験を行なう計画なのだ。

アメリカの3大学で教育の改革を期待して学生と教師にiPadを無料配布というニュース。「紙の教科書は時代遅れに」というタイトルになっているけれど、もうそろそろそんな時代が見えて来ているのかもしれない。今の時代、紙媒体の情報よりもデジタルデータの情報を見ている人が多いし、広辞苑のような教科書を大量に持ち歩くよりもiPad1つ持ち歩くほうが非常にスマートだ。それに例え教科書を忘れたとしてもネット回線からダウンロードしたりすることによってすぐに共有できる。


また、教科書の媒体がデジタルに変わることによっておもしろい変化が起こると思う。それは「動く」教科書。今までの教科書は2次元空間でしかなかったけれど、デジタル媒体に変わることによって3次元の表現ができるようになるし、状態変化なんかを動画で表現できるようになる。そういう表現の方法としても紙媒体の教科書というのは本当に時代遅れなのかもしれない。



アナログかデジタルか、考えている場合ではない | Lifehacking.jp
アナログ vs デジタル?

上の写真にもありますが、よく聞かれるのが「iPhone を使ってデジタルで情報を集めるのがいいのか? それともモレスキン手帳のようなアナログ手帳がいいのか?」という質問です。

私自身はこれに対する答えは、「両方」だと思っています。ふと思いついたアイディア、失われる寸前の微妙な記憶を捉えたいと思っている時に、「これはiPhone にいれるのか? それともモレスキン?」と考えている場合ではないのです。まずは手近なツールに捉えたいとおもっている情報がちゃんと蓄積されていることが先決。使い分けはそのあとです。

実際に両方で情報を取り始めても、ほとんど重複や互いへの混入がないということに気づくと思います。自然にその場で一番便利なツールを使っているだけでも、「写真・ボイス・スケジュール・タスクは iPhone」「アイディア・記憶はモレスキン」という具合に使い分けが見えてくるのです。混入が少ないということは、モレスキンをスキャンして iPhone に入れるといった必要性が少ないことでもあります。デジタルとアナログが問題なのではなく、キャプチャーしているかが問題だということですね。

この記事が公開されたとき自分もちょうど同じようなことを考えていました。自分の場合は「アナログ?デジタル?」ではなく「これ、メモする?しない?」という問いについてですが。人が「あのときメモしてとけばよかったー!」と思うときは大抵一度はメモしようと思ったのにも関わらず、メモする直前にやっぱりやめようと判断した内容であったりすることが多いです。


なので、メモするときに大事なのは考えずにメモすることなんじゃないのかなー と。
まずはメモして記録にしてから”それ”が必要かどうかを判断すればいいのです。


「どのツールでメモする?これってメモする必要があるの?」という迷いは誰もが持っていますが、これらは全てばっさりと切り捨てて「(そのとき)使えるツールでメモする」というスタイルのほうがうまくいくと思うんです。「メモしよう」と記憶を保持しようとしながら「判断しよう」と2つの動作を頭の中に混在させるよりも、メモしたいことを全部外に出してスッキリした頭で判断したほうが思考もクリアになります。


ちなみに自分は「デジタル?アナログ?」と聞かれたらアナログ派です。理由はアナログのほうが思っていることをすぐに記録にしやすいからです。



openclose

カテゴリ一覧

そま宗助

  • Author:そま宗助
  • タイ生まれのちょっと変な?日本人。
    農学博士の父とブラジル日系1世の母の間に生まれたため、普通の日本人とはちょっと違う視点で世界を見つめる男。

    最近、勉強会やカンファレンスにちょいちょい顔出ししてます。

    読書週間継続中?

    ストレングスファインダー
    1.収集心
    2.学習欲
    3.共感性
    4.指令性
    5.運命思考
プロフィール

※注意書き※
当ブログに掲載されているJavaScriptの動作確認はFirefoxでのみ行っております。他ブラウザでの動作に関しては保障できませんのでご注意ください。






1キロバイトの素材屋さん
フリーエリア
FC2カウンター

名前:
メール:
件名:
本文:

メールフォーム

Page Top

Powered by FC2 Blog |

FC2Ad

| Template Design by スタンダード・デザインラボ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。