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を利用する場合は

var jsonData = {JSONデータ}

JSONPを利用する場合は

callback({JSONデータ})

こんな感じになります。

つまり、JSONの場合はもうJavaScriptのコードとしてデータを変数にセットする宣言を返却するという事になります。

これでクロスドメインでもJSON使えるという事。

ただし注意！
JSONであろうと、JSONPであろうと機密情報や個人情報をブラウザ-サーバ間でやりとりするのはセキュリティ的にNGですので。以前、Gmailでは連絡者リストが流出したとかいう話を聞いたことあります。
しっかりサーバ間でやりとりするか、非同期で行う場合はAjaxで自サーバにアクセスし、サーバサイドのCGIを使って十分なセキュリティ対策を施した状態で実施すべきです。

やろうと思えば出来てしまうものについては、十分な知識を得てから安全に利用しましょう！
ヘッポコもヘッポコなりにそういう所は日々努力しています。

今日はもう眠いです。
おやすみなさい。

ディズニー夏祭り

遅刻魔のヘッポコです。

土曜日に久しぶりにディズニーランドへ行ってきました！
なんだかディズニーランドは久しぶりですが、思いっきり楽しんできました。

ヘッポコの遅刻のせいで開演時間には間に合わず、30分遅刻しての入園となりました。



■ビックサンダーマウンテン
入っていつも通り右手へ。モンスターズ・インクのファストパス（FP）チケットを取って、そのままグル―っとまわってビックサンダーマウンテンへ。何だか毎回スタンバイで最初に乗るのはビックサンダーマウンテンかもしれない。
絶叫が嫌いだけど、これだけは落下が無いので超楽しい！良く言う「ふわっとした感じ」が大嫌いなので。

■シューティングギャラリー
次にビックサンダーマウンテンの近くのガンマンのアトラクション。ずっと前に一度だけやって、全く当たらず楽しく無かったのですが、今回ようやくコツを発見！（これは今更だと思う）
ライフルの銃身真ん中あたりに「V字」の金具があって、銃口の上に「I字」の金具があるので、このVの間にIを重ねて、その延長線上に的を重ねて打てば当たるんですね！
コレわかってないと何で当たってるのか、外れてるのか分からなくて全然つまらないよ。
結果は6発命中！残念ながらレシートに「ラッキー」の文字は無く、保安官バッチはもらえませんでした。連れがもらえてて羨ましかった・・・。でも楽しいねコレ！

■カリブの海賊
ハニーハントのFPを取ってから（相変わらずの人気で午前中の時点で残りわずかでした）、カリブの海賊がスタンバイ少しだったので入りました。
丁度先週、パイレーツ・オブ・カリビアンも地上波で放送していた事だし。入るとちょっと中身は変わってた。映画仕様と言うか、途中でデイビージョーンズも登場（映像だけど）！
でもやっぱり、全体的に暗いイメージのアトラクションで、もうちょっと明るく子供も喜ぶ感じにすればいいのにと思ってしまった。
後、一番最初の落下だけが嫌い。連れが言うにはあれば「落ちてないよ」って事ですが、絶叫NGの人にはあれでも十分落ちてます。

■ブルバイユー・レストラン
カリブの海賊の最初の方で通るレストランは、いつも行ってみたいと思っていながら場所が良くわからなかったので、係の人に聞いて初めて行ってみました！
凄く素敵な所ですが、入ってメニューを見て 前に友人から「あそこは良いお店だけど高いんだよね・・・」って言葉を思い出しました。30周年記念のコースは3000円超えだったのでさすがに、でも料理はめっちゃおいしい！余裕があったらまた今度来よう！

■爽涼鼓舞”THE　EMBU ”
夏を感じたかったので、外れる気持ちでショーの抽選を受けると・・・なんと当選！
しかも2列目中央からちょっと左(笑) テンション上がったー！！！
ずぶ濡れになるだろうと予想して、頭にかぶるタオルと、カバンや貴重品を入れる用のビニールを用意して着席。本番前に振り付けの練習を真剣に受けるも難しい・・・。でも頑張ってみる。
・・・で本番。
いつぞやのゲリラ豪雨ばりの放水量にとても踊りどころでは・・・。
でもめっちゃ楽しかった！爽涼鼓舞♪鼓舞♪でもずぶ濡れ。
 くれぐれも抽選当たった人はカバンやら携帯、財布をビニール袋に完全に入れてくださいね。
