先日、プライバシーマークを取得のための現地審査を受けました。
どうもヘッポコです。
その内容は・・・まぁ以下のサイトの記事を読んでしまえばその通りなんですが。
http://www.juas.or.jp/privacymark/sinsa.html
自分はシステム担当なのでシステムの内容をもう少し掘り下げて、ここで紹介したいと思います。
現地審査の全体の流れは・・・
１．代表者インタビュー
２．運用状況の確認
３．現場状況の確認
といった所です。会社の規模にもよるかもしれませんが、現地審査には５～６時間かかります。
審査員は2名でした。思っていたよりもご年配の方でした。
審査と言っても、審査員もそこまで厳しく問い詰めるような雰囲気ではありませんでした。
審査側も審査を通らせないようにするのではなく、通るために「しっかりやってますか？」
「ここはこうした方がいいので、なおしてください。」というような感じです。
基本的に審査に通らないという事は無いです。・・・というと少し違うかもしれませんが。
諦めなければ！と付け加えます。
要するに、指摘事項があると直してくださいと言われ。
直しました。
まだここがダメなのでもう一度・・・
の繰り返しみたいです。なので時間はかかるかもしれないですが、いずれは取れると。
現地審査もよほどひどい現地審査結果でなければ、再度行われる事はないそうです。
提出書類の修正や、不足資料の作成が指摘に出やすいみたいです。
それでは全体の流れの方に戻ります。
代表者インタビューは当然代表者が現地審査員にインタビューされます。時間は1時間弱くらい。
ここで聞かれるのは。
・御社はどんな会社？どんな事している？
・プライバシーマークは何のために取得？
・個人情報保護管理者、内部監査役にその人を任命した理由は？
などです。ここは省略。
次に運用状況の確認。
主に個人情報保護管理者に対して審査員からどんな管理してますか？という所の質問。
この時間が一番多いと思うので、個人情報保護管理者がとにかく大変です。
準備しなければいけないのは主に管理資料、預かった個人情報をこの資料で
こんな運用ルールで 管理してます。万が一の時はこのように対処しますというリスク対策表。
・・・などです。他にも年に一度社員に個人情報に対する教育・テストを実施しているという
エビデンス。 ・・・後は個人情報保護マネジメントシステム（PMS）に準じている事です。
この後に内部監査役に対しても質疑はありますが、割愛します。
内部監査結果と、ダメだった所、ダメだった所の後の対策、何を持ってOKとしたのか？などです。
そしてここまで終わると、いよいよシステム技術周りの質疑が開始されます。
ヘッポコの出番です。
資料として用意したのはネットワーク図のみでした。
資料をもとに、各サーバ（DB、WEB、メール）の場所、アクセスログ取得の有無、
アクセスログの確認頻度、データバックアップの有無、バックアップの取得頻度、
アクセスログおよびバックアップの削除タイミング・・・を主に聞かれました。
特に意識されていたのはサーバの場所でした。
社内、データセンター、レンタルサーバ、クラウド・・・特に何が良くて、何が悪いという事は
無いようですが、その環境において安全対策が取られているかを問われます。
サーバの場所はサーバ室などのセキュリティで管理された場所にある事などです。
レンタル、クラウドは利用してなかったので、問われませんでしたが、それ自体がNGという事は
ないそうです。重要なのは管理と情報漏洩等の安全対策 。
後はUPS（無停電電源装置）の有無ですね。要するに突然電源が遮断された時にサーバの
データが失われたりする事は無いか？という問いです。
自社で管理して利用しているのならばそれでいいのですが、大きな建物やデータセンターだと
それ自体で数時間程度の電力供給力を備えているので、その事実を把握しておき、
問いに答えれば良いです。
後は社員が利用するクライアント端末のセキュリティ面について。
ウィルスバスター等のアンチウィルスソフトの適用と適用されている場合はその更新頻度。
ソフトウェアのインストール・アップデートの管理は管理者のみに権限で制御しているなど。
ログインユーザのパスワード管理はパスワードの変更頻度はどのくらいか？このあたりは
AD（ActiveDirectory） を使って居れば一括管理できると思うので、その事を答えたら
いいと思います。設定を見せろと言われるかもしれませんが。
スクリーンセーバーは5分以内で必ず設定してください。これは重要な事です。
後は実際のサーバを見せてほしい、管理している場所などを見せてほしいという事が
あるので見せられる範囲で案内します。
全体としてはこんな所です。約30～60分程度。
ただWEBで個人情報の入力（お問合せ入力、アンケート、インターネットショッピング等）を
行っているともっと大変だと思います。
クロスドメイン、SQLインジェクション、SSLの利用等のWEBセキュリティ 対策を深く問われる
と思います。審査時間も延びるでしょう。
以上が、ざっくりですが現地審査の無いようです。
結果は当日、現地審査に来ていただいた審査員からまずは口頭で報告を受けます。
指摘事項がゼロという事は無いようですが、資料の修正などを少ししたら
OKです。等の連絡を受けます。
ここでOKが出たとしても、実はこの先に本審査があるのですが、この現地審査がOKとなれば
よほどの見落としが無い限り、本審査も通るそうです。
現地審査終了後、指摘事項の修正報告や少しのやりとりを経て、1ヶ月か1ヶ月半後には
プライバシーマークの利用許可が出ます。
長くなりましたが以上です。
会社の規模が大きかったり、色々なサービス展開をしていると審査も大変になるようなので
取得を検討されている企業は頑張ってください。
お疲れさまでした。
2013年9月21日土曜日
2013年8月31日土曜日
レスポンシブWEBデザインとパララックス
お久しぶりです。ヘッポコです。
2週間くらい間を空けてしまいました。。。その間、夏休みがあって実家に帰ったり、休み中にも少し仕事が入ったりと、何かとバタついてました。
さて、今回はつい最近レスポンシブWEBデザインに関わる事があったので、簡単にご紹介！
レスポンシブWEBデザインは、つまりはスマホやタブレットでWEBページを見た時にそのデバイスによって最適な表示をしてくれるデザインの事。
少し前はユーザーエージェントを判断して、携帯電話からのアクセスだったらページを分けて、CSSを分けて、なんてやってたような気がしますが、レスポンシブデザインは基本1ソースでマルチデバイスに対応するように作ります。
これによってどのデバイスからのアクセスでも同じページを見るので、URLが統一になりSEO対策にもなるという所。ではまずはソースを・・・。
metaタグにviewportというものがあります。これはiPhoneなどのスマホでWEBページを表示した時にものによっては表示が小さくなってしまったり、ページの右端、下に余白が大きく表示されてしまったりするのを防ぐものです。
そのviewportのcontentにプロパティを設定していきます。
"width=device-width"：横幅をデバイス毎に固定された値に設定する。
"initial-scale=1.0"：初期表示の拡大倍率を1.0倍にする。
"minimum-scale=1.0,maximum-scale=1.0"：拡大倍率の最大と最小を1.0倍にする。
"user-scalable=no"：ユーザー側の操作で、拡大／縮小を出来るように許可しない。
こんな所ですね。metaタグのname="viewport"ではこのような設定が出来ます。
で、重要なのはここからで、4つのCSSをその後で読み込んでいます。
default、pc、tablet、smart。そのままですが、デフォルトで適用させたいもの、PCだったら適用させたいもの、タブレットだったら、スマホだったらという物です。
default.cssはそのまま普通にCSSを記述してください。
ここに記述するのはPCでもタブレットでもスマホでも共通して適用させたい内容になります。
■pc.css
コメントに記述したように、この記述の中に書くのは横幅が769px以上の場合です。
768px以下の場合は、この中の記述は無視されます。CSS3のメディアクエリという技術ですね。
これがレスポンシブWEBデザインのメイン処理ではないかと思います。
■tablet.css、smart.cssも基本的に同様です。
こんなところですね。
結局横幅が小さくなるほど、後に読みこんだCSSが適用され、それまでのCSSを上書きしていくという事ですね。
それと注意ですが、このCSS3のメディアクエリはIEでは動作しません。
IE10だと動くみたいですねが、それまでのバージョンのIEでは普通にCSSを順番に適用させてしまいますのでご注意ください。
どうしても対応したい人のために、それ用のプラグインもあるみたいなので、探してみてください。
さて、ついでにもう一つ。
スマホ・タブレット対応するとどうしてもサイト全体が縦長になる。
スクロールさせるのもストレスなので、画面上部にページ内リンク用のメニューを常に表示させておきたい。
というケースに対応する方法です。
■HTML
重要なのは「position: fixed;」コレないとスクロールしても固定されないで流れていってしまうので。
次はJavaScriptでスクロールした時にこのmenuが画面の上部に常に居るように記述。
■JavaScript(jQuery使います)
これで、menuが上部に固定されます。後は、リンク先へジャンプした時に、多分menuのdivの高さ分ずれると思うので
飛び先の要素に対して以下のCSSを適用。これでぴったりした位置にジャンプするはずです。
今回のmenuは「height: 100px;」なので100px分の調整
以上です。長くなりました。
それではまた！
2週間くらい間を空けてしまいました。。。その間、夏休みがあって実家に帰ったり、休み中にも少し仕事が入ったりと、何かとバタついてました。
さて、今回はつい最近レスポンシブWEBデザインに関わる事があったので、簡単にご紹介！
レスポンシブWEBデザインは、つまりはスマホやタブレットでWEBページを見た時にそのデバイスによって最適な表示をしてくれるデザインの事。
少し前はユーザーエージェントを判断して、携帯電話からのアクセスだったらページを分けて、CSSを分けて、なんてやってたような気がしますが、レスポンシブデザインは基本1ソースでマルチデバイスに対応するように作ります。
これによってどのデバイスからのアクセスでも同じページを見るので、URLが統一になりSEO対策にもなるという所。ではまずはソースを・・・。
まずはヘッドの部分から説明します。レスポンシブWEBデザイン
metaタグにviewportというものがあります。これはiPhoneなどのスマホでWEBページを表示した時にものによっては表示が小さくなってしまったり、ページの右端、下に余白が大きく表示されてしまったりするのを防ぐものです。
そのviewportのcontentにプロパティを設定していきます。
"width=device-width"：横幅をデバイス毎に固定された値に設定する。
"initial-scale=1.0"：初期表示の拡大倍率を1.0倍にする。
"minimum-scale=1.0,maximum-scale=1.0"：拡大倍率の最大と最小を1.0倍にする。
"user-scalable=no"：ユーザー側の操作で、拡大／縮小を出来るように許可しない。
こんな所ですね。metaタグのname="viewport"ではこのような設定が出来ます。
で、重要なのはここからで、4つのCSSをその後で読み込んでいます。
default、pc、tablet、smart。そのままですが、デフォルトで適用させたいもの、PCだったら適用させたいもの、タブレットだったら、スマホだったらという物です。
default.cssはそのまま普通にCSSを記述してください。
ここに記述するのはPCでもタブレットでもスマホでも共通して適用させたい内容になります。
■pc.css
@charset "utf-8";
/*===============================================
●pc.css 画面の横幅が769px以上
===============================================*/
@media screen and (min-width: 769px){
/* ～PC適用CSS～ */
}
先頭に書かれているのは「@media screen and (min-width: 769px)」。コメントに記述したように、この記述の中に書くのは横幅が769px以上の場合です。
768px以下の場合は、この中の記述は無視されます。CSS3のメディアクエリという技術ですね。
これがレスポンシブWEBデザインのメイン処理ではないかと思います。
■tablet.css、smart.cssも基本的に同様です。
@charset "utf-8";
/*===============================================
●tablet.css 画面の横幅が768pxまで
===============================================*/
@media screen and (max-width: 768px){
/* ～タブレット適用CSS～ */
}
@charset "utf-8";
/*===============================================
●smart.css 画面の横幅が640pxまで
===============================================*/
@media screen and (max-width: 640px){
/* ～スマホ適用CSS～ */
}
こんなところですね。
結局横幅が小さくなるほど、後に読みこんだCSSが適用され、それまでのCSSを上書きしていくという事ですね。
それと注意ですが、このCSS3のメディアクエリはIEでは動作しません。
IE10だと動くみたいですねが、それまでのバージョンのIEでは普通にCSSを順番に適用させてしまいますのでご注意ください。
どうしても対応したい人のために、それ用のプラグインもあるみたいなので、探してみてください。
さて、ついでにもう一つ。
スマホ・タブレット対応するとどうしてもサイト全体が縦長になる。
スクロールさせるのもストレスなので、画面上部にページ内リンク用のメニューを常に表示させておきたい。
というケースに対応する方法です。
■HTML
■CSS
#menu{
height: 100px;
position: fixed;
width: 100%;
top: 0;
}
menuのidをメニューとすると、HTMLとCSSは上記のような形です。重要なのは「position: fixed;」コレないとスクロールしても固定されないで流れていってしまうので。
次はJavaScriptでスクロールした時にこのmenuが画面の上部に常に居るように記述。
■JavaScript(jQuery使います)
$(function(){
$(window).scroll(function(){
$('#menu').css('top',0);
});
});
これで、menuが上部に固定されます。後は、リンク先へジャンプした時に、多分menuのdivの高さ分ずれると思うので
飛び先の要素に対して以下のCSSを適用。これでぴったりした位置にジャンプするはずです。
今回のmenuは「height: 100px;」なので100px分の調整
.link_group {
padding-top:100px;
margin-top:-100px;
}
以上です。長くなりました。
それではまた！
2013年8月11日日曜日
連休前の期待と、連休後の後悔
昨日から夏休みに入りました。
怒られるかもしれないですが、9連休です。
長い休みの序盤は期待で胸いっぱいですが、終盤になって結局何もしてないな・・・って後悔するのが毎回の事です。毎回の事なのに改善出来てないのは対策が下手ということですが。
休みと言うだけで気持ちが抜けて、たるんでしまうのは休みだからなんでしょうが。
そもそも休みってそういうもんでしょう？
多分、連休終わりに後悔しないためには、計画表でも作って1つ1つ計画と結果を残していけば、最後にそれを見返して自分はこれだけやったのだ！・・・と実感できて変な後悔もしない。
それに対する一番の障害が手間でしょう。いっその事、自動モードみたいな設定して、自分の行動と結果をログに残してレポーティングまでしてくれるツールなんてあったらすぐにでも使いたい所。
Googleカレンダーとか、スケジュール管理ツールに自動的に記録されるレベルでも十分。
でも、今の状態ではGoogleカレンダーですらやっぱり手間。予定を作って、結果を残して。
ただ、おそらく来年頃に一般販売されるGoogleグラスが出ると、このあたりも少しは変わる。
音声で予定を作り、音声で結果を残す。それだけでも随分と手間は減るが、グラスの場合カメラやGPSを使って現在地や、今視界にあるものすら検知できるのだから、「○時○分に■■に行った」という記録は自動的に出来るだろう。
人の感覚や感情とシステムとの距離がグッと近くなるのが、Googleグラスの一番の魅力だと思う。
「目で見て、手を動かす」 ⇒ 「目で見て、声を発する」 ⇒ ？
Googleはたしか、恥ずかしがらずに人前で声を出そう！っていう事を言っていたと思うけど。
そのうち、目で見るだけ、もっと未来では、考えるだけで柔軟にシステムを操作する事が出来るかもしれない。・・・未来ですねぇ。
そう言えば、一昨年だったか、Androidのアプリで音声でボタンを押して、マイクで文字を読み取り、WEB検索、地図検索、電話発信、メール作成、スケジュール作成がすぐに出来るものを作りました。
・WEB検索ボタン ⇒ マイク ⇒ Google検索結果
・地図検索ボタン ⇒ マイク ⇒ GoogleMap検索結果
・電話発信ボタン ⇒ マイク ⇒ 電話発信画面起動（音声で読み取った番号が入力済み）
・メール作成ボタン ⇒ マイク ⇒ メール画面起動（音声で読み取った文字が本文に入力済み）
・スケジュール作成ボタン ⇒ マイク ⇒ スケジュール画面起動（音声で読み取った文字からスケジュールの日時と内容を入力済み）
凄くシンプルなアプリですが、特に最後のスケジュール作成機能は、普段の生活で活用しまくってました。普通にスケジュール作成するよりずっと手間がかからないから。
・・・スマホ変えてから、移植してないのですが。そのうち。
こういうものって結局、手間がかかってめんどくさくなって、入力しなくなる。ってのが消滅の一番の原因なんでしょうね。いかに、入力漏れを無くさせるか。考えたい所です。
さて、だいぶ脱線してしまいましたが、この連休終わりに後悔しないように、今年こそは何かしら対策を取りたいと思います。
既に夏休みに入っている人には、同じく後悔しないように。
夏休みまでもう少しの人は、もうちょっとだけ頑張りましょう！
夏休みなんてねぇーよ！って人は、・・・お疲れ様です。きっとあなたが頑張ってくれているおかげで、助かっている人がたくさんいるでしょう。体を壊さないように気をつけて、この暑い夏を乗り切りましょう！
では。
怒られるかもしれないですが、9連休です。
長い休みの序盤は期待で胸いっぱいですが、終盤になって結局何もしてないな・・・って後悔するのが毎回の事です。毎回の事なのに改善出来てないのは対策が下手ということですが。
休みと言うだけで気持ちが抜けて、たるんでしまうのは休みだからなんでしょうが。
そもそも休みってそういうもんでしょう？
多分、連休終わりに後悔しないためには、計画表でも作って1つ1つ計画と結果を残していけば、最後にそれを見返して自分はこれだけやったのだ！・・・と実感できて変な後悔もしない。
それに対する一番の障害が手間でしょう。いっその事、自動モードみたいな設定して、自分の行動と結果をログに残してレポーティングまでしてくれるツールなんてあったらすぐにでも使いたい所。
Googleカレンダーとか、スケジュール管理ツールに自動的に記録されるレベルでも十分。
でも、今の状態ではGoogleカレンダーですらやっぱり手間。予定を作って、結果を残して。
ただ、おそらく来年頃に一般販売されるGoogleグラスが出ると、このあたりも少しは変わる。
音声で予定を作り、音声で結果を残す。それだけでも随分と手間は減るが、グラスの場合カメラやGPSを使って現在地や、今視界にあるものすら検知できるのだから、「○時○分に■■に行った」という記録は自動的に出来るだろう。
人の感覚や感情とシステムとの距離がグッと近くなるのが、Googleグラスの一番の魅力だと思う。
「目で見て、手を動かす」 ⇒ 「目で見て、声を発する」 ⇒ ？
Googleはたしか、恥ずかしがらずに人前で声を出そう！っていう事を言っていたと思うけど。
そのうち、目で見るだけ、もっと未来では、考えるだけで柔軟にシステムを操作する事が出来るかもしれない。・・・未来ですねぇ。
そう言えば、一昨年だったか、Androidのアプリで音声でボタンを押して、マイクで文字を読み取り、WEB検索、地図検索、電話発信、メール作成、スケジュール作成がすぐに出来るものを作りました。
・WEB検索ボタン ⇒ マイク ⇒ Google検索結果
・地図検索ボタン ⇒ マイク ⇒ GoogleMap検索結果
・電話発信ボタン ⇒ マイク ⇒ 電話発信画面起動（音声で読み取った番号が入力済み）
・メール作成ボタン ⇒ マイク ⇒ メール画面起動（音声で読み取った文字が本文に入力済み）
・スケジュール作成ボタン ⇒ マイク ⇒ スケジュール画面起動（音声で読み取った文字からスケジュールの日時と内容を入力済み）
凄くシンプルなアプリですが、特に最後のスケジュール作成機能は、普段の生活で活用しまくってました。普通にスケジュール作成するよりずっと手間がかからないから。
・・・スマホ変えてから、移植してないのですが。そのうち。
こういうものって結局、手間がかかってめんどくさくなって、入力しなくなる。ってのが消滅の一番の原因なんでしょうね。いかに、入力漏れを無くさせるか。考えたい所です。
さて、だいぶ脱線してしまいましたが、この連休終わりに後悔しないように、今年こそは何かしら対策を取りたいと思います。
既に夏休みに入っている人には、同じく後悔しないように。
夏休みまでもう少しの人は、もうちょっとだけ頑張りましょう！
夏休みなんてねぇーよ！って人は、・・・お疲れ様です。きっとあなたが頑張ってくれているおかげで、助かっている人がたくさんいるでしょう。体を壊さないように気をつけて、この暑い夏を乗り切りましょう！
では。
2013年8月10日土曜日
オブジェクト指向JavaScript・・・を勉強してみる①
お久しぶりです。ヘッポコです。
8月に入ってしまい、夏なのか梅雨の再来なのかよくわからない気候が続きましたが、ここ最近は非常に・・・暑い。THE夏。
とりあえず元気にやれてます。
さて、今回は JavaScriptでオブジェクト指向を扱う場合の話。
実はヘッポコも勉強している身なので、少しずつ分けて書いていきます。
そもそもオブジェクト指向って？という状態の人は、説明を聞く前に何かしらの言語でオブジェクト指向にいきなり触れて実感した方がいいと思います。
オブジェクト指向を説明するのに、その概念が難しくとても話て伝わるものではないと思います。
逆に概念が全てと思ってもいいかもしれません。それさえ分かってしまえば言語別の実装も、あまり抵抗なく吸収できると思います。
ヘッポコは勉強中ですが、ヘッポコの会社の人達はJavaScriptなんて動けばいい程度に考えている人が多いです。WEB開発をゴリゴリやってない限りそれでいいのかもしれませんが。
基本的な所はおさえておくと何かあった時に役立つだろうと思います。
と言う事でまずはいきなりサンプルから。
単純なサンプルですが、複雑に作る場合も記述順序は同じだと思います。
最初にクラスなる部分の定義をして、各クラスのメソッドを定義して、最後にメイン処理に入ってオブジェクト生成などが流れていく。
ややこしくなってくるのが、サンプルの例でいうと、「Point.prototype = new 基底クラス」などprototypeに基底クラスを代入したりすると・・・まぁつまりはそういう使い方をしたい時が出てくる程構造化したい時はcallやapplyなども登場してきて難しくなってきます。 そのあたりを今後も勉強という形で残していきたいと思います。 しっかりと作れば、中身が複雑で理解できなくてもそれを使う側は、”なんとなく”という感覚的な所で上手く使えるようになってくるでしょう。これはjavascritpやプログラミングに関わらず、あらゆる事で言えると思いますが。 という事で、今日はここまで。
8月に入ってしまい、夏なのか梅雨の再来なのかよくわからない気候が続きましたが、ここ最近は非常に・・・暑い。THE夏。
とりあえず元気にやれてます。
さて、今回は JavaScriptでオブジェクト指向を扱う場合の話。
実はヘッポコも勉強している身なので、少しずつ分けて書いていきます。
そもそもオブジェクト指向って？という状態の人は、説明を聞く前に何かしらの言語でオブジェクト指向にいきなり触れて実感した方がいいと思います。
オブジェクト指向を説明するのに、その概念が難しくとても話て伝わるものではないと思います。
逆に概念が全てと思ってもいいかもしれません。それさえ分かってしまえば言語別の実装も、あまり抵抗なく吸収できると思います。
ヘッポコは勉強中ですが、ヘッポコの会社の人達はJavaScriptなんて動けばいい程度に考えている人が多いです。WEB開発をゴリゴリやってない限りそれでいいのかもしれませんが。
基本的な所はおさえておくと何かあった時に役立つだろうと思います。
と言う事でまずはいきなりサンプルから。
// プロパティにセットx,yをセット
function Point(x, y){
this.x = x;
this.y = y;
}
// Pointのメソッド
// var Point = function(){ /* */ };と書いてもよい
Point.prototype.length = function(){
return Math.sqrt(this.x * this.x + this.y * this.y);
};
// インスタンス化
var point1 = new Point(3, 4);
// lengthメソッド実行結果をログ出力
console.log(point1.length()); // 5
単純なサンプルですが、複雑に作る場合も記述順序は同じだと思います。
最初にクラスなる部分の定義をして、各クラスのメソッドを定義して、最後にメイン処理に入ってオブジェクト生成などが流れていく。
ややこしくなってくるのが、サンプルの例でいうと、「Point.prototype = new 基底クラス」などprototypeに基底クラスを代入したりすると・・・まぁつまりはそういう使い方をしたい時が出てくる程構造化したい時はcallやapplyなども登場してきて難しくなってきます。 そのあたりを今後も勉強という形で残していきたいと思います。 しっかりと作れば、中身が複雑で理解できなくてもそれを使う側は、”なんとなく”という感覚的な所で上手く使えるようになってくるでしょう。これはjavascritpやプログラミングに関わらず、あらゆる事で言えると思いますが。 という事で、今日はここまで。
2013年7月27日土曜日
JSONとJSONPのクロスドメイン利用・・・セキュリティにはご注意を
眠気マックスなヘッポコです！
今週はしんどかった。。。仕事の帰りは遅いし、帰ってからもやる事はあるし。
なので更新が少し滞ってましたね。
やらなきゃいけない事に押しつぶされそうでしたが、少しでもやりたい事と絡む機会があったので、今回はそんな内容です。
JSON（JavaScript Object Notation）やJSONP（JSON with padding）を利用する事は多いでしょうか？
Ajaxと絡めてWEBページで非同期な通信を実現させたい場合などによく使われると思います。
簡単に説明します。
JSON は{"プロパティ名":"値"}
JSONPはcallback({"プロパティ名":"値"})と書きます。callback()と書いたのは関数名で、コールバック関数と言われます。別にcallbackという名前じゃなくても、こういう書き方をするものをそう呼びます。
JSONはAjax、つまりXMLHttpRequest（HTTP通信を行うためのJavaScript組み込みクラス）を利用した時の返却結果によくつかわれます。
ただし、 Ajax（XMLHttpRequest）自身がクロスドメインでは利用できないため、外部サーバとのデータのやり取りがJavaScriptだけでは実現できない・・・という所で、JSONPが登場しました。
通信先サーバ（JSONPデータ提供側） を管理しているならば、ヘッダーやコールバック関数の定義をサーバ側で適切に行います。AjaxでJSONPを利用する場合はクライアント側のJavaScriptに
dataType : 'jsonp',
jsonpCallback: 'callback',
など、正しくセットしてください。（jQueryのAjaxの例）
さて、Ajaxとかわからない。非同期の必要なし。・・・なんて場合にクロスドメインでブラウザ側とサーバでデータのやり取りできないか？というのが今回のお話。
うちの会社にも結構いますけど、JavaScript苦手、jQueryとか良く分かんない、Ajax？非同期のやつでしょ？・・・みたいに思っている人。まぁ自分も少し前まで同じような感じなのであまり言えませんが、入口こそ少し苦手意識を持ってしまうものの、分かってしまうとその柔軟さに夢膨らむのではないかと思います。jQuery覚えて、Ajax覚えたら何を作ってやろう！とワクワクする気持ちがあります。
で、Ajaxを使わずに、JSON、JSONPをクロスドメインで利用する方法ですが、至って簡単です。
JSONPを利用する場合はコールバック関数(callback)を記述します。
ちなみに、JSONを利用する場合は
つまり、JSONの場合はもうJavaScriptのコードとしてデータを変数にセットする宣言を返却するという事になります。
これでクロスドメインでもJSON使えるという事。
ただし注意！
JSONであろうと、JSONPであろうと機密情報や個人情報をブラウザ-サーバ間でやりとりするのはセキュリティ的にNGですので。以前、Gmailでは連絡者リストが流出したとかいう話を聞いたことあります。
しっかりサーバ間でやりとりするか、非同期で行う場合はAjaxで自サーバにアクセスし、サーバサイドのCGIを使って十分なセキュリティ対策を施した状態で実施すべきです。
やろうと思えば出来てしまうものについては、十分な知識を得てから安全に利用しましょう！
ヘッポコもヘッポコなりにそういう所は日々努力しています。
今日はもう眠いです。
おやすみなさい。
今週はしんどかった。。。仕事の帰りは遅いし、帰ってからもやる事はあるし。
なので更新が少し滞ってましたね。
やらなきゃいけない事に押しつぶされそうでしたが、少しでもやりたい事と絡む機会があったので、今回はそんな内容です。
JSON（JavaScript Object Notation）やJSONP（JSON with padding）を利用する事は多いでしょうか？
Ajaxと絡めてWEBページで非同期な通信を実現させたい場合などによく使われると思います。
簡単に説明します。
JSON は{"プロパティ名":"値"}
JSONPはcallback({"プロパティ名":"値"})と書きます。callback()と書いたのは関数名で、コールバック関数と言われます。別にcallbackという名前じゃなくても、こういう書き方をするものをそう呼びます。
JSONはAjax、つまりXMLHttpRequest（HTTP通信を行うためのJavaScript組み込みクラス）を利用した時の返却結果によくつかわれます。
ただし、 Ajax（XMLHttpRequest）自身がクロスドメインでは利用できないため、外部サーバとのデータのやり取りがJavaScriptだけでは実現できない・・・という所で、JSONPが登場しました。
通信先サーバ（JSONPデータ提供側） を管理しているならば、ヘッダーやコールバック関数の定義をサーバ側で適切に行います。AjaxでJSONPを利用する場合はクライアント側のJavaScriptに
dataType : 'jsonp',
jsonpCallback: 'callback',
など、正しくセットしてください。（jQueryのAjaxの例）
さて、Ajaxとかわからない。非同期の必要なし。・・・なんて場合にクロスドメインでブラウザ側とサーバでデータのやり取りできないか？というのが今回のお話。
うちの会社にも結構いますけど、JavaScript苦手、jQueryとか良く分かんない、Ajax？非同期のやつでしょ？・・・みたいに思っている人。まぁ自分も少し前まで同じような感じなのであまり言えませんが、入口こそ少し苦手意識を持ってしまうものの、分かってしまうとその柔軟さに夢膨らむのではないかと思います。jQuery覚えて、Ajax覚えたら何を作ってやろう！とワクワクする気持ちがあります。
で、Ajaxを使わずに、JSON、JSONPをクロスドメインで利用する方法ですが、至って簡単です。
（お、ソースコード貼るの上手くいったかな？）
JSONPを利用する場合はコールバック関数(callback)を記述します。
ちなみに、JSONを利用する場合は
var jsonData = {JSONデータ}
JSONPを利用する場合はcallback({JSONデータ})
こんな感じになります。つまり、JSONの場合はもうJavaScriptのコードとしてデータを変数にセットする宣言を返却するという事になります。
これでクロスドメインでもJSON使えるという事。
ただし注意！
JSONであろうと、JSONPであろうと機密情報や個人情報をブラウザ-サーバ間でやりとりするのはセキュリティ的にNGですので。以前、Gmailでは連絡者リストが流出したとかいう話を聞いたことあります。
しっかりサーバ間でやりとりするか、非同期で行う場合はAjaxで自サーバにアクセスし、サーバサイドのCGIを使って十分なセキュリティ対策を施した状態で実施すべきです。
やろうと思えば出来てしまうものについては、十分な知識を得てから安全に利用しましょう！
ヘッポコもヘッポコなりにそういう所は日々努力しています。
今日はもう眠いです。
おやすみなさい。
2013年7月22日月曜日
ディズニー夏祭り
遅刻魔のヘッポコです。
土曜日に久しぶりにディズニーランドへ行ってきました！
なんだかディズニーランドは久しぶりですが、思いっきり楽しんできました。
ヘッポコの遅刻のせいで開演時間には間に合わず、30分遅刻しての入園となりました。
■ビックサンダーマウンテン
入っていつも通り右手へ。モンスターズ・インクのファストパス（FP）チケットを取って、そのままグル―っとまわってビックサンダーマウンテンへ。何だか毎回スタンバイで最初に乗るのはビックサンダーマウンテンかもしれない。
絶叫が嫌いだけど、これだけは落下が無いので超楽しい！良く言う「ふわっとした感じ」が大嫌いなので。
■シューティングギャラリー
次にビックサンダーマウンテンの近くのガンマンのアトラクション。ずっと前に一度だけやって、全く当たらず楽しく無かったのですが、今回ようやくコツを発見！（これは今更だと思う）
ライフルの銃身真ん中あたりに「V字」の金具があって、銃口の上に「I字」の金具があるので、このVの間にIを重ねて、その延長線上に的を重ねて打てば当たるんですね！
コレわかってないと何で当たってるのか、外れてるのか分からなくて全然つまらないよ。
結果は6発命中！残念ながらレシートに「ラッキー」の文字は無く、保安官バッチはもらえませんでした。連れがもらえてて羨ましかった・・・。でも楽しいねコレ！
■カリブの海賊
ハニーハントのFPを取ってから（相変わらずの人気で午前中の時点で残りわずかでした）、カリブの海賊がスタンバイ少しだったので入りました。
丁度先週、パイレーツ・オブ・カリビアンも地上波で放送していた事だし。入るとちょっと中身は変わってた。映画仕様と言うか、途中でデイビージョーンズも登場（映像だけど）！
でもやっぱり、全体的に暗いイメージのアトラクションで、もうちょっと明るく子供も喜ぶ感じにすればいいのにと思ってしまった。
後、一番最初の落下だけが嫌い。連れが言うにはあれば「落ちてないよ」って事ですが、絶叫NGの人にはあれでも十分落ちてます。
■ブルバイユー・レストラン
カリブの海賊の最初の方で通るレストランは、いつも行ってみたいと思っていながら場所が良くわからなかったので、係の人に聞いて初めて行ってみました！
凄く素敵な所ですが、入ってメニューを見て 前に友人から「あそこは良いお店だけど高いんだよね・・・」って言葉を思い出しました。30周年記念のコースは3000円超えだったのでさすがに、でも料理はめっちゃおいしい！余裕があったらまた今度来よう！
■爽涼鼓舞”THE EMBU ”
夏を感じたかったので、外れる気持ちでショーの抽選を受けると・・・なんと当選！
しかも2列目中央からちょっと左(笑) テンション上がったー！！！
ずぶ濡れになるだろうと予想して、頭にかぶるタオルと、カバンや貴重品を入れる用のビニールを用意して着席。本番前に振り付けの練習を真剣に受けるも難しい・・・。でも頑張ってみる。
・・・で本番。
いつぞやのゲリラ豪雨ばりの放水量にとても踊りどころでは・・・。
でもめっちゃ楽しかった！爽涼鼓舞♪鼓舞♪でもずぶ濡れ。
くれぐれも抽選当たった人はカバンやら携帯、財布をビニール袋に完全に入れてくださいね。
TODAYやMAPをポケットに入れててグチャグチャにした人達もいました。入場口でビニール袋くれてもいいと思うなぁ。
■スター・ツアーズ
よりスターウォーズ色の強くなって今年の5月からリニューアルしたのかな？こちらも久しぶりなスターツアーズに乗ってみたけど・・・。なんだか凄くなりすぎて普通に乗り物酔いしました。
映像とか凄いんだけど、あれは酔っぱらう。後10分長かったら多分グロッキー。
もっと登場人物増やして欲しいな！パンフレットにムスタファーの紹介が無かったのが気になったけど、ツアーで行くような星じゃないか（笑）
■モンスターズインク
内容何も知らないまま突入！何々。ライトで的を狙えばいいと。バズライトイヤーと同じようなアトラクションだったのでテンション上げてレッツライド！・・・凄く燃えた！ただ必死になり過ぎて、アトラクションのストーリーが全然頭に入って来なかったよ。
何より一番気になったのが、乗り終わった人がみんな「アレ？俺の得点は？」と、自分の得点表示位置を探す不思議さ。あれ得点とか無いんですね・・・。なんだか不完全燃焼。バズライトイヤーと違って連射しなくていいから指が疲れなくていいけど、得点が無いのがね。
「そうなったら、同じアトラクションになるよ」って連れに突っ込まれた。
■ハニーハント
相変わらずの人気。ティガーのジャンプゾーンが好きなのでもっと長い時間ジャンプしてて欲しい！
あとは一番物語が頭の中に入ってくるかなぁ。並んで待ってる間に本のページを巨大にした壁が何枚もあるけど、あのページのプーさんのモノマネしながらして写真に収めるのがひそかにブーム。
■エレクトリカルパレード
これを見ないとね。この日の締めに見ました。
ジーニーのライトで衣装が何度も変わる乗りものと、ローラースケートのハチ部隊の踊りがインパクト強かったなぁ♪
そんな所で帰宅。
水に濡れて、太陽の光にあたって、今日はちょっと体調不良でダウン。
明日からの仕事に向けて、今日はゆっくり寝ます。
それでは。
土曜日に久しぶりにディズニーランドへ行ってきました！
なんだかディズニーランドは久しぶりですが、思いっきり楽しんできました。
ヘッポコの遅刻のせいで開演時間には間に合わず、30分遅刻しての入園となりました。
■ビックサンダーマウンテン
入っていつも通り右手へ。モンスターズ・インクのファストパス（FP）チケットを取って、そのままグル―っとまわってビックサンダーマウンテンへ。何だか毎回スタンバイで最初に乗るのはビックサンダーマウンテンかもしれない。
絶叫が嫌いだけど、これだけは落下が無いので超楽しい！良く言う「ふわっとした感じ」が大嫌いなので。
■シューティングギャラリー
次にビックサンダーマウンテンの近くのガンマンのアトラクション。ずっと前に一度だけやって、全く当たらず楽しく無かったのですが、今回ようやくコツを発見！（これは今更だと思う）
ライフルの銃身真ん中あたりに「V字」の金具があって、銃口の上に「I字」の金具があるので、このVの間にIを重ねて、その延長線上に的を重ねて打てば当たるんですね！
コレわかってないと何で当たってるのか、外れてるのか分からなくて全然つまらないよ。
結果は6発命中！残念ながらレシートに「ラッキー」の文字は無く、保安官バッチはもらえませんでした。連れがもらえてて羨ましかった・・・。でも楽しいねコレ！
■カリブの海賊
ハニーハントのFPを取ってから（相変わらずの人気で午前中の時点で残りわずかでした）、カリブの海賊がスタンバイ少しだったので入りました。
丁度先週、パイレーツ・オブ・カリビアンも地上波で放送していた事だし。入るとちょっと中身は変わってた。映画仕様と言うか、途中でデイビージョーンズも登場（映像だけど）！
でもやっぱり、全体的に暗いイメージのアトラクションで、もうちょっと明るく子供も喜ぶ感じにすればいいのにと思ってしまった。
後、一番最初の落下だけが嫌い。連れが言うにはあれば「落ちてないよ」って事ですが、絶叫NGの人にはあれでも十分落ちてます。
■ブルバイユー・レストラン
カリブの海賊の最初の方で通るレストランは、いつも行ってみたいと思っていながら場所が良くわからなかったので、係の人に聞いて初めて行ってみました！
凄く素敵な所ですが、入ってメニューを見て 前に友人から「あそこは良いお店だけど高いんだよね・・・」って言葉を思い出しました。30周年記念のコースは3000円超えだったのでさすがに、でも料理はめっちゃおいしい！余裕があったらまた今度来よう！
■爽涼鼓舞”THE EMBU ”
夏を感じたかったので、外れる気持ちでショーの抽選を受けると・・・なんと当選！
しかも2列目中央からちょっと左(笑) テンション上がったー！！！
ずぶ濡れになるだろうと予想して、頭にかぶるタオルと、カバンや貴重品を入れる用のビニールを用意して着席。本番前に振り付けの練習を真剣に受けるも難しい・・・。でも頑張ってみる。
・・・で本番。
いつぞやのゲリラ豪雨ばりの放水量にとても踊りどころでは・・・。
でもめっちゃ楽しかった！爽涼鼓舞♪鼓舞♪でもずぶ濡れ。
くれぐれも抽選当たった人はカバンやら携帯、財布をビニール袋に完全に入れてくださいね。
TODAYやMAPをポケットに入れててグチャグチャにした人達もいました。入場口でビニール袋くれてもいいと思うなぁ。
■スター・ツアーズ
よりスターウォーズ色の強くなって今年の5月からリニューアルしたのかな？こちらも久しぶりなスターツアーズに乗ってみたけど・・・。なんだか凄くなりすぎて普通に乗り物酔いしました。
映像とか凄いんだけど、あれは酔っぱらう。後10分長かったら多分グロッキー。
もっと登場人物増やして欲しいな！パンフレットにムスタファーの紹介が無かったのが気になったけど、ツアーで行くような星じゃないか（笑）
■モンスターズインク
内容何も知らないまま突入！何々。ライトで的を狙えばいいと。バズライトイヤーと同じようなアトラクションだったのでテンション上げてレッツライド！・・・凄く燃えた！ただ必死になり過ぎて、アトラクションのストーリーが全然頭に入って来なかったよ。
何より一番気になったのが、乗り終わった人がみんな「アレ？俺の得点は？」と、自分の得点表示位置を探す不思議さ。あれ得点とか無いんですね・・・。なんだか不完全燃焼。バズライトイヤーと違って連射しなくていいから指が疲れなくていいけど、得点が無いのがね。
「そうなったら、同じアトラクションになるよ」って連れに突っ込まれた。
■ハニーハント
相変わらずの人気。ティガーのジャンプゾーンが好きなのでもっと長い時間ジャンプしてて欲しい！
あとは一番物語が頭の中に入ってくるかなぁ。並んで待ってる間に本のページを巨大にした壁が何枚もあるけど、あのページのプーさんのモノマネしながらして写真に収めるのがひそかにブーム。
■エレクトリカルパレード
これを見ないとね。この日の締めに見ました。
ジーニーのライトで衣装が何度も変わる乗りものと、ローラースケートのハチ部隊の踊りがインパクト強かったなぁ♪
そんな所で帰宅。
水に濡れて、太陽の光にあたって、今日はちょっと体調不良でダウン。
明日からの仕事に向けて、今日はゆっくり寝ます。
それでは。
2013年7月16日火曜日
アルバイトの心境
3連休の1日目の朝を壮絶な2度寝によって昼過ぎまで時間を無駄にしてしまったヘッポコです。
休日前って、無駄に夜更かししませんか？
明日は休みだからって、調子に乗って夜遅くまで飲んでいたり遊んだりして、次の日の午前中を寝て過ごす何て経験は誰しも経験していると思います。
そんな所は学生時代とあんまり変わってないかな？と。
なんだかんだ社会人を5～6年やっていますが、学生時代を懐かしく思う事もあれば、学生時代の自分ってどんなだったっけ？と完全に忘れてしまっている部分もあります。
今の自分が、今の大学生を見たりすると、不思議だなぁと感じます。
大学生より前になると思いだすの大変です。（笑）
大学生が一番、以前の自分の姿と照らし合わせて考えられる対象なんだなと。
さて、今日は昼食につけ麺屋へ行ってきました。
つけ麺は普段食べないのだけれども、前に一度だけ行ったことのあるお店で、美味しくてボリュームも会ったのを思い出し、ふらっと入りました。
昼食と言っても、起きるのが午後だったのでいろいろ自分の作業を終えてお店に入ったのは16:00くらいです。
お客は誰も居なく、アルバイトであろう女子大学生の店員さんが明るく「いらっしゃいませ、お好きな席へどうぞ。」と案内してくれた。しばらくして醤油つけ麺の中盛りが来て、食べ始める。
半分くらい食べた所で、ふとその店員さんのいるカウンターの方を向くと、なんと立ったまま腕をカウンターに乗せてその上に額を乗せていた。 時々体がふらふらと動いていたのでおそらくそのまま寝ているのだろう。
客も自分1人なので問題は無いが、それにしてもその光景に驚いた。
「ピンポンポンポーン」という音と同時に店の自動ドアが開いて1人の客が入ってくると、「いらっしゃいませ、お好きなお席へどうぞ。」と何の不自然さもなく接客していた。
その様に感動さえした。
きっとあの学生は早くバイトが終わらないかなぁ、とか、終わってからどこに遊びに行こうかな、とか、給料が出たら何を買おうかな、とか考えているんだろうなぁ。
自分がアルバイトしていた時も、そんな感じで、与えられた仕事の範囲しか見てなかったし、考えてなかった。どこかで「アルバイトだし」と。まぁその通りか。
休日前って、無駄に夜更かししませんか？
明日は休みだからって、調子に乗って夜遅くまで飲んでいたり遊んだりして、次の日の午前中を寝て過ごす何て経験は誰しも経験していると思います。
そんな所は学生時代とあんまり変わってないかな？と。
なんだかんだ社会人を5～6年やっていますが、学生時代を懐かしく思う事もあれば、学生時代の自分ってどんなだったっけ？と完全に忘れてしまっている部分もあります。
今の自分が、今の大学生を見たりすると、不思議だなぁと感じます。
大学生より前になると思いだすの大変です。（笑）
大学生が一番、以前の自分の姿と照らし合わせて考えられる対象なんだなと。
さて、今日は昼食につけ麺屋へ行ってきました。
つけ麺は普段食べないのだけれども、前に一度だけ行ったことのあるお店で、美味しくてボリュームも会ったのを思い出し、ふらっと入りました。
昼食と言っても、起きるのが午後だったのでいろいろ自分の作業を終えてお店に入ったのは16:00くらいです。
お客は誰も居なく、アルバイトであろう女子大学生の店員さんが明るく「いらっしゃいませ、お好きな席へどうぞ。」と案内してくれた。しばらくして醤油つけ麺の中盛りが来て、食べ始める。
半分くらい食べた所で、ふとその店員さんのいるカウンターの方を向くと、なんと立ったまま腕をカウンターに乗せてその上に額を乗せていた。 時々体がふらふらと動いていたのでおそらくそのまま寝ているのだろう。
客も自分1人なので問題は無いが、それにしてもその光景に驚いた。
「ピンポンポンポーン」という音と同時に店の自動ドアが開いて1人の客が入ってくると、「いらっしゃいませ、お好きなお席へどうぞ。」と何の不自然さもなく接客していた。
その様に感動さえした。
きっとあの学生は早くバイトが終わらないかなぁ、とか、終わってからどこに遊びに行こうかな、とか、給料が出たら何を買おうかな、とか考えているんだろうなぁ。
自分がアルバイトしていた時も、そんな感じで、与えられた仕事の範囲しか見てなかったし、考えてなかった。どこかで「アルバイトだし」と。まぁその通りか。
登録:
投稿 (Atom)