2011年9月30日金曜日

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

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 >

2011年9月29日木曜日

Google Chrome Extension "History Plus"の開発

Webの技術だけで出来るみたいなので、Closure Libraryの勉強も兼ねて作ってみた。

作った拡張機能はChrome Web Storeを使って世界中に配信できる。最初に$5(約380円)支払えば好きなだけ公開できる。

History Plusの画面はこれ。Installすると履歴画面(Ctrl-H)を置き換える。

screenshot01

機能

  • 日付範囲を簡単に切替
  • 表示数を簡単に切替
  • 全ての履歴削除
  • 同じDomainはまとめる
  • 訪問回数を表示

 

使った技術と必要なLink集

 

開発の動機

  • 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を使った開発事始め

2011年9月27日火曜日

[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を設定。

複数ドメインのトラッキング - アナリティクス ヘルプ

image

設定後のTrackingからFilterが適用されるので、今までのDataはそのまま残る。やるなら最初から設定しておかないと意味がないかもしれない。

IP AddressやCookieを使って、Filteringも出来るみたい。

社内からのアクセスを除外するにはどうすればよいですか? - アナリティクス ヘルプ

Google Analyticsで設定しなくても、PHPやJavaScriptで判断して、Tracking Code自体を出力しないようにすれば間違いない。

WordpressならGoogle Analytics用のPluginを使って、開発環境はDeactivateしておけばいい。

 

< Related Posts >

2011年9月26日月曜日

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で検索すると出てくる。

image

Windows PowerShell ISE(Integrated Scripting Environment)はPowerShell用の統合開発環境。InputとOutputがFrameで別れているので普通に使う分にも見やすい。

image

ただ慣れているLinuxのKeybindを使えないのが難点。

そのうちClosure Compilerを使ったCompileを自動化するScriptを試しに作ってみようと思う。

 

< Related Posts >

Google Closure Libraryを使った開発事始め

2011年9月23日金曜日

Google Closure Libraryを使った開発事始め

Google Chrome Extensionを作りたくなったので、勉強がてらClosure Library + 52frameworkで作ってみることにした。

Closure LibraryはGoogle製のJavaScript Library(Framework). GmailなどのGoogle製Web ApplicationのFront EndはこのLibraryを使っているらしい。

まずは開発に必要なLink集。

始め方はOfficial Documentがわかりやすい。最初に読み込むbase.jsには便利な関数があるので、このManualには一度目を通しておく。英語が苦手な場合は下記Blogも参考に。

ちょっと使ってみた感じは、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の操作
goog.dom.classes css classの操作
goog.style css styleの操作をMethodで提供している。goog.cssomは直接CSS名を指定して操作。
goog.events goog.events.listenでEventをBindする. EventTypeはgoog.events.EventTypeに定義されている。
goog.uiで作った場合はgoog.ui.Component.EventTypeになる
goog.dom.query jQueryなどで使われているselectorを実現してくれるPlugin.
file自体は下記の場所にある。
closure-library\third_party\closure\goog\dojo\dom
説明もFile内のheader部分に書かれているので、そちらを参考に。
goog.require('goog.dom.query');
だけで動く(たぶん)。
goog.dom.query('#hoge [id^=button]')
が出来るようになる。
やっぱりこれがあると開発効率がいい。

 

< Related Posts >

2011年9月22日木曜日

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

下記記事を読んで、日本かSingaporeでのGoogle Voiceの番号取得が待ち遠しくなった。

Google Voiceはやっぱりすごかった - @IT

前の記事Asteriskという構内交換機(PBX)というのも知っていたので、Google Voice + Asterisk + Android or iPhoneで社内の電話機を一掃して、より幸せな環境が手に入るような気がした。

来月当たりにOfficeも引越しするので、試してみる予定。既に試した人たちの記事をMemoっておく。

iPhoneも内線電話化することが出来るみたい。

遂に!! iPhone + Asterisk/trixboxでVoIP Over 3G が可能になった模様! - 【qloogTips】trixboxやAsterisk、macについて、スタッフのきまぐれで始めた株式会社クルーグ非公式ブログ

 

< Related Posts >

オープンソースのIP電話(PBX)「Asterisk」で内線番号を量産

2011年9月21日水曜日

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

jpgJPEGに関する良記事を見つけたのでMemo. 大学のころは授業でJPEGのAlgorithmから習った気がするがもう忘れてしまった。

Titleだけ和訳

  1. JPEGの概要
  2. 意味と明確化: JPEG vs JFIF/Exif
  3. なぜJPEG
  4. JPEG圧縮
  5. Baseline JPEG vs Progressive JPEG
  6. PhotoshopでのJPEG(Baseline/Progressive )形式
  7. JPEGを使う場面
  8. JPEGを使うのを避ける場面
  9. PhotoshopでJPEGを保存してみた
  10. JPEG圧縮を顕微鏡で見てみた
  11. 透過処理はJPEGで可能か
  12. JPEGに対抗する新しい圧縮形式:WebP

さきにWikipediaを読んでおくと理解が早い。関連する下記記事も参考になる。

個人的に覚えておきたいPointは。

  • JPEGはたくさんの色情報を保存できる+高圧縮なのが利点
  • Progressive JPEGは最初にボンヤリと表示してから鮮明に表示するので、大きな画像を読み込むのにUserを待たせなくていい。
  • 大きい画像はProgressiveの方が画像Sizeが小さくなる場合が多い。
  • 単色(色が少ない)の場合はPNGとかの方がSizeが小さくなる場合が多い。
  • IE6でもProgressive JPEGを表示できるけど、Baselineと同じ表示の仕方になる。
  • AUの携帯でProgressive JPEGを表示できない機種があるらしい。

 


< 2012/01/30 Modified >
画像圧縮に関する参考になるSiteを教えてもらったので追記


< Related Posts >

2011年9月20日火曜日

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>

2011年9月19日月曜日

自作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 >

2011年9月16日金曜日

[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 → 正規表現(ダイアログ設定有)
を選択。

image

image

思い通りに正規表現が出来たら、
アウトライン作成関数の生成 → 「正規表現」設定から
を選択して、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 "outline-tree2")

;; definition
(defun outline-tree-create-outline-user-regexp-outline-javascript (root-node)
  (outline-tree-create-outline-regexp-internal
   :root-node root-node
   :layer-regexp-list-order :non-miss
   :layer-regexp-list '("\\(\\.[A-Z]+?[a-zA-Z]+\\) = function" "\\(\\.prototype\\.\\)\\([_a-zA-Z]+\\) = function")
   :layer-regexp-list-case-fold nil
   :sub-type :heading-node
   :line-oriented nil
   :title-converter nil))
;; register
(outline-tree-add-create-outline-function
'outline-tree-create-outline-user-regexp-outline-javascript "* user : javascript-oo" '(:user :sequential)
"Class, Method list for Object Oriented Javascript")

;;; cr-user-regexp-outline-javascript.l ends here

 

このように表示されるようになる。

image

ちなみにGoogleのCoding規約に従って書いているつもり。

Google JavaScript Style Guide日本語版

 

< Related Posts >

【xyzzy】【outline-tree2】PHP用マクロ

2011年9月15日木曜日

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

RPGは作るつもりはないけど、PromotionやFlashでやっていたことをこのFrameworkを使うことで面白いことが出来るかもしれない。

RPG JS: Your online RPG on your browser

iPhone, iPad, AndroidなどのMobileで表示できるのは大きいけど、やっぱりIE8で表示できないのも大きい(今の時点で30%)。

2011年9月13日火曜日

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を選択できる。

image

Customize ToolbarからGoogle ChromeのDeveloper Toolsと同じようなWeb Inspectorも使えるので開発するには便利。

右Click → Inspect Element
からも起動可能。

image

 

< Related Posts >

2011年9月12日月曜日

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 >

2011年9月8日木曜日

[Wordpress]既にUpload済みの画像を一括でResizeするPlugin

WordpressのDesign変更に伴い、使用するThumbnailの画像Sizeも変更になったので、今までUploadした画像を再変換。

下記Pluginを使うと管理画面のMedia Settingsの設定値に従い、Upload済みの画像を再変換、再登録してくれるので便利。

WordPress > Regenerate Thumbnails << WordPress Plugins

今まで登録された画像はそのままuploadsに残る。

\(^o^)/ 自作しなくて済んだ

2011年9月7日水曜日

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

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 >

2011年9月6日火曜日

Google Apps(Free)の新規User追加時にやること(自分用)

Google Apps(Free)で新しくAccountを作成したときにやること。

  • 共通AccountのCalendarに書き込み権限を付与
    なぜか「Invalid」と怒られた。この場合はGoogle Apps Control PanelをLogoutして試す
  • Groupに追加
  • Google Docsで管理しているAccount Listを編集

 

< Related Posts >

2011年9月5日月曜日

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で表示)の店長さん。

IMG_0153

鍋も美味しかったのでオススメ。今度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: アドミラル スイーツ ホテル

2011年9月2日金曜日

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 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 >

2011年9月1日木曜日

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

Google AppsのDomain Alias機能を使っていると、iPhoneや携帯のwebからEmailを送信したときに送信元がPrimaryになってしまうので調査したMemo.

まずは今までの経緯。

  1. Singaporeの会社でもGoogle Appsを導入したい
  2. 5月にGoogle Apps(Free)が10人に制限されるので、適当なDomainを取得
  3. 会社の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」を選択

image

ただ、制限事項もある。

複数ドメインの制限事項 - Google Apps ヘルプ

Multi Domainを使うことでEmailの送信元の問題は解消。移行もSmoothにできそう。

 

< Related Posts >

Related Posts Plugin for WordPress, Blogger...

Blog Archives