SE奮闘記

Google Chrome Extension "History Plus"を Chrome Web Store に登録したときのMemo. 手順はOfficial Siteに詳しく書いてある。 チュートリアル: スタート ガイド - Chrome ウェブストア - Google Code 公開するために必要なFile App icon(128x128) 画像の準備 - Chrome ウェブストア - Google Code source code, manifest.jsonを含んだzip file New screenshot(1280x800) RenewalされるChrome Web Storeで必要になるらしい。 参考 Legacy screenshots(400x275) 詳細画面の左上に表示されるScreenshot。 small tile(440x280) これも今は表示されないけど、今後は必須らしい。   最初はTester Accountsにだけ公開してTestする。指定したGoogle AccountでLoginしておいて、直接URLを叩けば詳細画面が表示できるはず。   < Related Posts > Google Chrome Extension "History Plus"の開発 Google Closure Libraryを使った開発事始め

Webの技術だけで出来るみたいなので、 Closure Library の勉強も兼ねて作ってみた。 作った拡張機能は Chrome Web Store を使って世界中に配信できる。最初に$5（約380円）支払えば好きなだけ公開できる。 History Plusの画面はこれ。Installすると履歴画面(Ctrl-H)を置き換える。 機能 日付範囲を簡単に切替 表示数を簡単に切替 全ての履歴削除 同じDomainはまとめる 訪問回数を表示   使った技術と必要なLink集 Google Chrome Extensions - Google Code Closure Library (Google製JavaScript Library) 詳しくは 前の記事 を参考に 52Framework (CSS Framework) エクステンション - Google Chrome まとめWiki   開発の動機 Google Chrome Extensionの開発を試す Chrome Web Storeを試す Closure Libraryを使ってみたい 52Frameworkを使ってみたい GitHubを使って公開してみる Google Chromeの履歴が見にくい Developerとして名を上げる   今後実装予定の機能 多言語対応 長すぎるTitleは切り詰める Calendarを使って日付範囲を選択できるように 経過時間で行間の高さを変更して、パッと見でBrowsingしていた時間帯と頻度が分かるように Calendarを表示して、今画面に出ている履歴の範囲を色つきで表示 GmailとiPadのような直感的で画面を有効活用した新しいDesign   今テスト中。今週中には公開予定。 < 2011/09/29 Modified > 既に「History+」というのが1ヶ月前に公開されていたので、泣く泣く「History Plus」に改名。 < 2011/10/03 Modified

STAGE環境（Singapore, 英語圏では、Release前にお客様に見てもらうデモ環境のことを「STAGE」と呼ぶ）でも、 Google Analytics のTracking Codeを出力しているけど、それが、Analyticsの画面に表示されるようになったので調査。 STAGE環境は 本番環境とは別Domain。Sub Domainでもない。 外部からAccess可能（HTTP認証が必要） まずは本当に別DomainでもTrackingするのか、Google Analyticsの画面にDomain名も表示するように設定してみる。Official Helpを参考にFilterを設定。 複数ドメインのトラッキング - アナリティクス ヘルプ 設定後のTrackingからFilterが適用されるので、今までのDataはそのまま残る。やるなら最初から設定しておかないと意味がないかもしれない。 IP AddressやCookieを使って、Filteringも出来るみたい。 社内からのアクセスを除外するにはどうすればよいですか？ - アナリティクス ヘルプ Google Analyticsで設定しなくても、PHPやJavaScriptで判断して、Tracking Code自体を出力しないようにすれば間違いない。 Wordpressなら Google Analytics用のPlugin を使って、開発環境はDeactivateしておけばいい。   【2021/01/22 追記】 こちらの記事も参考に。 Ultimate Beginner's Guide to Google Analytics 4 (NEW 2021 Interface) Google Analytics 4はまだAMPに対応していないので注意。 < Related Posts > Google AnalyticsでFacebook LikeとTwitterをTrackingする Ajax通信しても固定URLを持たせてGoogle Analyticsに記録したい 最強のアクセス解析ツール「Google Analytics」

