投稿

blogspot.comからblogspot.jpへリダイレクトに伴なってソーシャル系で困った場合の対処方法

イメージ
取り急ぎ対処方法だけ書きます。 data:post.url を使われていた場所に  data:post.canonicalUrl  を使うようにして下さい。こちらは xxxxx.blogspot.com のURLを返します。 これで自分で付けていた「いいね」ボタンのカウントなどは救えるはずです。 ＃何のこっちゃという方はすいません。 なおBloggerの標準で付いているボタンに関しては 特に何もされなくても xxxx.blogspot.com の方のURLが対象のままとなっています。
続きを読む

簡易メールヘッダー解析ツール

イメージ
他の人から受信したメールには差出人や本文などの他にどこを経由しているとか、どこで時間がかかっているのかなどが記録されています。この部分をメールのヘッダーと呼んでいます。メールで何か問題があった場合、ヘッダーを見ることで原因が分かることがあります。 例えばGmailのヘルプでもメールのヘッダーの見方について説明しています。 LINK: メール ヘッダーの詳しい見方 - Gmail ヘルプ ヘッダーの内容はどこからどこへ何時といった情報が記録されているだけなのですが、ヘルプでヘッダーの見方が書かれていることから分かる通りとても見にくくなっており、見ただけで拒否反応を起こしてしまう方もいらっしゃるのではないかと思います。 今日たまたまGoogle Appsのヘルプを眺めていたら次のような「サポート ツール: 解析ログ、ヘッダー、その他」という項目があることに気が付きました。 LINK： Google Apps 管理者向け技術サポート リンク先のページでは目的別のヘルプページへのリンクなどが掲載されています。 このページの一番最初の項目が「Message Header Analyzer」というものへのリンクになっており、ヘッダーをコピーすると少し見やすい形に直してくれるツールになっていました。 LINK： Message header analysis テキストエリアとボタンがあるだけです。このテキストエリアに対象のメールのヘッダーコピーして貼り付けます。ヘッダーごと本文も含めてまとめてコピーして貼り付けても大丈夫です。(例えばGmailのメールのヘッダーを表示させる方法は「 メールのソースを表示 」などをご参照下さい)。 「ANALYSE」ボタンを押して頂くとメールヘッダーを解析して次のような形で表示してくれます。 MessageIDなどの項目を表示するほかに、経路としてメールがどこからどこへ来てどのくらい時間がかかったのかを表示してくれます。 今回はビックカメラさんから来ていたメールのヘッダーをテストに使ってみたのですが、ビックカメラさんが利用されていると思われるメールの配送業者さんのメールサーバからGmailのメールサーバへ届くのに45分ほどかかってるな、ということが
続きを読む

iframe内からWebページが読み込まれるのを防止する X-Frame-Options HTTP レスポンスヘッダ

イメージ
昨日とあるところに投稿された質問で"フレーム内に表示する許可がありませんというエラーが出る"と書かれていました。 そういった設定がWebページに対して可能なのかどうか調べてみたところ、X-Frame-Options HTTP レスポンスヘッダというものを使えばコントロールできるようです。 LINK： The X-Frame-Options response header クリックジャッキング攻撃を防止するなどの目的で用意されたもののようですね。最近新しく出来たものではなく随分前からあるようです。今後使う機会もあるかもしれないので使い方を確認しておきました。 X-Frame-Optionsヘッダに設定可能な値はDENYとSAMEORIGINの2つがあります。 DENY フレーム内に表示するのを全面禁止 SAMEORIGIN 同じサイト内のページでフレームに読み込まれた場合だけ許可 これを読み出される側のページが含まれるサイトで設定します。例えば http://www.example.com/ でDENYを設定しておくと、このサイトに含まれるページは自分のサイトを含めどのサイトに含まれるページからもiframeで読み込むことが出来なくなります。 設定方法を行なうには例えば .htaccess ファイルに次の設定を追加すればいいようです。 Header always append X-Frame-Options SAMEORIGIN では実際に試してみます。 今回、サイトAに他のページを読み込む index.html と読み込まれるページ frame1.html を用意します。また別のサイトBに読み込まれるページ frame2.html を用意します。 index.htmlでは次のように他のページをiframeで読み込んでいます。 <body> <iframe src="http://サイトA/frame1.html" width="400" height="100"> frame test1 </iframe> <iframe src="http://サイトB/frame2.html&
続きを読む

別の設定データを持つChromeを起動する方法

イメージ
一時期Firefoxに戻っていましたが今はまたChromeをメインのブラウザとして使っています。Chromeで作業を行なっている時に一時的にまったく別の設定に変更したい場合があるのですが、例えば「新しいウィンドウ」を起動しても元になっているデータは同じためどこかのウィンドウで設定を変更すれば残りのウィンドウの設定も変わってしまいます。 そこでGoogleアカウントのヘルプに記載されていた別の設定データを参照する新しいChromeを起動する方法を試してみます。 デスクトップ上にあるChromeのショートカットをコピーして下さい。 コピーしたものをデスクトップ上にペーストして下さい。 適当な名前に変更します。 新しいChromeのデータを格納するディレクトリを適当に作ります。今回は「C:\mychrome\」としました。 先程作成したショートカット(今回の場合は"作業用Chrome")を右クリックし、表示されたメニューから「プロパティ」をクリックします。 リンク先のところに表示されている最後に「 --user-data-dir=c:\mychrome」を追加します。別のディレクトリを用意した場合はそれに合わせて変更して下さい。 ※ 「chrome.exe」 と「--user」の間には空白を1つ入れて下さい。 「OK」ボタンを押せば準備完了です。では新しいショットカットをダブルクリックしてChromeを起動して下さい。 このChromeは普段使っているChromeと設定データが異なるため追加されている拡張機能やオプションの設定も別に管理されてます。ブックマークなども別なので起動した直後は空です。 今までもシークレットウィンドウを使えば別のGoogleアカウントにログインすることができましたが、今回新しく起動したChromeでも別のGoogleアカウントにログインできます。 なお事前に用意したディレクトリを見て頂くと、Chromeを起動した後から色々なデータが書き込まれていることが分かります。 別のディレクトリをさらに用意しショートカットを作成すればさらに別のデータを元にしたChromeを起動することもできます。環境が違う複数のChromeを同時に使えればいいなと思われていた方は是非一
続きを読む

