投稿

9月, 2011の投稿を表示しています

[Chrome Extension開発] Chrome Web Storeに登録

Google Chrome Extension "History Plus"をChrome Web Storeに登録したときのMemo.手順はOfficial Siteに詳しく書いてある。チュートリアル: スタート ガイド - Chrome ウェブストア - Google Code公開するために必要なFileApp icon(128x128)
画像の準備 - Chrome ウェブストア - Google Codesource 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を使った開発事始め

Google Chrome Extension "History Plus"の開発

イメージ
Webの技術だけで出来るみたいなので、Closure Libraryの勉強も兼ねて作ってみた。作った拡張機能はChrome Web Storeを使って世界中に配信できる。最初に$5(約380円)支払えば好きなだけ公開できる。History Plusの画面はこれ。Installすると履歴画面(Ctrl-H)を置き換える。機能日付範囲を簡単に切替 表示数を簡単に切替 全ての履歴削除 同じDomainはまとめる 訪問回数を表示 使った技術と必要なLink集Google Chrome Extensions - Google CodeClosure 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 >
まだBugがあるけど、とりあえず公開。
Chrome Web Storeの"History Plus"
GitHubはこちら。< Related Posts >Google Closure Libraryを使った開発事始め

[Google Analytics]Profile作成時に申請したURL以外(開発環境)でもTrackingする?

イメージ
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しておけばいい。< Related Posts >Google AnalyticsでFacebook LikeとTwitterをTrackingするAjax通信しても固定URLを持たせてGoogle Analyticsに記録したい最強のアクセス解析ツール「Google Analytics」

Windows7からはcmd.exeの代わりにPowerShellを使った方がいいことに気付いた

イメージ
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 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 CodeClosure Library Demo IndexGoogle JavaScript Style Guide ( 日本語 ) 始め方はOfficial Documentがわかりやすい。最初に読み込むbase.jsには便利な関数があるので、このManualには一度目を通しておく。英語が苦手な場合は下記Blogも参考に。Closure Libraryで遊ぶ - dunno logsClosure Library を使うべき 10 の理由 - WebOS GoodiesClosure Libraryによるアプリ開発のはじめ方 - WebOS Goodiesちょっと使ってみた感じは、jQuery + jQuery UIに比べてかなり敷居が高い。demoを見てやりたいことが分からなかったら、Google先生に聞くよりSource CodeをGrepした方が早い。Commentは結構たっぷり書いてあるけど、英語が分かって、Object指向のJavaScriptの書き方を知っていないと辛いかもしれない。頻繁に使いそうなLibraryをMemoLibraryCommentgoog.base.jsisFunction, cloneObjectとかUtility関数が詰まってるgoog.domgetElementなどDOMの操作goog.dom.classescss classの操作goog.stylecss styleの操作をMethodで提供している。goog.cssomは直接CSS名を指定して操作。goog.eventsgoog.events.listenでEventをBindする. EventTypeはgoog.events.EventTyp…

Google Voice, Asterisk, Androidで面白いことが出来そうな予感

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

JPEGについて再勉強。Baseline JPEGとProgressive JPEG

イメージ
JPEGに関する良記事を見つけたのでMemo. 大学のころは授業でJPEGのAlgorithmから習った気がするがもう忘れてしまった。JPEG 101: A Crash Course Guide on JPEGTitleだけ和訳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を教えてもらったので追記PhotoShopで最適な画像保存をする為に。ニアレストネイバー法やバイキュービック法でのリサイズやJPEG圧縮などを検証したよ。 / Maka-Veli .com< Related Posts >Web(オンライ…

iPad(iOS)で要素を固定(Position:fixed)を何とかする

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

自作PCするよりMac miniにWindows入れた方が幸せになれる?

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のデュアルディスプレイ環境を妄想してみた

[xyzzy]outline-tree2用のJavaScript関数(Class, Method)一覧表示する正規表現

イメージ
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")
(require "outline-tree/cr-regexp-internal")(in-package &…

HTML5とJavaScriptだけでRPGを作るFramework "RPG JS"。Browser market share

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

HTML5とJavaScriptでPDF作成できる"PDF.js"

Xcode(iOS SDK)のiOS SimulatorでiPadでの表示(Safari)を確認する

イメージ
最近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 >【Firefoxアドオン】FireMobileSimulatorでAndroidをエミュレート【Mac】Win…

Twitter製CSS Framework "Bootstrap"が良さそう

Blueprint52frameworkは試してみたけど今度はこれを使ってみる予定。米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]既にUpload済みの画像を一括でResizeするPlugin

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

.htaccessでredirect. wwwの付いたsubdomainに転送する

Web Pageを公開するときにhoge.net
www.hoge.netの両方閲覧できるようにしたけど、ajax通信するときなどに失敗するかもしれないので、片方に統一するために調べたMemo. 下記Siteに答えが。www.付きドメインとサブドメインの.htaccessリダイレクト at まとめたブログ: WordPressRewriteEngine 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)の新規User追加時にやること(自分用)

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はまだ)

ThailandのBangkokでThai Boxingを見てきた

イメージ
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は2つある)。ちなみに親切に教えてくれたのは「俵屋(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: アドミラル スイーツ ホテル

Google AppsのEmail設定を社員に説明するためのHelp

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

[Google Apps]別DomainをDomain AliasかMulti Domainで追加する

イメージ
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はまだ)