Pythonの実行にcmd.exeを使っていたけど、使い勝手の悪さにキレそうになったので、Tab補完とかLinuxのKeybindとかWindow Sizeを変更できたりするcmd.exeのshellがないか探してみた。 環境はWindows 7 Home Premium 64bit 英語版 表題と逸れるけど下記Softを利用すれば実現できるみたい。 ckw ・・・cmd.exeのUIを拡張。Window最大化できたりとか。配布場所は こちら から。 NYAOS ・・・linux風のkeybind(tsch)を実現。 これで解決！・・・と思ったけど、「PowerShellでもいいんじゃね？」と思い付いてしまったので、もう少し調査。 Windows PowerShellはWindows 7から標準で付属されているCUI(Command line User Interface). XP, Vistaにも対応している。詳しくは Wikipedia で。 これからのWindows ServerはPowerShellで管理できるようになるらしい。PowerShellでRemote接続してServiceの管理も出来るらしい。 スクリプト センター | TechNet 起動するにはPowerShellで検索すると出てくる。 Windows PowerShell ISE(Integrated Scripting Environment)はPowerShell用の統合開発環境。InputとOutputがFrameで別れているので普通に使う分にも見やすい。 ただ慣れているLinuxのKeybindを使えないのが難点。 そのうちClosure Compilerを使ったCompileを自動化するScriptを試しに作ってみようと思う。   < Related Posts > Google Closure Libraryを使った開発事始め

Google Chrome Extension を作りたくなったので、勉強がてら Closure Library + 52framework で作ってみることにした。 Closure LibraryはGoogle製のJavaScript Library(Framework). GmailなどのGoogle製Web ApplicationのFront EndはこのLibraryを使っているらしい。 まずは開発に必要なLink集。 Closure Library Documentation - Closure Library - Google Code Closure Library Demo Index Google JavaScript Style Guide ( 日本語 ) 始め方は Official Document がわかりやすい。最初に読み込むbase.jsには便利な関数があるので、 このManual には一度目を通しておく。英語が苦手な場合は下記Blogも参考に。 Closure Libraryで遊ぶ - dunno logs Closure Library を使うべき 10 の理由 - WebOS Goodies Closure Libraryによるアプリ開発のはじめ方 - WebOS Goodies ちょっと使ってみた感じは、jQuery + jQuery UIに比べてかなり敷居が高い。demoを見てやりたいことが分からなかったら、Google先生に聞くよりSource CodeをGrepした方が早い。 Commentは結構たっぷり書いてあるけど、英語が分かって、Object指向のJavaScriptの書き方を知っていないと辛いかもしれない。 頻繁に使いそうなLibraryをMemo Library Comment goog.base.js isFunction, cloneObjectとかUtility関数が詰まってる goog.dom getElementなどDOMの操作

下記記事を読んで、日本かSingaporeでのGoogle Voiceの番号取得が待ち遠しくなった。 Google Voiceはやっぱりすごかった － ＠IT 前の記事 で Asterisk という構内交換機（PBX）というのも知っていたので、Google Voice + Asterisk + Android or iPhoneで社内の電話機を一掃して、より幸せな環境が手に入るような気がした。 来月当たりにOfficeも引越しするので、試してみる予定。既に試した人たちの記事をMemoっておく。 構内電話網(IP-PBX)を構築してAndroidで無料通話｜zamuu：：BLOG pc.casey.jp » [Asterisk] Asterisk をUbuntu にインストールする iPhoneも内線電話化することが出来るみたい。 遂に!! iPhone + Asterisk/trixboxでVoIP Over 3G が可能になった模様！ - 【qloogTips】trixboxやAsterisk、macについて、スタッフのきまぐれで始めた株式会社クルーグ非公式ブログ   < Related Posts > オープンソースのIP電話（PBX）「Asterisk」で内線番号を量産

JPEGに関する良記事を見つけたのでMemo. 大学のころは授業でJPEGのAlgorithmから習った気がするがもう忘れてしまった。 JPEG 101: A Crash Course Guide on JPEG Titleだけ和訳 JPEGの概要 意味と明確化： JPEG vs JFIF/Exif なぜJPEG JPEG圧縮 Baseline JPEG vs Progressive JPEG PhotoshopでのJPEG(Baseline/Progressive )形式 JPEGを使う場面 JPEGを使うのを避ける場面 PhotoshopでJPEGを保存してみた JPEG圧縮を顕微鏡で見てみた 透過処理はJPEGで可能か JPEGに対抗する新しい圧縮形式：WebP さきに Wikipedia を読んでおくと理解が早い。関連する下記記事も参考になる。 JPEGをプログレッシブにするかどうかの分かれ目は10KB | エンタープライズ | マイコミジャーナル Image Optimization, Part 4: Progressive JPEG&#8230;Hot or Not? &raquo; Yahoo! User Interface Blog (YUIBlog) 個人的に覚えておきたいPointは。 JPEGはたくさんの色情報を保存できる＋高圧縮なのが利点 Progressive JPEGは最初にボンヤリと表示してから鮮明に表示するので、大きな画像を読み込むのにUserを待たせなくていい。 大きい画像はProgressiveの方が画像Sizeが小さくなる場合が多い。 単色（色が少ない）の場合はPNGとかの方がSizeが小さくなる場合が多い。 IE6でもProgressive JPEGを表示できるけど、Baselineと同じ表示の仕方になる。 AUの携帯でProgressive JPEGを表示できない機種があるらしい。   < 2012/01/30 Modified > 画像圧縮に関する参考になるSiteを教えてもら

