2014/10/17

panoramtech について

最近やたらとGoogleChromeでアドレスバーの部分に、
「このページには認証されていないソースからのスクリプトが含まれています」
という表示(盾のマーク)が出るなぁと思っていたのですが、もしやと思い、google.comにアクセスしてみると、そこでも表示が(画像)。
WS000002
googleの開発したブラウザがgoogle.comに文句をつけるはずがない
F12キーを押して開発者ツールを表示し、Consoleから見てみると、
[blocked] The page at ‘https://www.google.com/’ was loaded over HTTPS, but ran insecure content from ‘http://ads.panoramtech.net/loader.js?client=ClientID': this content should also be loaded over HTTPS.
と書かれている。(画像)
WS000003
で、そのads.panoramtech.net/loader.jsについて調べてみると、virusの文字。
でも日本語のページがない。
そんなわけで解決策。
原因は何らかの拡張機能である可能性が高いので、怪しい拡張機能を無効化して再読み込みしてみます。
自分の場合は vine client でした。。。。

sublime text 日本語検索で引っかからない時

日本語検索ができないできないと思ったけど、実はできた。。。
↓の"完全一致"を外すと問題なく検出できた。。。



検索・置換

 Sublime Textの検索機能について解説する。ファイル内や複数ファイルをまたいだ検索も可能だ。

ファイル内の検索機能

 CtrlWinCommandMacFキーで、ウィンドウの下部に検索のボックスが表示される(図5.1)。検索ボックス内のボタンは左から、
  • 正規表現を利用する
  • 大文字・小文字を区別する
  • 完全一致のみを検索する
  • 最後まで検索した場合、ファイルの先頭から検索する
  • 選択範囲内を検索する
  • 検索文字列にマッチした箇所をハイライトする
という機能を有している。また、検索ボックス右のFind Allはマッチする文字列を全て複数選択した状態にする。これは拡張選択と同様に同時編集ができる。
画像
図5.1 検索ボックス

複数ファイルを対象にした検索

 複数ファイルからの検索機能も備えているので解説する。Find in Filesという機能名で提供されており、CtrlWinCommandMacShiftFキーで、先ほどと同様に、ウィンドウの下部に検索ボックスが表示される(図5.2)。
 表示されるボタンの機能は左から、
  • 正規表現を利用する
  • 大文字小文字を区別する
  • 完全一致のみを検索する
  • 合致部分の前後の行を表示する
  • 検索結果を別ファイルで表示する
 縦に3つ存在する入力フィールドのうち、2段目のWhereが、検索対象の指定箇所になる。複数のフォルダーの指定など、詳細な指定が可能。置換を行う場合は3段目のReplaceに語句を入力する。
画像
図5.2 複数ファイルの検索ボックス
 また、機能拡張パッケージの「SideBarEnhancements」を利用していると、サイドバーで右クリックすることで複数ファイルの検索が行える。

Sublime Textの検索窓に日本語を入力する方法

Sublime Textの検索窓に日本語を入力する方法
Sublime Textの検索窓に日本語を入力するとEnterを押すなり文字が消えてしまうのですが、無理やり解決する方法を見つけました。ググってもこちらのバグレポートしか見つからなかったので報告です。
わたしの環境はMac OS XのSublime Text 3 (Build 3059)ですが、この解決方法はSublime Text 2 (Build 2220)にも対応しています。Windowsの場合は不明です。

ステップ1: Sublime Text 3の場合のみ: Default (OSX).sublime-keymapを編集可能にする

このステップはSublime Text 3の場合のみ必要です。Sublime Text 2の場合はステップ2に行って下さい。
PreferencesからKey Bindings - Defaultを開き、表示されたDefault (OSX).sublime-keymapの内容を全部コピーします。
⌘+Nで新しくファイルを開き、先ほどコピーした内容をペーストし、⌘+Sで保存します。
保存ダイアログが出たら、シフトキーを押しながら⌘+Gと入力し、ボックスに~/Library/Application Support/Sublime Text 3/Packages/と入力します。
このPackagesフォルダーの中に新しくDefaultフォルダーを作成します。
そのDefaultフォルダーの中にDefault (OSX).sublime-keymapとして保存します。

ステップ2: 該当箇所をコメントアウト

