今回ファイルを選択してあげている所をドラッグアンドドロップでファイルを指定して上げたいという要望を受けて対応しました。
jqueryさえあれば簡単に出来ちゃうので一番シンプルなサンプルを作ってみました。
続きを読む ドラッグアンドドロップでファイルをアップロードする
カテゴリー: Ajax(JavaScript)
JSONで画像データを送信する方法
JSONで単純にファイル名を渡しても、当然ファイルのデータは送ることができません。
そのような場合は、base64_encodeを使って送りましょう。
このサンプルでは、JAVAScriptの時点でPHPのbase64_encodeを使用してデータ化した文字列を送り
受けて側で、base64_decodeしてファイルへ保存で渡すことが可能です。
続きを読む JSONで画像データを送信する方法
jQueryを用いた気持ちのよいインタラクションとフェードインを考える
気持ちの良いデザインを考える
Webデザインについて再考する時間があったので、インターフェースの心理学やUI GRAPHICS等の本を読んでどんな事がサイトをデザインする時に人を魅了できるかを勉強してみました。
その中で、能動的に選んでいる気でいても、実は反応であったり無意識的に動かされている事が多いという事を学びました。
では、何をもって人は無意識的に動かされるか、という点で考えた時に「ユーザーが何か起こした事によって得られる反応（＝インタラクション）を気持ちの良いものにする」事で、自然と楽しい気持ちになったり、もっと触ってみようという気持ちになって、より能動的な働きとして変えていけるんではないかと考えるようになりました。
インタラクションとは
例えば、ソフトウェア、各種製品、携帯機器、環境、サービス、ウェアラブルコンピューティング、組織自体などのシステムに適用される。インタラクションデザインは、人工物やシステムのユーザーへの反応を振る舞い（インタラクション）として定義する。IaD または IxD と略記されることもある。システム開発においてユーザーの人力操作に対するシステムからの適切な反応を設計することで利用目的に合致した両面転移や、グラフィカルユーザーインターフェース（GUI）要素の肖然な振る舞いをデザインする専門的な作業である。
引用：wikipedia
前述の「ユーザーが何か起こした事によって得られる反応」をインタラクションといい、システムにおけるView部分、Webサイトでいうリンクやボタンで表現される入力部分のみならず、画像や文字などの表示部分（視覚的に入力する）をより適切なデザインを施す事で、そのシステム自体をより良いものに見せるという点で、現在注目されている分野であります。
イマドキのWebサイトは、ボタンにマウスをホバーするとふわっと色が変わる事や、画像ギャラリーで画像が、自動的にスライドして見られるスライダーなど動的である事が標準となってきております。
jQueryやJavaScriptが持てはやされているのは、この「当たり前に動く」仕組みを実現するのに不可欠なプログラミング言語で、昨今では、HTML + CSSに加えて、JavaScriptができる事がデザインという分野で求められる傾向にあります。
気持ちいい画像の表示方法を考えてみる
前置きが長くなりましたが、本題はここからです。
「画像を表示させる」というWebサイトでは当たり前の事象についても再考してみました。以下のDEMOはAJAXにて画像データを取得して表示するサンプルですが、表示のさせ方を4パターン用意してみました。
※Chrome、Firefoxでの動作の確認をしました。
See the Pen AJAXを使った画像読み込みの一工夫 by koka (@kokaben) on CodePen.
画像を表示させる方法
画像は画像サイズによって表示までの速度がマチマチになる事や、画像データを取得している時でも他の作業ができるように、バックグラウンド読み込み処理を行いながら用意ができたものから表示させる非同期処理を用いるのが現在の主流です。
当サンプルでは、画像を裏で読み込ませてメモリに展開された時点で、表示させるという方法を用いております。
「すぐ表示」ボタンは、別段処理を施さずに、用意できた順から表示するようになっています。
一番最速で表示させたい時はこの方法が良いですが、少し無骨に見えませんか？文字のみならばこの方法が一番良いかもしれませんがもう少し見せ方にこだわりたく思ってしまいます。
「フェードインする」ではどうでしょうか。
少し気持ちよくなった気がしませんか？少しずつ表示される事で少しワクワクするようなそんな作用が引き起こされていれば狙い通りです！
ただ、これが何百件だとどうでしょうか。「これはいつまで、どこまで表示されるんだろうか」と多少不安になったり、遅延処理を行っているので「少し遅いな」と感じてしまうんではないでしょうか。
表示する量や、場所を選べば気持ちよさのみの印象を与える事ができそうです。
表示する数と領域をあらかじめ見せる
「背景を付けて●●」のボタンが2つありますが、この手法は記事を書いている時期（2017年）によくみられる手法で、ボタンを押すとあらかじめ表示される領域の背景をグレーで表示され、そこに画像や文字を展開していく見せ方です。
この手法は、YouTubeのスマートフォン版を起動した時や、検索した時に見られたり、Googleの画像検索でスクロールしていった時に自動的に次の30件が表示される時に見られる手法をまねたものです。
「背景を付けてすぐ表示」ボタンの動きを見てみましょう。
タイミング的には「すぐ表示」で画像が表示されるタイミングで表示されて、そこから0.5秒後に画像が表示されるので、実質は「すぐ表示」の時より遅いのですが、先に領域が出る事で「ああ、ここに何か表示されるんだな」と頭が認識する時間が発生するので、そこまで遅いと感じないのではないでしょうか。
ただまだ、無骨に思えるので、それにフェードインを加えた「背景を付けてフェードイン」を試してみて下さい。
気持ちよくないでしょうか？
領域が決まって、そこから画像と文字のフェードインが起きながら、文字の領域はフェードアウトさせる事で、安定感のある面白くて気持ちの良い見せ方になったのではないかと思います。
感性に訴えたい
以上のサンプルは、必ずしもそんな気持ちになるかどうかは別の話で、私は「そういう風に狙った」というだけな話です。受け手の気持ちは千差万別と思われます。
併せて思うのは使いどころを見誤ったり、要らない所まで動きを付けまくっていると見づらいページになってしまうので、使いどころを見定める事は必要と思います。「コレが利いてて気持ちいいんだよなー」くらいがちょうど良いと思っています。
オーソリティーに受ける方法というのを模索しながら、より面白くてコストパフォーマンスに優れた見せ方をこれからも模索していくぞーと考えながら、日々勉強していこうと思います。
本日は曇天なり
前回の僕のブログが（フランス革命歴）時報だったから、電話番号似ているつながりと言うわけでもないですが、今回は天気予報を取ってくるという話があったので、そのときにやったことをメモしておきます。
天気予報情報はここ。OpenWeatherMap.orgを使いました。
https://openweathermap.org/
いろいろ英語で書いてあって苦手な人は大変ですが、とりあえず必要なことは
- Sign Upから登録
- API keysから文字列を持ってくる
だいたいこんなところです。Subscribeは今のところ必要ない感じです。（月額ですし）
こちら側でやる必要があることはだいたい、
- 持ってきた文字列を含むHTTPリクエストをURLに投げる
- JSONを受け取る
あとはお好きなように使う、といったところです。
/**
* 定数、配列定義
*/
//アクセス用APIキー
define('API_KEY','/*ここに取得したAPIキー*/');
//アクセス用URL
define('API_URL','http://api.openweathermap.org/data/2.5/forecast?units=metric&id=1853908&APPID='.API_KEY);//大阪のcity idを使用
/* HTTPリクエストを投げる感じのクラスHttpRequestも用意しておく */
/*ここから取得*/
$http = new HttpRequest(API_URL,HttpRequest::REQ_HTTP_GET);
$code = $http->sendRequest();
if($code!=200){
echo 'Error:データの取得に失敗した';
exit;
}
$rawWeather=$http->getResponseBody();
ここで、$rawWeatherの中身はこんな感じ
{
"cod":"200",
"message":0.021,
"cnt":39,
"list":[
{
"dt":1491793200,
"main":{
"temp":12.43,
"temp_min":8.35,
"temp_max":12.43,
"pressure":892.44,
"sea_level":1032.22,
"grnd_level":892.44,
"humidity":78,
"temp_kf":4.08
},
"weather":[{
"id":500,
"main":"Rain",
"description":"light rain",
"icon":"10d"
}],
"clouds":{"all":68},
"wind":{"speed":1.06,"deg":217.002},
"rain":{"3h":0.155},
"snow":{},
"sys":{"pod":"d"},
"dt_txt":"2017-04-10 03:00:00"
},
{ ...以下、3時間ごと5日分の予報... }
]
"city":{
"id":1853908,
"name":"Osaka",
"coord":{"lat":35.95,"lon":137.2667},
"country":"JP"
}
}
天気の内容はlist[n].weather.mainに、気温や気圧はlist[n].mainに出ています。list[n].dt_txtは世界標準時なので、日本時間では4月10日正午の天気ってことになります。URLにunits=metricをつけることで、気温の単位は摂氏として送られてきます。リクエスト文字列をいじると華氏にもできたりするそうです。
月額のないAPIだと1分間に60回までしか呼べないとかあったりしますけど、とりあえず試す分には十分でしょう。天気予報が必要になったら、こういう方法に頼れる、と言う話でした。
jQuery ガントチャート
ガントチャートが必要なシステムを開発するかもしれないので調査しました。
あまり需要がないのか難しいのかAjaxで編集まで出来る物はありませんでしたが、メモも兼ねて書いておきます。
Teamwork Gantt
かなり多機能。解析、改修が大変そうです。
jquery.ganttView
比較的シンプル。タスクの依存関係がないらしい。
タスクの依存関係等のカスタマイズ記事
dhtmlxGantt
シンプルで良い感じ。ライセンスがGPL
編集可能なガントチャートはこれぐらいしかありませんでした。
wdCalenderが本番サーバーで動かない
wdCalenderをローカル環境で動かしていて、実際本番環境にUPした時に動かなくなってテンパッタのでメモとしてブログに残しておきます。
症状としてはテスト環境では動くのに本番環境では動かないというもの。
jqueryに頼っているので実際動かないと、どう調査をしたらいいか分からずとりあえず、FireBugで追っかけていきます。
するとどうもテストでは値が入っている所に、本番では入っていないということが分かりました。しかもJSON形式のデータが・・・
JSON形式のデータ？？？んっ！！以前phpのjson_encodeはphpのバージョンに依存するなというのに、はまった事があるなということで調べるとビンゴでJSONが使えるPHPのバージョンは5.2以上ということ。
本番サーバーではphpのバージョンが5.1.6だったので早速5.1.6でもJSONが使えるように「http://www.softel.co.jp/blogs/tech/archives/973」を参考にサーバーの設定を変更！！
これで動くかなと思っていたのですが動かない・・・という事でもう一度デバッグ作業をしていきます。
今度はphpの記述部分をfwrite関数を使っていって1行ずつファイルにデバッグ文を出力して追って行きます。するとある関数で処理が止まってしまっている事が分かりました。
それはdate_parse関数なのですが調べてみると、この関数が使えるのはphp5.2以上との事でして、JSONと一緒やんという顛末でした。date_parse関数のところを独自の記述に置き換えると見事動いてくれました。
基本としてwdCalenderはphp5.2以上で使うもの。それ以前で使うときは動くように自分で調整をして上げる必要ありという事でした。
selectボックスを変更すると他の複数項目を自動的に変更するAjaxのサンプルソース
CakePHP開発にて、selectボックスの変更イベントで他の項目を自動的に変更するAjaxのサンプルのソースです。modelsとcontrollersの一部のコードにつきましては、割愛させて頂きます。本機能を追加するにあたっては、edit.php,samples_controller.php,ajaxskind.php,ajaxsitem.php,ajaxsmemo.phpのコードを参照して頂き、参考になれば幸いです。
Ajax郵便番号住所入力
日付の入力補助カレンダー
みなさん、WEBサイトで日付を入力するのって大変ですよね。
そこで、JavaScriptで現在稼働中のサイトでもすぐにカレンダーの入力が出来るようになる物を紹介したいと思います。
株式会社スプーキーズ様がSpookies LabsでProtoCalendarを公開されております。
デモはこちらで色々な入力フォームに使用できます。
デモの日本用のカレンダーの日曜が右端だったので日曜を左端に持ってくる書き方をメモっておきます。
引数を2つ指定するだけでした。
一つハマったのが、編集画面などでデータが「2008/11/22」ではなく「2008-11-22」のようになっていると入力フォームの初期値が消えてしまいました。
株式会社スプーキーズ様いい物をありがとうございます。
コードをホームページで表示（SyntaxHighlighter）入れてみました
これからこのブログでコードを表示する事が多くなるので、「SyntaxHighlighter」というのを入れてみました。
javascriptで出来ており、コードをそのままhtml上に貼り付けても大丈夫という物です。