iPad, iPhoneではcssのposition:fixedが効かない。これは仕様らしい。これを何とかするにはJavaScriptを使う必要がある。 jQueryを使って簡易的に対応するのは下記のような感じ。 var jMenu = $('#main-menu'); var menuTop = jMenu.position().top; $(window).scroll(function() {     jMenu.css('top', $(this).scrollTop() + menuTop + "px"); }); jQuery Scroll Follow を使うと綺麗に動いてくれる。 iScroll を使うとposition: fixedっぽく出来るけど、これはscrollするcontentsを指定するので、「この要素だけposition:fixedにしたい」という指定は出来ない（たぶん）。   < Related Posts> jquery-scroll-followがjQuery 1.6で動かない [jQuery]Scrollしても位置を固定のままにしてくれるPlugin

SingaporeにはLet's Noteを持ってきているけど、大学時代にハマったPSO(Phantasy Star Online)の続編 PSO2 が近いうちに出るので、Gameも出来るPC環境を妄想してみた。 Singaporeでは1年か2年ぐらいで引っ越すことが多いし、部屋は広くないので、出来るだけCompactがいい。 他の国に行くときにもサクッと持っていきたい。 （Windows用）Gameをしたい。 iOS Applicationの開発をしたいのでMacは必要。だけど、Windows Live Writerとかxyzzyとか離れたくないWindows Applicationがある。 整理してみると、「 Mac mini ＋ 仮想環境のWindows」というのが理想に近い。 Parallels Desktop の最新版だと、3D Gameもサクサク動くとの噂なので、試してみたい衝動に駆られている。 ちなみに日本からMac mini(Snow Leopard Server) + VMware Fusionは持ってきて会社で使っている。 Parallels DesktopとVMware Fusionはどちらがいいのだろうか・・・。 5万円ぐらいでサクッとGame用自作PCを作るのもまだ選択肢として捨てれない。どうせ2年ぐらいすれば新しい製品が出て、買い換えたくなるしね。 こんな妄想が結構好き。   < Related Posts > Let’s note CF-S9に外付けUSB英語キーボードを接続して使う iMacとWindowsのデュアルディスプレイ環境を妄想してみた

Emacsに乗り換えたいなーと思いながら、やっぱりWindows環境は xyzzy が一番やりやすい。 最近 Google Closure Library を触っていて、Source Codeを眺めるのが多いので、Object指向っぽいJavaScriptをClass, Methodに分けて階層表示する正規表現を登録してみた。 outline-tree2がInstallされていることが前提。Downloadは こちら から。 試すときはMenuの Outline-Tree → 「アウトラインツリー設定」で「正規表現リスト」 に登録。その後、階層表示したいFileを 右Click → 正規表現（ダイアログ設定有） を選択。 思い通りに正規表現が出来たら、 アウトライン作成関数の生成 → 「正規表現」設定から を選択して、Fileに書き出しておく。xyzzy\.outline-tree\autoloadに出力される。 ちなみに正規表現は下記Siteを参考に。 正規表現の表記 - refwiki ・・・で、標題のObject指向で書かれたJavaScriptのClassとMethodを表示するための正規表現はこれ。 \(\.[A-Z]+?[a-zA-Z]+\) = function \(\.prototype\.\)\([_a-zA-Z]+\) = function ちなみに階層表示できないけど、この正規表現も使う \([_a-zA-Z]+\) = function 生成されたFileは下記。 ;;; -*- Mode: Lisp; Package: OUTLINE-TREE2 -*- ;;; cr-user-regexp-outline-javascript.l --- outline-tree ;; Generator: outline-tree-gen-cr-user-regexp ;; Time-stamp: <2011/09/13 23:00:09 +0800> ;;; Code: (require "outline-tree/outline-tree")

RPGは作るつもりはないけど、PromotionやFlashでやっていたことをこのFrameworkを使うことで面白いことが出来るかもしれない。 RPG JS: Your online RPG on your browser iPhone, iPad, AndroidなどのMobileで表示できるのは大きいけど、やっぱりIE8で表示できないのも大きい（今の時点で30%）。 [NETMARKETSHARE] Browser market share 2011年5月のブラウザシェア 、3位にFirefox 4 ‐ IE6が2位へ | エンタープライズ | マイコミジャーナル