TODAYやMAPをポケットに入れててグチャグチャにした人達もいました。入場口でビニール袋くれてもいいと思うなぁ。

■スター・ツアーズ
よりスターウォーズ色の強くなって今年の5月からリニューアルしたのかな？こちらも久しぶりなスターツアーズに乗ってみたけど・・・。なんだか凄くなりすぎて普通に乗り物酔いしました。
映像とか凄いんだけど、あれは酔っぱらう。後10分長かったら多分グロッキー。
もっと登場人物増やして欲しいな！パンフレットにムスタファーの紹介が無かったのが気になったけど、ツアーで行くような星じゃないか（笑）

■モンスターズインク
内容何も知らないまま突入！何々。ライトで的を狙えばいいと。バズライトイヤーと同じようなアトラクションだったのでテンション上げてレッツライド！・・・凄く燃えた！ただ必死になり過ぎて、アトラクションのストーリーが全然頭に入って来なかったよ。
何より一番気になったのが、乗り終わった人がみんな「アレ？俺の得点は？」と、自分の得点表示位置を探す不思議さ。あれ得点とか無いんですね・・・。なんだか不完全燃焼。バズライトイヤーと違って連射しなくていいから指が疲れなくていいけど、得点が無いのがね。
「そうなったら、同じアトラクションになるよ」って連れに突っ込まれた。

■ハニーハント
相変わらずの人気。ティガーのジャンプゾーンが好きなのでもっと長い時間ジャンプしてて欲しい！
あとは一番物語が頭の中に入ってくるかなぁ。並んで待ってる間に本のページを巨大にした壁が何枚もあるけど、あのページのプーさんのモノマネしながらして写真に収めるのがひそかにブーム。

■エレクトリカルパレード
これを見ないとね。この日の締めに見ました。
ジーニーのライトで衣装が何度も変わる乗りものと、ローラースケートのハチ部隊の踊りがインパクト強かったなぁ♪


そんな所で帰宅。
水に濡れて、太陽の光にあたって、今日はちょっと体調不良でダウン。

明日からの仕事に向けて、今日はゆっくり寝ます。
それでは。

アルバイトの心境

3連休の1日目の朝を壮絶な2度寝によって昼過ぎまで時間を無駄にしてしまったヘッポコです。

休日前って、無駄に夜更かししませんか？
明日は休みだからって、調子に乗って夜遅くまで飲んでいたり遊んだりして、次の日の午前中を寝て過ごす何て経験は誰しも経験していると思います。


そんな所は学生時代とあんまり変わってないかな？と。
なんだかんだ社会人を5～6年やっていますが、学生時代を懐かしく思う事もあれば、学生時代の自分ってどんなだったっけ？と完全に忘れてしまっている部分もあります。
今の自分が、今の大学生を見たりすると、不思議だなぁと感じます。
大学生より前になると思いだすの大変です。（笑）
大学生が一番、以前の自分の姿と照らし合わせて考えられる対象なんだなと。


さて、今日は昼食につけ麺屋へ行ってきました。
つけ麺は普段食べないのだけれども、前に一度だけ行ったことのあるお店で、美味しくてボリュームも会ったのを思い出し、ふらっと入りました。

昼食と言っても、起きるのが午後だったのでいろいろ自分の作業を終えてお店に入ったのは16:00くらいです。

お客は誰も居なく、アルバイトであろう女子大学生の店員さんが明るく「いらっしゃいませ、お好きな席へどうぞ。」と案内してくれた。しばらくして醤油つけ麺の中盛りが来て、食べ始める。

半分くらい食べた所で、ふとその店員さんのいるカウンターの方を向くと、なんと立ったまま腕をカウンターに乗せてその上に額を乗せていた。 時々体がふらふらと動いていたのでおそらくそのまま寝ているのだろう。

客も自分1人なので問題は無いが、それにしてもその光景に驚いた。
「ピンポンポンポーン」という音と同時に店の自動ドアが開いて1人の客が入ってくると、「いらっしゃいませ、お好きなお席へどうぞ。」と何の不自然さもなく接客していた。
その様に感動さえした。

きっとあの学生は早くバイトが終わらないかなぁ、とか、終わってからどこに遊びに行こうかな、とか、給料が出たら何を買おうかな、とか考えているんだろうなぁ。

自分がアルバイトしていた時も、そんな感じで、与えられた仕事の範囲しか見てなかったし、考えてなかった。どこかで「アルバイトだし」と。まぁその通りか。

イベント情報の収集