Sublime Text 2の場合は、PreferencesからKey Bindings - Defaultを開きます。
Sublime Text 3の場合は、さきほど保存したDefault (OSX).sublime-keymapを開きます。
そしてFind panel key bindingsと書かれている行を探します。
// Find panel key bindings
{ "keys": ["enter"], "command": "find_next", "context":
 [{"key": "panel", "operand": "find"}, {"key": "panel_has_focus"}]
},
その下3行の始めに//と入力してコメントアウトします。
// Find panel key bindings
// { "keys": ["enter"], "command": "find_next", "context":
//  [{"key": "panel", "operand": "find"}, {"key": "panel_has_focus"}]
// },
その下のReplace panel key bindingsIncremental find panel key bindingsの下3行それぞれも同様にコメントアウトします。
// Replace panel key bindings
// { "keys": ["enter"], "command": "find_next", "context":
//  [{"key": "panel", "operand": "replace"}, {"key": "panel_has_focus"}]
// },
// Incremental find panel key bindings
// { "keys": ["enter"], "command": "hide_panel", "context":
//  [{"key": "panel", "operand": "incremental_find"}, {"key": "panel_has_focus"}]
// },
この状態でファイルを保存すると日本語で検索できるようになります。
この方法の欠点として、次の検索結果をEnterで表示することができなくなります。代わりに⌘+Gを使うようにしましょう。

注意事項: 複数ファイルを検索しようとすると失敗します

Shiftキーを押しながら⌘+Fを押すと現在開いているフォルダーやファイル内から文字列を検索するパネルが出るのですが、ここでは先ほどの解決方法が機能しません。
パネル名はfind_in_filesなのですが、Default (OSX).sublime-keymap内にはこのパネルを表示させるキーバインディングしかありません。find_in_filespanel_visibleのときのenterキーの挙動を適当なcommandに上書きしてみようと試みたものの、失敗に終わってしまいました。Sublime Text自体に挙動が組み込まれているようですね。
日本語で複数ファイルを検索するときは、
  1. ⌘+Fで検索したい日本語をあらかじめ入力
  2. 入力できたら、Shiftキーを押しながら⌘+Fで複数ファイル検索に切り替える
  3. Enterキーを押す
とするしかないようです。#1すら不可能だった時に比べればマシかと思います。

おまけ: Tabキーでかな漢字変換の変換候補を選べるようにする

かな漢字変換の際にTabキーで変換候補を選ぶことができない問題も同じように解決することができます。(参考URL)
先ほどのファイル(Default (OSX).sublime-keymap)で、"keys": ["tab"], "command": "insert_best_completion"と検索します。見つからない場合はinsert_best_completionと検索してみてください。
そして下記の行を次のようにコメントアウトして保存します。
// { "keys": ["tab"], "command": "insert_best_completion", "args": {"default": "\t", "exact": true} },
// { "keys": ["tab"], "command": "insert_best_completion", "args": {"default": "\t", "exact": false},
//  "context":
//  [
//    { "key": "setting.tab_completion", "operator": "equal", "operand": true }
//  ]
// },
これでTabキーで次候補を選べます。ただし、Tabキーが使えるのはあくまで「次候補を選ぶとき」なので、一度目の変換はスペース(もしくは変換)キーを押さないといけませんのでご注意を。
Tabキーでコード補完ができなくなるので、Ctrl+Spaceなどを使わないといけないのが欠点です。

おまけ: この記事の英語訳

ありがとうございました!
@chibicode Sublime Text の解決方法本当にありがとうございました!!僕のブログに英語でちょっと訳しました http://t.co/XlCjucBOwb
— Keitaroh Kobayashi (@keichan34) February 7, 2014

おまけ: Gifアニメーションの作成方法

Gifアニメーションの作り方ですが、わたしはScreenFlowで撮ったmp4ファイルをGif Breweryでgifファイルに変換しています。
この記事で使ったGif Breweryの設定は以下のとおりですが、完全に適当です。カラーパレットは動画ごとに変えることが多いです。ファイルサイズが大きくなってしまったら、ImageOptimを使えば1割ほど節約できます。

2011/06/17

Google AnalyticsのtrackEvent()でイベントを直接トラック

非同期版(2010年最新のコード)での解説はこちら。