HTML5が必須なので、仕事で使うことはまだなさそうだけど、大きな可能性は感じる。 PDFをHTML5でレンダリングするプラグイン不要の「pdf.js」をMozillaが発表 - ITmedia ニュース Official Site: https://wiki.mozilla.org/PDF.js Github: https://github.com/andreasgal/pdf.js Demo: http://andreasgal.github.com/pdf.js/ License: BSD   < Related Posts > 【PHP】TCPDF 4.5.xxx＋FPDIで既存PDFの読み込みと編集 【PHP】Webで帳票を作成するのにPDF変換を利用する方法

最近Web Siteを構築した後でiPhone, iPadでうまく表示できないといろいろ言われるので、開発段階で確認するためのMemo. Google先生に聞くと ibbdemo2 というAdobe Air製のEmulatorがHitするけど、Web BrowsingするときはHost PCのSafariを使っているみたい。 iPadでよく問題になるposition:fixedなどを確認するにはXcodeに付属するiOS Simulatorを使うのが間違いない。 Xcodeは Apple Dev Center からDownloadできる。Version 4からはDeveloper Programを買わないとDownloadできないみたい。Version 3までは無料。最新は3.2.6 今開発で使っているMac ServerはSnow Leopard. Mac OS X Server 10.6.8(Mac mini). LionにUpgradeすると、いろんなApplicationが動かなくなるみたいなので、当分する予定はない。 約4GBのDisk ImageをDownloadしてInstallしたあとは下記DirectoryにiOS Simulatorがある。 //Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/ 起動後、Hardware -> Device -> iPadを選択。 iOSのVersionも選択できる。   < 2012/12/04 Modified > Windowsの場合はSafariを使うと簡易的に確認できる。 Preferences → Advance → Show Develop menu in menu bar で下記のようにUser Agentを選択できる。 Customize ToolbarからGoogle ChromeのDeveloper Toolsと同じようなWeb Inspectorも使えるので開発するには便利。 右Click → Inspect Element からも起動可能。   < Related Posts &

Blueprint と 52framework は試してみたけど今度はこれを使ってみる予定。 米Twitter、Webアプリケーション開発のためのCSSフレームワーク「Bootstrap」をオープンソースで公開 - SourceForge.JP Magazine : オープンソースの話題満載 Official Site を見ればSampleが豊富なので、何ができるか分かる。 他のCSS Frameworkを使っていれば、特に迷うことはなさそう。 ただ LESS というCSS pre-processorを使っているので、この使い方は覚える必要がありそう。 今までCSSはIndentとCommentで構造化を表現していたけど、この際Bootstrapを導入して統一していこうかと迷う。 難点は私以外Maintenance出来なくなる・・・（今の会社では）。 ちなみに「less css」で検索するとLess Frameworkという別のCSS frameworkがHitする。これもそのうち調査するかも。 Less Framework 4   < Related Posts > HTML5 + CSS3に対応したFramework「52framework」 CSS Framework「YAML」

WordpressのDesign変更に伴い、使用するThumbnailの画像Sizeも変更になったので、今までUploadした画像を再変換。 下記Pluginを使うと管理画面のMedia Settingsの設定値に従い、Upload済みの画像を再変換、再登録してくれるので便利。 WordPress > Regenerate Thumbnails << WordPress Plugins 今まで登録された画像はそのままuploadsに残る。 ＼(^o^)／ 自作しなくて済んだ

Web Pageを公開するときに hoge.net www.hoge.net の両方閲覧できるようにしたけど、ajax通信するときなどに失敗するかもしれないので、片方に統一するために調べたMemo. 下記Siteに答えが。 www.付きドメインとサブドメインの.htaccessリダイレクト at まとめたブログ: WordPress RewriteEngine on RewriteCond %{HTTP_HOST} ^(hoge\.net)(:80)? RewriteRule ^(.*) http://www.hoge.net/$1 [R=301,L] これを.htaccessに記述すれば転送してくれる。   < Related Posts > .htaccessで特定のファイルだけ参照不可（禁止）にする .htaccessと.htpasswdで簡易ユーザ認証 URLが存在しない場合トップにリダイレクトする.htaccessの設定

Google Apps(Free)で新しくAccountを作成したときにやること。 共通AccountのCalendarに書き込み権限を付与 なぜか「Invalid」と怒られた。この場合はGoogle Apps Control PanelをLogoutして試す Groupに追加 Google Docsで管理しているAccount Listを編集   < Related Posts > [Google Apps]別DomainをDomain AliasかMulti Domainで追加する Singaporeの会社でもGoogle Apps(Free)を導入してみた(Emailはまだ)