明日から三連休なのに、今週はもうガソリン切れのためいつもより早めに帰ってきたヘッポコです。

体力が持たなかった。眠気も酷いし、今週はなんだかんだ言ってつかれたような気もするし。
ともあれ明日から三連休。その響きだけで少し気持ちも楽になる。
 しかし、特別予定もない・・・さてどうしたもんか？

 せっかくの連休なのに何も予定が無い・・・このままでは何もせずに終わってしまう。。。
 というわけで、今日は職場の人にも聞かれたイベント情報の収集について少し紹介します。

 ネットで「イベント情報」なんて検索しても、お祭り情報や、花火大会、展示会、ライブ・コンサート・・・なんて結構ガッツリ目なイベント情報がヒットして、それもいいんですが、もっと気軽なイベントは無いか？お金もあまりかからず、少人数で、ちょっと集まって、何かする。

そういうのあります！
自分がよく使っているのはATND（アテンド）というイベント集客サービス（なのかな？）です。
http://atnd.org/
自分で開催するイベントを作成して、内容や人数、日程、費用、場所などを書き込んでネット上で申し込みを受け付けたり、募集しているイベントの中から興味のあるものを探して、申し込みを入れたり出来ます。

募集のあるイベントは実に様々。フットサルの練習や、料理教室、携帯電話の必要性について話し合いませんか？なんて内容のイベントまであったりします。
実は自分も勉強会を探していた時に見つけたサイトで、ここで募集していた勉強会に何度か参加しています。友達を誘って参加しても良いし、1人で参加も全然OK。1人で参加している人の方が多いような気はするけど、それは勉強会だからかも。

 雰囲気とかは行って見ないと分からないけど、何もせずに休日を過ごすよりは何かいつもと違う事、もしくは自分の興味のある事を同じく興味を持っている知らない人と共に時間を過ごすなんてのもいいのではないでしょうか？

いい刺激を体験できると思いますよ。
他にもこんなオススメイベントサイトがあるよってのがあれば教えてほしいです。

それでは、今日はこの辺で。

WEB解析 ユーザの動きをどこまで追える？

エアコンの無い時代、人はいったいどうやって生きていたのか不思議に思うヘッポコです。

仕事中は室内にしかいないので分かりませんが（営業外回りの方にわ申し訳ないです）、会社までの行きと帰り、朝と夜だけでも汗ダラダラです。

さて、今日は前回の流れに引き続きWEB解析について。
GoogleAnalytics（以下GA）を使っておけばいいのでは？・・・確かに便利です。
タグを埋め込んでおけば、PV数、訪問数、平均滞在時間・・・など自動的に集計してくれるので。

ところが、GAでも取得できないものがあります。
例えばページ滞在時間。GAでのページ滞在時間とは今表示されているページのアクセス時刻と、 1つ前に表示されたページのアクセス時刻の差分が1つ前に表示されたページの滞在時間としています。
つまり今表示されているページの滞在時間は次のページへ遷移しないと確定しないのです。
次のページへの遷移がGAタグの範囲外のページ（外部ドメインなど）や、次のページは無くそこでブラウザを閉じてしまった場合、30分以上ページを動かなかった場合は「離脱」と判断されて、その最後にアクセスしたページは平均滞在時間の集計から外れる事になります。
しかも、「直帰」の場合。つまり、1ページだけ見て離脱した場合は、滞在時間を「0」として平均滞在時間に集計されます。

 ユーザがどれだけの時間、このページを見てくれたのか？を知りたい場合、この離脱したページの滞在時間や、直帰したページの滞在時間もやはり欲しいかなと思う所。

実は自分もこうしたWEB解析のシステムに少し関わって、作ろうとした事がありました。
その時も、ユーザがページを閲覧した時間を正確に欲しいと思いましたが、これが簡単にはいかないのです。
閲覧開始した時間はページアクセス日時でいいでしょう。
では閲覧終了時間は？
ブラウザのタブを切り替えた時？ブラウザを消した時？ブラウザを最小化した時？
人それぞれページを読むのをやめたタイミングはバラバラです。
それに今あげたものの中から、このタイミングと決めたとしても、そのイベントをキャッチする方法が正確には無いっぽい。画面が遷移しようとしたタイミングは取れるが、ブラウザの「戻る」「進む」「更新」、それに「タブを閉じる」、「ブラウザを閉じる」、リンクで「他のページに遷移する」、という全てがこのタイミングになってしまうので、区別ができないのです。