Google Analytics
僕が今までtrackPageviewをいかに突っ込んだ使い方でイベントをカウントするか、ずっと考えたり提案したりしてきたんですが、ついに公式でtrackEventが追加されました。
メソッド自体は昔からあったんですが、中身がなかったので、今までは「今後追加予定」って感じでごまかされていた部分です。
で、これは何かというと、ページ内のボタンクリックやインタラクションを直接カウントできるようになったということ。
早速、使い方はこんな感じ↓ もちろん、ページ内にga.jsを読み込んだ上でね。
  1. _trackEvent(category, action, optional_label, optional_value)  
category(必須):トラックしたいイベントのグループ名。
action(必須):こういう名前でカウントしたい、というインタラクション名。
label(オプション):イベントデータに追加するディメンション。
value(オプション):数値データをカウントするときはここに数字を入れる。

使い方

  1. <a href="#" onClick="pageTracker._trackEvent('Videos', 'Play', 'Baby\'s First Birthday');">Play</a>  
こんな感じでonClickに乗せれば、リンクのクリックイベントを取れます。ただのページ遷移リンクはtrackPageviewでカバーされるから、このクリックはページ内での遷移とか、ボタンを押したとかで使います。
カテゴリを同じくして、イベントを変えると、こんな感じに。
  1. pageTracker._trackEvent("Videos""Play""Gone With the Wind");  
  2. pageTracker._trackEvent("Videos""Stop""Gone With the Wind");  
  3. pageTracker._trackEvent("Downloads""PDF""/salesForms/orderForm1.pdf");  
せっかくだからここにテスト用リンクを置いておきます。これを押すとカウントされます。
ビデオの再生ボタンを押したぜ!
ビデオの停止ボタンを押します。
俺はジャイアンガキ大将。

結果

Google Analytics
コンテンツ>イベントのトラッキング でカウント結果を確認できます。
上記の例だと、3番目の「俺はジャイアン」は日本語でイベントを設定してあるんですが、これもそのままカウントされました。
こりゃあグッと来ますね!!
カテゴリごとのアクションを比較する、という使い方が想定されます。まぁ、カテゴリの部分をページ名にするとか、見て分かりやすい形で設定しておけばいいだけですね。
Google Analytics

イベントって?

これが出来ると何がうれしいかというと、イベントってクリックイベントだけじゃない、ということなんですよね。
ぱっと思いつくのは、画面読 込み完了時、画面離脱時、ajax読込み完了時、みたいなタイミング(HTMLのDOMイベント)にハンドリングしてページ状態の詳細をトラッキングする こともできるし、スクロールや右クリック、画面リサイズみたいな操作にハンドリングしてもいいし、クリックした場所の座標を取得してヒートマップ的なこと もできそうですよね。

2011/06/10

サイト内のGAコードを外部JS化して一括管理すると便利

サイト内のGAコードを外部JS化して一括管理すると便利

GAコードは、ふつうサイト内の<head>タグ内にベタッと貼り付けますが、コード自体を外部ファイルとして<script>で取り込むようにすれば、コードが新しくなっても1か所修正するだけで全ページに対応できます。CMSのテンプレートだったら関係ないけど、これは地味に使えるテクなのでは。
  1. <script type="text/javascript" src="ga.include.js"></script>  
  2. //JSのファイル名はなんでもいい  
JSの中身はGAコードそのまんま。
  1. var _gaq_gaq = _gaq || [];  
  2. _gaq.push(['_setAccount', 'UA-12345-6']);  
  3. _gaq.push(['_trackPageview']);  
  4.   
  5. (function() {  
  6.     var ga = document.createElement('script'); ga.type = 'text/javascript'ga.async = true;  
  7.     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';  
  8.     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);  
  9. })();  
HTML内にコードが直接貼ってあるよりもスマートですね。

2011/04/25

GTD

2010-01-24

Evernote使っていつでもどこでも快適なGTD生活を満喫する方法を考えたAdd Starm0r1tsukitarootsuneatkurayohjizzzShenaMikandacho_riderinmymemoryinmymemorymillotiiossan8492ossan8492ossan8492ossan8492masayashi