Singaporeに来てから初めての海外旅行。行き先はタイ(Thailand)のバンコク(Bangkok)！ 簡単なScheduleは下記 2011/08/27（土） 14時の飛行機でBangkokへ 2011/08/28（日） Thai式massageを体験 2011/08/29（月） Thai boxing（ムエタイ）を見る 2011/08/30（火） 16時の飛行機でSingaporeへ帰る いろいろ面白かったから詳しくは直接聞いて♪ 今回はThai Boxing（ムエタイ）を見るための方法を紹介。 「地球の歩き方」には現地でTicketを買った方が安いと書いてあったけど、2日目に夕飯を食べたところで聞いてみると、 H.I.S で買った方がその日の試合場所を調べてくれて、安心できるとのこと（Thai BoxingのStadiumは２つある）。 ちなみに親切に教えてくれたのは「俵屋(TAWARAYA)」（ Google Mapで表示 ）の店長さん。 鍋も美味しかったのでオススメ。今度2号店を出すらしい。 さて、さっそく次の日の午前中にH.I.Sに寄ってThai BoxingのTicketをGet. 1900 バーツ（約4900円）。 日本語が通じるので安心。Taxiの運ちゃんにH.I.Sで渡してもらった紙を見せると連れていってくれる(Thai語で場所が書いてある）。 Stadiumに着くとOrangeの服を来たStaffが寄ってきて、「Ticketある？」と聞いてくる。「地球の歩き方」には「怪しい人」と書いてあったけど、この人達は多分本当にStaffの人たち。Ticketを見せたら会場の中まで案内してくれた。 で、試合風景がこれ（1 round）。 1, 2 roundはお互い攻めない。3 roundからお客も盛り上がってくる。18:00から開始しているけど、Main Event（Rankが上）の試合は20:00と21:30ぐらいから。 Main Eventの試合まで我慢出来なかったけど、本場の試合が生で見れて満足。ちなみにThaiで「ムエタイ」と言ってもほぼ通じない。現地では「Thai Boxing」らしい。   泊まったHotel: アドミラル スイーツ ホテル

Singaporeの会社でもGoogle Apps(Free)を導入して、設定方法を説明するために調べたときのMemo. 今回の難点は、今までEmailで使っていたDomainがGoogle Appsの Aliasの機能で追加 されていること。理由は 前の記事 を参照。 → Multi Domainで追加すればいいことが分かった。   MailerのPOP設定： POP - Gmail Help , Supported POP client list - Gmail Help MailerのSMTP設定： Configuring other mail clients - Gmail Help iPhone(Mobile)の設定： Google Sync for your phone   Google Sitesを使って社内用HowToを作るつもり。本当は「分からなかったら下記Siteで検索してね♪」で済ましたい。 Google Apps Learning Center   < Related Posts > Singaporeの会社でもGoogle Apps(Free)を導入してみた(Emailはまだ) Google Appsの使い方動画

Google AppsのDomain Alias機能を使っていると、iPhoneや携帯のwebからEmailを送信したときに送信元がPrimaryになってしまうので調査したMemo. まずは今までの経緯。 Singaporeの会社でもGoogle Appsを導入したい 5月にGoogle Apps(Free)が10人に制限されるので、適当なDomainを取得 会社のDomainをDomain Aliasの機能で追加すると、少し設定が必要（この設定を説明するのが大変）というのが分かった。 この辺は下記記事も参考に。 Singaporeの会社でもGoogle Apps(Free)を導入してみた(Emailはまだ) Domain Aliasの機能で追加した場合に何が面倒かというと 最初にEmailの送信元を追加して、Defaultを変更しないといけない iPhoneの「Exchange」で設定した場合に送信元をPrimaryから変更できない。 携帯のWebから送信したときも送信元を変更できない。 調べてみると、Domain Aliasの他にMulti DomainがFree版でも利用できるようになっていた（ちなみに英語版）。詳細は下記 個別のドメインとドメイン エイリアス - Google Apps ヘルプ Multi Domainで追加する方法は、 Google Apps Dashbord -> Domain setting -> Add a domain or a domain alias ここで「Add another domain」を選択 ただ、制限事項もある。 複数ドメインの制限事項 - Google Apps ヘルプ Multi Domainを使うことでEmailの送信元の問題は解消。移行もSmoothにできそう。   < Related Posts > DomainをOnlyDomainsに移行した Singaporeの会社でもGoogle Apps(Free)を導入してみた(Emailはまだ)