こういうのを本気でやろうとする場合は、やはりWEBソケットなどサーバ側の力が必要になってくるのでしょうかね。

 別のアクセス解析ツールを販売している会社では、GAと同じ平均滞在時時間の他に、そのページでのユーザのアクティブな動きの時間を計測し集計するサービスもあるそうです。
これはマウスが動いていたり、キーボードのキーが叩かれていたり、スクロールしたりというまさに動いている状態の時間を計測しているそうです。
なので、ページを開いて、じっとキーボードもマウスも触らずページを眺めている場合はそのアクティブである時間の計測には含まれないとの事。

 それをどう使うか？だとは思うけど、データとしては面白いものだと思った。
単にアクセス解析といっても何が欲しいか？によって、出来る事が限られるように思う。
1人の人でも細かい動きまで情報として欲しいのか、だいたいでいいから全体的にどんなアクセス結果だったのかが欲しいのか。

どっちにしても、データとして何かユーザの動きが見えるものである事に違いはないですね。
サイト内で一番多いユーザのページ遷移パターンとか、ページ内でユーザがコピーした文章の集計とか、集めようとすればいろいろとれそうですが、集めた見た時に価値のあるものになるのかを考えつつ、何を集めるかを決めるのが良いんだろうなと思いました。

・・・もしかしたら、インターネット上の自分の動きもいろいろ見られてる（集められている）かもしれないですね。怖い怖い。

GoogleAnalyticsのカスタム変数をカスタムディメンションにして使ってみる

こんばんわ。

部屋に帰ってくるなり、その暑さが半端ではないのですぐに冷房をつけてしまいます。
どうも、ヘッポコです。
みなさんも暑さにも負けずに！

さて、今日はGoogleAnalytics（以下GA）の話。
使っている方は多いようで、このBloggerにも 「設定->その他」のGoogle Analyticsの項目にあるアナリティクスのウェブ プロパティ IDにプロパティ IDをセットしてやれば簡単にGA上にデータを取ってくれます。

で、今回はタイトル通り、GAのカスタム変数をカスタムディメンションに変更して使う方法。
なんだかよくわからなくて、探してもなかなか出てこなくて、やっとなんとなく掴めたので残しておきます。
というのも、今までGAでカスタム変数を利用してきたのに、新しいUniversalAnalyticsという
スマホなどマルチデバイスの解析に対応したタグではカスタム変数を完全に破棄して使えない状態だったので。
UniversalAnalyticsではカスタムディメンションで代用しましょう！・・・という事でした。