Evernoteを使ってGTDをやりたいなーと考え、ようやく方法が固まってきたので以下にまとめておきます。
Evernoteを使う事で、今まで行なって来た行動などについてもとにかく記録として残しておけること。また、ノート欄を活用することでProjectなどの分解が行いやすいこと。データがクラウドに有ることで紛失の可能性が低く、かつ様々な環境で参照が行えること。更にiPhoneアプリが割と優秀で、どこでも確認しやすいこと。などがメリットではないかと思っています。
ちなみに、実際のGTDの方法に関しては、
が一番しっくりきました。無理して完璧にこなそうとするのでなく、まずはやってみる。
記事中にでてくるZTDなんてのも良いと思います。
以下、具体的に行なっている方法。
--

Evernoteに作るノート

  • .[inbox] (メインノート
  • .[NextAction]
  • .[Project]
  • .[Wait]
  • .[気になるもの] (somedayリスト
  • .Archive
  • .下書き
  • Diary
  • work
それぞれのノートの名前は、こうすることで、思い通りの順番に並んでくれる。
これは、iPhone版Evernoteで閲覧する際に非常に重要になる。iPhoneでいちいち検索使ったりするのは閲覧の際に手間がかかりすぎる。重要度が高い、かつ数が少ないモノが上にくることで、スライドのみである程度内容を確認出来る。
そのためにも、自分でちゃんとわかるタイトルをつけるように注意する。

iPhoneでの設定

iPhone上では、ノートタブ左上 i を押してノートのグループ分けを「ノートブック」にしておく。これで、スライドのみである程度の内容が確認可能。
f:id:goryugo:20100124011122j:image
f:id:goryugo:20100124011152j:image

各ノートブックの役割

.[inbox]
.[NextAction]
.[Project]
.[Wait]
は名前通り。[気になるもの]はsomedayリスト。元々こういう名前のノートを使っていて、いい具合に並んだからこのままの名前。("Someday"は"Wait"の上に来て邪魔)

.[Archive]は完了したものをなんでも放り込んでおく。

Reference(資料)は、資料タグを作ってその下に子タグを作ってArchiveに突っ込む。タグ付けによってEvernoteは整理する。現在は、タグはどんどん増やせばいいという方針。「レビュー」時にタグの整理などもおこなうようにする。「資料」の整理方法は、純粋なEvernoteの使い方を含め模索中の部分も多い。

.[下書き]はブログ用の下書き 兼 色々考えるノート。気になったことがあれば取り敢えず下書きに入れておく。メモでも何でも、書くことで考えがまとまるっていうのはあると思う。ある程度まとまればブログで公開。blogタグを付けてArchiveへ移動させる。

Diaryはツイッターログ

workは仕事用ノート。主に資料。これは、[仕事]タグを付けてその下に色々とタグを作って整理。

基本

思いついたものはなんだろうがとにかく、inboxに放り込む。
考えたこと、感想などはTwitterで投稿。誰かの反応でアイデアが広がるかもしれない。
iPhoneで登録すると、GPSデータも取ってくれて結構便利。
ノートブックの移動=処理、整理、完了。タグだと後でタグを消すのが面倒だということを学び、ノートブックを使うことにした。
あとは、いわゆる普通のGTD
ちなみに、「カレンダー」は

カレンダー

Googleカレンダーを使ってる。iPhoneとの連携が非常に便利。
また「カレンダー」機能やらなんやらにiPhoneアプリ「domoTodo+ domo Todo+ (sync with Google Calendar?)」が非常に便利なのだが、これは長くなりそうなのでまた今度まとめる。
GTDではないが、チェックリストを作ることとか、ちゃんとスケジュール管理することとかは「頭をすっきりさせる」ためにはとても重要だと思ってる。それらがとても快適に使えるツール。

GTDを行う上での管理場所

大半をEvernoteにまとめられた。アイフォーンのおかげで、いつでもどこでも全てを参照可能。Eneloopモバイルブースターは必須アイテム
  • Inbox ― Evernote
  • Referenceリスト ― Evernote(外出用データなどはiPhone上で「お気に入り」にいれておくと良い)また、一部チェックリストなど頻繁に使う可能性があるものはをdomoTodoにまかせる
  • Somedayリスト ― Evernote
  • Projectリスト ― Evernote
  • WaitForリスト ― Evernote
  • Calendarリスト ― GoogleCalender(domo todo)
  • NextActionリスト ― Evernote

GTDやるなら、まずは一度提唱者の「聖典」を読んでおくと良いのではないかと思います。
はじめてのGTD ストレスフリーの整理術

goryugo twitterはこちら