Chrome Experimentsにあった面白検索サイト

イメージ
Chrome Experimentsというサイトがあります。GoogleがJavaScript,HTML5,WebGLなどを使ってどういったことができるのかの実験をしているようなサイトです。 LINK： http://www.chromeexperiments.com/ 結構前からこのサイトはありましたが、今日の時点で229の作品が掲載されています。 例えば下記の作品はTANKを操って敵と戦います。 界王様が住んでいるようなところです。動きはスムーズなのですが、操作がとても難しい。 今日は数多く登録されているもののなかから、Chrome Experimentsにあった面白検索サイトをご紹介します。 まずはこちらです。 LINK： Google Gravity 一見すると普通のGoogleの検索画面なのですが、マウスを合わせると落下していきます。 最終的にはバラバラになって下に溜まってしまいます。 このバラバラになった部品はマウスでかき混ぜることができます。 検索サイトですから、検索ももちろん出来ます。検索ボックスを探し出してから検索したい文字を入れてEnterキーを押して下さい。 検索結果が上から落ちてきます。 出てきた検索結果はもちろんクリックしてそのページに移動することもできますし、どこにあるのか分からなくなりますが「Sign in」などのリンクからGoogleアカウントにログインも出来ます。 次は画像検索です。 LINK： Google Sphere こちらも一見すると普通なのですが、マウスを合わせるとGoogleのロゴを中心にグルグル回り始めます。 検索を行うと検索結果も回り始めます。 普段から使うとなると不便極まりないですが、職場でちょっと周りをビックリさせるぐらいには使えるのではないでしょうか。Chrome Experimentsには他にも色々なサイトが登録されていますので、暇な時には覘いてみて下さい。 最後にChrome Experimentsで見つけた一番お気に入りのものをご紹介しておきます。 元祖TRONで出てきたTANKのシュミレーションです。元祖TRONが好きな方は是非ご覧下さい。
続きを読む

自分の住んでいる場所の海抜を調べてみた

イメージ
今日のニュースを見ていたら、自分が住んでいる名古屋市の半分は海抜0mというニュースが流れていました。ニュースの映像では自分の住んでいる場所がどれくらいなのか分からなかったので何か調べることが出来るサイトはないか調べてみたところ、下記のサイトで調べれることが分かりました。 Link: http://flood.firetree.net/ Google Mapsを使っていて、海抜の数値を設定すると、その海抜以下の地域が青く表示されます。 さっそく名古屋市で海抜0mのところを調べてみます。 名古屋の三重県側の方に青い点々があることが分かります。では海抜1mで見てみます。 海抜1mにしただけで名古屋市の左半分が青くなってしまいました。。結構低い土地みたいです。次に海抜5mで見てみます。 名古屋の中央を通る名古屋高速の左側だけが低いですね。幸いにして私の自宅は右半分にあるので比較的高い位置にあるようで少し安心しました。(あまり海抜の高低は意味がないかもしれないですけど)。 ついでに東京についても調べてみました。まずは海抜0mです。 荒川というのでしょうか。この周辺に少し青い点が見えます。では海抜1mです。 浦安から上に向かって低い地域があるようです。あとは海抜5mと9mのものも追加しておきます。 こうして見てみると東京都は比較的高い位置にあるようですね。
続きを読む

Webサイトの標準的な横幅について

イメージ
自分で運営しているサイトのデザインを最近少し変更しました。その際に横幅をもう少し広げたいなと思いましたが、現時点で既に990pxありこれ以上増やすと右側が見れない環境の人が多くなりそうで少々心配です。 そこでIT系のWebサイトの中で比較的横幅がところの横幅がどの程度なのか調べてみました。ざっくり調べるために自分の環境で対象のWebサイトをブラウザで表示し、横スクロールバーが出ないところまで広げてその幅を計測しただけです。あまり厳密にしてませんので数ピクセル程度の誤差はあると思います。 結果は次の通りです。 Yahoo! JAPAN (960px) YouTube (980px) Facebook (1014px) ※ログイン後は(980px) Twitter (960px) アップル (984px) Amazon.co.jp (997px) 楽天市場 (960px) マイクロソフト (935px) ※商品ページは(978px) GREE (960px) mixi(ミクシィ) (956px) はてな (940px) pixiv(ピクシブ) (970px) nanapi[ナナピ] (1010px) おおよそ960pxから980pxといったところでしょうか。1年前くらいに見た時もこれくらいだった気がするので大きく変化はしていないようです。まだ1000pxを超えるような横幅はやめたほうが良さそうですね。 なお各ブラウザのWebサイトもChrome以外は同じでした。 Ineternet Explorer 8 (982px) FireFox (965px) Google Chrome (763px) Opera (960px) Safari (983px) 調べたサイトの一部を掲載します。 YouTube http://www.youtube.com/ Facebook http://ja-jp.facebook.com/ Twitter http://twitter.com/ アップル http://www.apple.com/jp/ マイクロソフト http://www.microsoft.com/japan/ GREE http://gree.jp/ nan
続きを読む