現在、(今までの）標準のGAとUniversalAnalyticsは新規プロパティを作ろうとした時にどちらか選べるので、標準のGAを選べばカスタム変数は使えるのですが、デフォルトがUniversalAnalyticsなので、いずれこっちが標準になるのでは？と思っています。（UniversalAnalyticsは現在BETA版なのですが・・・）


なので、その時に備えて。

ちなみに標準のGAタグは以下のような感じ↓。

UniversalAnalyticsはこっち↓。

そもそも、読み込むJavascriptがga.jsとanalytics.jsで全然違うんですね。
標準GAの場合は「_gaq.push(['_trackPageview']);」の前あたりに、
_gaq.push(['_setCustomVar', 1, 'カスタム変数名', カスタム変数の値, 1]);
のように入れたらいいんですが、UniversalAnalyticsのカスタムディメンションも
埋め込み方は同じような感じ。違うのはGA上でカスタムディメンションを定義しておくところ。

プロパティの「カスタム定義」タブで、新しいカスタムディメンションを押してカスタムディメンションを作成。
カスタムディメンションは有効・無効設定はできるが、削除はできないようですので注意。
名前、範囲、アクティブのチェックを設定して作成すると、右側にこのディメンションのサンプル コードっていうのが出てくると思います。

そのサンプルコードをUniversalAnalyticsのタグの「ga('send', 'pageview');」の前あたりにセット。

これでOKです。
こうするとここでセットしたカスタムディメンションが、GAのカスタムレポートを作る際に
ディメンションの詳細部分で選べるようになります。後はページビュー数や、訪問数、滞在時間などの指標と組み合わせればカスタムレポート上で、カスタム変数を扱うようにディメンションを扱えます。

自分がカスタムレポートがうまく作れないので、いい使い方をかけないのですが、それはまたおいおいで。今日はとりあえずこんなところです！



それではまた。

イベント参加について

こんばんわ、ヘッポコです。

今日は変な天気でしたね。昼間はあんなに晴れていたのに。
WEBデザイナー・エンジニア向けの勉強会へ参加するために17:00には家を出たのですが、パラパラと雨が・・・。
傘を持って行く事を考えましたが、空を見ると青空も見えて、西の空も（多分ね）晴れていたので傘は必要ないだろうと最寄り駅まで行きました。
駅までは傘は必要なく、ホームのベンチで電車が来るのを待っていると、突然「ズバババババ」っていう具合に雨が。

駅のホームにあるベンチってホームの端じゃなくて屋根のある真ん中あたりにあるじゃないですか？そこに座ってても雨がかかるくらい激しいのが突然降ってきました。
僕も含め、座っていた何人かとホームの端の方に立って電車を待っていた人達は一斉に雨が降ってきた方向と逆側のホーム端の方へ避難。隣の外人さんも「Oh・・・」って苦笑い。

 勉強会のキャンセルも考えましたが、会場のある新宿では止んでるかもしれないし。と思いとりあえず向いました。まぁ新宿も土砂降りでしたが。苦手な地下通路を使って何とか雨を逃れて会場につきました。


さて、そんなわけで勉強会行ってきました。
内容はどうだった？なんて聞かないでください。この勉強会の参加は3，4回目なんですが今日は4回分くらいブランクあっての参加で、こんなにレベル高かったっけ？と思うくらいついて行くのがやっとでした。
参加者を見渡すと、まぁ以前も見かけた事のある人はいるのですが、もっと初心者だった人達がほとんど姿を消して、レベルの高い人達の顔が増えたなぁという感じでした。

「誰でも気軽に参加できる、初心者歓迎」というにはあまりにレベルが高いように感じました。
この勉強会の初回に参加したのですが、その頃は確かに初心者でも気軽に分からない事を質問、相談していたので、僕も自分のレベルに合っていると思い、参加を続けてきたのですが・・・。

毎回参加者の中から、次回の勉強会の発表者を決めるのですが、その発表者のレベルがそもそも高く、発表に対する質問者の質問もレベルが高く、僕のように初心者な人達はそのレベル差に委縮してしまいます。
そのレベル差に今日は主催の方も 困った様子でした。
 少しレベル分けをすべきだと思いました。
初心者の方は「ほとんどわからないので基礎から学ぼう」という気持ちでいますが、レベルの高い方は「もっと凄いものはないか？使えるものはないか？こんなのあるよ！」というギラギラした気持ちで参加しているので。


なんとなく、以前主催していたバスケイベントの事を思い出しました。
体育館の予約を取って「初心者でも気軽に」 と募集をかけて30人近く集まってくれたのですが、集まってくれた人のレベルはバラバラ。そんな中で初心者と経験者を混ぜて行うとあまりのレベルの差に初心者は委縮してしまい、経験者は不完全燃焼というような結果に。
次からは初心者、経験者を明確に分けて試合をするように決めてから次回が開催出来てないんですが（笑）
 まぁそういうのって重要ですね。特に初心者側の人にとっては。
やはり主催がそういう所をしっかりしていないと。
自分がやる時も十分気をつけようと思います。会社とかでは意識してます。

初投稿！

始めまして。

「ヘッポコ」と申します。
それにしても暑いですね。。。昨日から梅雨明けだそうで、スマホの本日の最高気温を見ると30度超える真夏日。織姫と彦星もこの暑さにやられてなければいいんですけどね。

まぁそれは置いておいて、今日からBloggerで投稿を始めたいと思います。
投稿内容は基本的に日々事、日記として書いていこうと思います。
そんなに詳しい事とか、専門的な事は無しで・・・なんせヘッポコなので。

簡単に自己紹介。
名前はヘッポコです。都内に住む社会人6年目（だったかな？）のSEです。
休日は主に散歩したり、映画見たり、音楽聴いたり、ライブ見に行ったり、友達と飲み行ったりしてます。
それか今日みたいに家でゆっくり過ごしたりね。

でも、実は今日夕方から勉強会に行ってくるんですよ！
何度か参加させてもらっているWEBデザイナー・エンジニア向けの勉強会ですね。
まぁそんな感じで平日は業務に終われ、休日は勉強したり好きな事したりと、自分では忙しいなぁと思う生活を送っています。

自分の性格上、面倒臭がり、楽してたい、へんな所で負けず嫌い・・・みたいな所がありますが、なるべくたくさん投稿できるようにしていきますので、宜しくお願いします。