SE奮闘記

Xcode 4 の初期設定と新機能について

2012-01-26T11:57:00.001+09:00

1年ちょいぶりにiOSアプリ開発をしようとしたら、Xcode 4の設定と使い方に戸惑ったのでMemo.

環境: Mac OS X 10.7.2, Xcode 4.2.1

1. 自動生成される名前と"MyCompanyName"を設定

Fileを作成したときのHeader部分に挿入されるCommentは"Address Book"の情報を使うので、編集しておく。

2. Xcode 4の新機能"Storyboard"を理解する

まず下記Documentを読んで全体をザックリ把握しておくと理解が早い。

[iOS Developer Library] iOSテクノロジーの概要

"Storyboard"はUser Interfaceを全体を把握しながら設計できる。

ControllerからControllerへの遷移(Segue)、Viewの編集など、今までInterface Builderで行なっていたことを包括して出来るようになっている（たぶん）。

今までUMLや別Documentで管理していた遷移図をXcode上で表現出来るようになった感じがするので、このStoryboardを理解しておくと、設計段階でApplicationの全体像の把握や開発への落し込みが素早くできると思う。

さらに詳しい情報は下記Documentを読んで理解する（英語）

[Mac OS X Developer Library] About Xcode 4

3. Xcode 4で新規Projectを作成すると"Resources"Folderがない。

File → Add Files to "Hoge"...
を選択するとResourceに追加される。

追加されたResourceを確認するには
Projectを選択 → Build Phases → Copy Bundle Resources
に表示されている。

< Related Posts >

[Titanium Mobile] ModuleをInstallする方法

2012-01-20T12:04:00.001+09:00

前の記事でTitanium StudioをInstallした後の続き。Example Applicationsの"ABC's Writer"を動かすためにModuleをInstallする方法.

環境: Mac OS X 10.7.2, Xcode 4.2.1, Titanium Studio 1.0.7

Official Documentは下記

Using Titanium Modules - Titanium Studio - Appcelerator Wiki

Paint moduleの配布場所はこちら. "Download Now"をClickすると"MY PRODUCTS"に表示される。

"Paint module"のiconをClickするとzip形式でDownload出来る。

zipごとRootに置いて解凍。階層構造は次のようになるはず。

これでCompileしてみる。ti.paintが見つからないとErrorが出る場合は、tiapp.xmlを開いて再度保存してみるとうまくいくこともある。

< Related Posts >

iOS, Android開発をJavaScriptで行うTitanium Mobileを試す

iOS, Android開発をJavaScriptで行うTitanium Mobileを試す

2012-01-19T11:51:00.001+09:00

Adobe Digital Publishing SuiteのLicense価格が高いので、JavaScriptでサクッとiPad Appが作れると噂の"Appcelerator Titanium Mobile"を調査。

環境： Mac mini (Mac OS X Lion 10.7.2) (Mid 2010版), Xcode 4.2.1

ちなみに"Titanium"の発音は「タイテニアム」

1. Download "Titanium Studio"

AppceleratorのOfficial Siteから"Download Titanium"をClick. 初めての場合はAccountを作成（無料）してDownload.

今のVersionは1.0.7

2. Install "Titanium Studio"

まだXcodeをInstallしていない場合はApp StoreからInstallしておく。

DownloadしたdmgをDouble ClickでMountして、画面の指示に従ってApplication FolderにDrag&Dropするだけ。

起動するとJavaを自動でInstallしてくれる。さらにPluginもUpdateされるので、しばらく待つ。

3. Create "Hello World" application

左Panelの"Create Project" → Titanium Mobile Project →

Project name: HellowWorld
App Id: net.hoge.helloworld
URL: http://hoge.net/

Firefoxの有無をCheckするのでInstallしておく。

作成後、Run → Runを実行するとCompile後iOS Simulatorが起動されて実行できる。

4. Import "KitchenSink" Sample App

ControlのSample集"KitchenSink"をInstallする。

File → Import... → Git - Git Repository as New Project

GitHubのURIを入力する。

https://github.com/appcelerator/KitchenSink.git

Run → Run Configurations
を設定して、実行できるか試してみる。

5. Read documents

価格は基本無料。Supportで収益化するBusiness Modelらしい。詳しくはOfficial Siteで。

Plans & Pricing | Appcelerator

大人しくOfficial SiteのTraining動画を見るのが分かりやすいと思う。英語だけど。

Zero-to-App | Appcelerator University

日本語は下記SiteのWikiが詳しい。でも少し情報が古い

Appcelerator Titanium Mobileに関するドキュメントを日本語でまとめていくプロジェクト - Google Project Hosting

その他

Titanium mobile で開発しだしたら役に立つ情報のまとめ » astronaughts.net

< Related Posts >

Adobe InDesign CS5.0を利用したiPad App開発環境を整える。ADPSの関連Link集

2012-01-18T11:25:00.001+09:00

Adobe InDesign + Adobe Digital Publishing Suite (ADPS)を利用してiPad Appを作成したときのMemo. 概要は前の記事を参照。

環境: Max OS X 10.7(Lion), Adobe Creative Suite 5.0 Design Premium（英語版）

参考にしたのはApp Storeで配信されているADPS GUIDE。このAppに作成からiPad Appになるまでの手順が分かりやすく解説されている。

Adobe Digital Publishing Suite マニュアルとSampleのアセットデータは下記Siteで配布されている。

活用ガイド | ADOBE DIGIPUB MAGAZINE

その他参考になったSiteはこれ。

TIPS | ADOBE DIGIPUB MAGAZINE
SlideshowなどのSampleをInDesign形式でDownload出来る
(Adobe Official) InDesign Docs
InDesign関連の最新情報を配信している公式Blog
Digital Publishing Gallery
InDesign + DPSで作成されたAppが紹介されているGallery
書籍「ADPS & EPUBがやってくる InDesignで作る電子書籍」のサポートと、InDesignで作る電子書籍の情報を発信するブログ
この本買おうかな・・・。
Digital Publishing Technology Center | Adobe Developer Connection
DPSの技術関連情報はここが一番情報が豊富。英語だけど。
AdobeTV | Digital Publishing
機能紹介などの動画多数. 遅くて見てられない。

以下簡単なiPad Appを作成するまでの手順

1. Adobe InDesignにDigital Publishing Suite用のPluginをInstall

下記Official Siteを参考にしながら、"Folio Producer tools"と"Folio Builder Tools"をInstallする。Install後は再起動する。

Adobe Digital Publishing Suite * Installing digital publishing tools

Help → Updates...
から最新版にUpdateしておく。

2. 簡単な電子書籍を作る

File → New → Document ...

今回はSampleなので適当に作って保存。動きを確認するために2page以上がオススメ。

3. Preview

File → Folio Preview...
でiPadでの表示が確認できる。

4. Digital Publishing SuiteにUpload

Window → Extensions → Folio Builder
"Sign up"をClickしてDigital Publishing SuiteにAccountを作成。すでにAdobe IDを持っているなら、"Sign in"から。

"New"をClickして、Workspaceに新規Folioを作成。

"Add"をClickして、Sampleで作成したのをUpload.

"FOLIO BUILDER"のPreviewをClickすると、UploadしたContentでPreviewできる。

5. Adobe製Viewerを使ってiPad上で確認

Adobe Content ViewerをiTunes経由でiPadにInstallする。で、左上のSign InからFolio Builderと同じAdobe IDでSign Inする。。。

ここでAuthentication failedになる。

"Create Account"からはSign In出きるのになぜ？

6. 有償Accountを購入して、iPad Appを取得する。

実際にiPad App形式で取得するためには、有償Accountにする必要がある。詳しくは前の記事で。

< Related Posts >

"Closure Library プログラミングガイド"を読んだ

2012-01-13T12:26:00.001+09:00

今後Desktop ApplicationからWeb Applicationへ移行するにつれて、必要になってくる大規模Web Application向けJavaScript Library。その代表格"Closure Library"。

Closure Libraryを利用して勉強がてら作ったのが

Google Chrome Extension"History Plus v2.0"

GitHubでも公開しているので、興味のある方はそちらも参考に。

作ったはいいけど、読みにくいし、拡張しづらいので、もっと理解を深めるために参考書を読んでみた。買ったのはこちら。

日本のAmazonで購入 → 転送.comでSingaporeへ転送。海外への転送料金もバカにならないので、「おまとめ梱包」をうまく利用するのがオススメ。

この本はClosure Libraryの基礎知識などまとまっているので、これから勉強する人たちにもオススメできる。特に"5.1 UIフレームワークの基礎知識"は個人的に必読だと思う。

ただ実際に
Programmingする → 実行 → Componentを組み合わせて一つのApplicationを作り上げる
をやらないとなかなか理解しづらいと思う。

さらにClosure Library（の設計思想）を理解するのにObject指向やJavaScriptなど、それぞれ深いLevelの知識が必要なので、JavaやObject指向開発の経験がないと苦労すると思う。

著者の方のBlogでもClosure Libraryに関する情報を発信しているので要Check.

WebOS Goodies

さて、History Plusを作り直そう。。。

< Related Posts >

Adobe Dreamweaverを使うと開発効率が良くなるか調査

2012-01-12T14:51:00.001+09:00

Adobe Dreamweaver CS5.5はMobile Device向けの機能が強化されたり、CMS(WordPressのTheme)開発も簡単に出来るらしいので、実際使えるか調査。

ちなみに私がWeb開発するときに使う主なToolは下記。VMware Fusion以外は全て無料。

Xyzzy … Emacs likeなWindows向けText Editor
Subversion + TortoiseSVN … Version管理
FileZilla … FTP Client
Firefox + Firebug … 動作確認とDebug
Google Chrome + Developer Tools … 動作確認とDebug
VMware Fusion or VMware Server … 仮想PC上でIE7, IE8を確認

Dreamweaverはこれらが１つのSoftware上で実現している感じ。だけど、それぞれの機能は専用Softwareには敵わない。機能一覧はOfficial Siteが分かりやすい。

購入ガイド | Adobe Dreamweaver CS5.5

使いこなすにはHTMLやCSSの知識は必須なので中級者向け。Dreamweaverを買ってSiteを構築しようと思っている人がいたら、Google Siteやみんなのビジネスオンラインをオススメしたい。

ただ、Dreamweaver周りの技術系Siteには役に立つ情報が結構多い。

HTML, CSS, PHP, JavaScriptをしっかり勉強したあとでEditorとして利用するのは「あり」だと思う。

< Related Posts >

PDF出力をしようとすると"GothicBBB-Medium not found"

2012-01-11T15:01:00.001+09:00

印刷からPDF出力しようとAdobe Acrobat X Proの体験版をInstallしてハマったときのMemo.

環境: Windows XP SP3 32bit, Adobe Acrobat X 10.1.1, AMP Font Viewer 3.86

やろうと思ったのはFont一覧の作成。詳しくは前の記事を参照。

Acrobat（PDF出力用Printer Driver）のInstall → AMP Font Viewerから印刷
する時にPDFにFont情報を埋め込みたいので下記のように設定

"PDF 設定"を"雑誌広告送稿用"に
"システムのフォントのみを使用し、文書のフォントを使用しない"のCheckをはずす。

実行すると、下記Logが出力されてPDFが作成されない。

%%[ ProductName: Distiller ]%%
%%[ Error: GothicBBB-Medium not found, using Font Substitution. Font cannot be embedded. ]%%
%%[Page: 1]%%
%%[Page: 2]%%
%%[ Error: invalidfont; OffendingCommand: xshow ]%%

Stack:
[268 268 0]
(ＭＳ )

%%[ Flushing: rest of job (to end-of-file) will be ignored ]%%
%%[ Warning: PostScript error. No PDF file produced. ] %%

調べてみると、代替Fontに"GothicBBB-Medium"が設定されているのが原因らしい。解決方法は

プリンタとFAX → Adobe PDFを右Clickでプロパティ → デバイスの設定

"フォント代替表"の中にある"中ゴシックBBB"を"<Don't Substitute>"に設定すれば直る（二箇所）。

結局AMP Font Viewerの問題だと分かったので、フォント一覧印刷君を使うことにして、やりたいことは出来た。

< Related Posts >

TrueType, PostScriptなどFont関連用語とFont一覧表示

2012-01-10T11:57:00.001+09:00

Fontの一覧表を作成するときに関連用語と技術を勉強。

参考にしたのは下記Site.

File形式

TrueType	PostScriptに対抗してAppleとMicrosoftが共同で開発。MacとWindows両方でSupportされている。拡張子： .TTF, .TTC
PostScript	Adobeが開発。一昔前のDTP(Desktop publishing)界の標準。Windows2000から一部Support. 拡張子： .pfb, .pfm, .afm, .pfa
OpenType	TrueTypeの発展型。AdobeとMicrosoftが開発、Appleも賛同。PostScript形式も内包できる。FontがInstallされていなくても必要に応じて送受信できる"Dynamic Download"が規定されている。拡張子： .TTF, .TTC, .OTF

Font名の記号

記号	説明	例
@	縦書き用	@MS ゴシック
P	Proportional Font（可変幅Font）。文字毎に文字幅が異なる	MS Pゴシック
HG	全角、半角共に同じ幅。MS Officeに付属。	HGゴシックE
HGS	全角は同じ幅、半角は可変幅	HPSゴシックE
HGP	全角、半角共に可変幅	HGPゴシックE
DF	DynaFont. HGと同じ. 参考：DFとDFPとDFGの違いは？	DFPOP体
DFP	DynaFontのHGS	DFPPOP体
DFG	DynaFontのHGP	DFGPOP体
DC	株式会社システムグラフィの編集著作物で、ダイナコムウェアが販売	DC愛ラインW5
FA	NEC製FontAvenue（フォントアベニュー）	FA ゴシックB

一覧Soft(Windows用)

フォント一覧印刷君	画面は見やすいし、使いやすい。Windows7非対応。
AMP Font Viewer	Windows7対応。Category分けできる。印刷するときにSystem Fontが別のに置き換わってしまうバグ（？）がある。
FontExplorer X	有償。業界では有名らしい。昔は無償。

「フォントスタイルブック2009」みたいなのが手元にあると便利かも。

Adobe Font Folio 11.1（40万円）を購入すると2400種類のOpenType Fontが手に入る。ちなみに英語版はUS$2,999（日本円で約23万円）なので円高の今なら桁違いに安い。

< Related Posts >

Mac mini(Mid 2010)のMemoryを8GBに増築した

2012-01-09T11:35:00.001+09:00

VMware Fusion上でMac Lionを動かすようになったので、Memoryを4GBから8GBにUpgradeするまでの顛末.

環境: Mac mini(Mac OS X Lion 10.7.2)(Mid 2010版)

取り外し、取り付け方法はOfficial Siteに図付きで説明がある。Memoryの仕様も情報があるので、買う前に確認しておいた方がいい。

Mac mini：メモリの取り外し方法と取り付け方法

Mac mini(Mid 2010)のMemory仕様: PC3-8500 DDR3 1066MHz

検索して買ったのはこちら。

小計:	￥2,897
消費税:	￥145
合計:	￥3,042

転送.comを使って他の書籍と一緒にSingaporeに郵送。

・・・が、取り付けてみると起動しない。「ブー、ブー」と警告音がなってDisplayに何も表示されない。

Memoryが壊れているのかと思って、会社の人のMac Book ProにInstallしてみると普通に認識してしまった。しょうがないので、これはその人にS$50で売却。

今度はSingaporeの「秋葉原」Sim Lim Squareの４階"Memory World"に行って購入。１つS$55を２つでS$100にしてもらった。

日本の２倍以上・・・。ボラれてたのかなー。買ったのはこれ。

で、装着してみても、やっぱりダメ。

ReceiptのTerms & Conditionには「返品不可」と書いてあったけど、ダメ元でMac miniごと持って行って「動かなかったよ？」と言ってみた。

すると、その場で別のMemoryに換えてくれて、動作確認までしてくれた。取り替えたのはこちら。

片方は動作しなかったMemoryと同じだけれど気にしない。ちなみにMac miniにDefaultで搭載されていたMemoryはこちら。

Mac mini用にMemoryを買うならSamsungかTranscendが良さそう。

< Related Posts >

VMware FusionをCommand Line（SSH経由）で操作

2012-01-03T11:17:00.001+09:00

VMware Fusion上のVirtual MachineをRemoteから起動、停止する方法。LionにしてからServerがBusy状態だとVNC経由でLogin出来なくなるので。

環境: Mac mini(Mac OS X Lion 10.7.2)(Mid 2010版), VMware Fusion 4.1.1

VMware Fusionに付属しているvmrunというUtilityを使うと出来る。Official Siteから配布されいるPDF Manualが一番詳しい。

Using vmrun to Control Virtual Machines(PDF)

vmrunへのPATHを通す
$ vi ~/.bash_profile

# for vmrun of VMware Fusion
PATH="$PATH:/Applications/VMware Fusion.app/Contents/Library/"
export PATH

これでLoginし直してPATHの確認。
$ printenv PATH

よく使いそうなCommandをMemo.

Command	説明
vmrun -T fusion list	今起動しているVMを一覧表示
vmrun -T fusion start <Path to vmx>	vmxを指定してVMを起動
vmrun -T fusion stop <Path to vmx> soft	VMware ToolsがInstallされていれば各OSに合わせたShutdownを実行してれる。"soft"を"hard"にすると強制Power Off
vmrun -T fusion reset <Path to vmx> soft	再起動
vmrun -T fusion suspend <Path to vmx>	一時停止

例：

Virtual Machine置き場に移動
$ cd /Shared\ Items/VirtualMachines/

今起動しているVMを表示
$ vmrun -T fusion list

vmxを指定して仮想PCを起動
$ vmrun -T fusion start MacOSXLion.vmwarevm/Mac\ OS\ X\ 10.7\ 64-bit.vmx

起動したら、VNCやWindowsの場合はRemote Desktopとかで操作した方が楽。

< Related Posts >

2012年 Singaporeで迎えるお正月

2012-01-01T19:32:00.001+09:00

Singaporeに来て10ヶ月。初めて地元以外で迎える正月かもしれない。

年越しは一緒にShareしている日本人のお姉様が、お正月っぽい料理を用意してくれた。

ジャ、ジャーン！

そのお姉様はNHKの契約をしているので、TVで「紅白歌合戦」も見れてしまう。

「暑さ」と「1時間の時差」を除けば、ほぼ日本と同じお正月を満喫。

ありがたやー。

そして、今は会社で2011年を振り返ってみる。

Singaporeに来て、「英語」、「仕事」、「空手」とそれぞれ進む方向が見えたので、2012年は走り切る感じかな。

特に英語はあと1年でちゃんと文章で話せるようになりたい。

< Related Posts >

"ハッカーと画家(Hackers and Painters)"を読んだ

2011-12-29T17:23:00.001+09:00

会社の人に勧められて読んだ本。

こういった本を読むのは精神的にもいいと思う。閉じた世界の窓を開けて空気の入れ替えをする感じ。

思ったことを箇条書き。まとまってないけどね。

「日本人は最初から完璧な物を作ろうとするから、欧米人のように作りながら新たなIdeaを生み出すような考え方のほうがSoftwareを創りだすには適している。」
→ これを読んでGoogle Chrome Extension "History Plus"をとりあえずReleaseした。
「大企業は委員会で設計し、ハッカーはただそれを実装するだけ。」
「ソフトウェアはデザインを知っているハッカーによってデザインされるべき」
EmacsとXyzzy関連でLISPを噛ったけど、もう少し勉強してみようかな。

< Related Posts >

「20歳を過ぎてから英語を学ぼうと決めた人達へ」を読んだ

iPad向け電子書籍AppをAdobe InDesign + Digital Publishing Suiteで作成するためのまとめ

2011-12-22T11:38:00.001+09:00

1年前に調査したときはβ版だったのが、Adobe InDesignからiPad App, Android Appが作成できるようになっていたので、詳細を調査。

1. Adobe InDesign単体ではEPUB形式のみ対応

InDesign単体ではEPUB形式に書き出せる機能がある。しかし、iPad Appを生成してくれるわけではない。iPad Appを生成するには別途Digital Publishing SuiteというServiceを利用する必要がある。

EPUB形式は電子書籍の規格の一つ。読むためには別途電子書籍Reader（iPadやiPhoneはiBooksが標準でInstallされている）が必要。簡単にいうと、HTML5とCSS3がzip圧縮されている。

2. Adobe Digital Publishing Suite (ADPS) とは

Adobe InDesignから.folio形式に書き出し → AdobeのServerにUpload → iPad, Android向けにCompileされた状態でDownload
を提供してくれるService. 2011年9月から販売開始。詳しくはOfficial Siteで。

Sample AppがiTunes App StoreからDownload出来るので、これを読むと何が出来るのかが分かる。

ADPS GUIDE for iPad on the iTunes App Store

[ Index ]

ADOBE DIGITAL PUBLISHING SUITEの概要
はじめに - 制作するにあたっての準備
インタラクティブコンテンツの制作 [ サンプル ]
インタラクティブコンテンツの制作 [ 作り方 ]
Folio Producer Service
データのアップロードと管理
ADOBE DIGITAL PUBLISHING SUITEの利用

Pointとしては

Adobe InDesign CS5/CS5.5が必須。
Objective-CのSource Codeは入手できない。AdobeのServerにUploadしてCompileされる。
基本料金（Platform fee）と.folioごとに費用（配信サービス費用）が発生する

3. Adobe Digital Publishing Suiteの費用

日本では現在Professional EditionとEnterprise Editionのみ。詳しくは購入ガイドで

※SingaporeのAdobe担当者と話したときには、Agency（代理店）の場合はEnterprise Editionしか選択できないと言われたので、この辺はBusiness Modelと比較してよく調査した方がいい。

	初年度	次年度
Professional Edition	基本料金: 60万円（5000folio含む）＋配信サービス費用	基本料金: 60万円＋配信サービス費用
Enterprise Edition	別途見積もり	別途見積もり

USの場合はさらにSingle EditionとProfessional Edition Monthlyがある。詳しくはOfficial Siteで。

この他にもiPadにAppを配信するためのiOS Developer Programの登録も必要になる。

iOS Developer Program: 8,400円
※ iTunes App Storeを利用して配信する場合
iOS Developer Enterprise Program: 24,800円
※ 自前Serverで配信する場合

4. 流行るか？

必ずと言っていいほどiPad向けに電子書籍を配信したいという要望はあるので、Programmingの知識なしでiPad Appが作れるのは魅力だと思う。

ただAdobe Digital Publishing Suiteが提供している機能内で収まる要件ならいいけど、それ以外の追加要望を捌けるかどうかが分かれ目になるかな。

< Related Posts >

Adobe InDesignでプログラミングなしでiPadアプリを作れるか

VMware FusionにVirtual MachineとしてMac OS X LionをInstallする方法

2011-12-21T12:05:00.001+09:00

App Storeから購入したMac OS X Lionを再Downloadして、VMware FusionのVirtual MachineとしてInstallする方法。

環境: Mac mini(Mac OS X Lion 10.7.2)(Mid 2010版), VMware Fusion 4.1.1

Mac OS X 10.7からLicenseが変更されて、Lionが既にInstallされているPC上に最大２つまで仮想PCとしてLionをInstallできるようになった。詳しくは下記参照。

VMware KB: Installing Mac OS X 10.7 (Lion) as a virtual machine in Fusion 4

1. Mac OS X LionをApp Storeから再Download

LionにUpgradeしてしまうと自動的にInstall Imageが削除されてしまうので、もう一度App StoreからDownloadし直す。

App Store起動 → (Option Keyを押しながら)Purchases → INSTALL

2. Install Disk Image(dmg)を作成

Applications → Install Mac OS X Lionを右Click → Show Package Contents → Contents → SharedSupport → InstallESD.dmgをDouble ClickしてMount

Applications → Utilities → Disk Utilityを起動

"New Image"をClickして新規Disk Imageを作成

Mountしてある"Mac OS X Install ESD"を選択して、"Destination"にさっき作ったImageをDrag&Dropする。

3. VMware FusionにInstall

VMware Fusion起動 → File → New ...

作成したdmgを選択して"Mac OS X 10.7 64-bit"の仮想PCを作成

< Related Posts >

SWF形式のBGMを停止、再生する方法とvideo tagを使ってiPadも対応する

2011-12-20T16:13:00.001+09:00

Web SiteにBGMを埋め込んだときの手順をMemo.

環境: Adobe Flash Professional CS5, swfobject 2.2

1. BGM用の曲(MP3)をSWFに

Adobe Flash Professionalが使える環境なら
File → Import → Import to Library ...
からMP3をImportして、TimeLine PanelにDrug&Dropすれば完了。ActionScriptは

Play();

を埋め込んでおく。

後で気付いたけど、Flowplayerにmp3を再生する機能があるので、これを使った方が簡単にできる気がする。

2. PCとMobileを判断してSite埋め込む

iPhone, iPadではswfを再生できないので、前の記事を参考にPCかMobileかを判断して、Mobileの場合はHTML5のVideo tagを使うようにする。

3. 再生、停止する方法

PCの場合は、swfobjectをつかって、

再生する場合はembedSWF
停止したい場合はremoveSWF

すればいい。（今ならFlowplayer + mp3でやる）

video tagの場合は下記Siteを参考に。ちなみにiPadで画面読み込みと同時に曲の再生は出来ないみたい。

Safari HTML5 Audio and Video Guide | Safari Developer Library

< Related Posts >

NHKオンデマンドを登録、利用してみた。

2011-12-19T11:55:00.001+09:00

NHKスペシャルでSteven Jobs氏の特集をやるので、「これは見なきゃ！」と思ったけど、Singaporeの家にはTVがない。調べてみるとNHKオンデマンドで過去の番組を動画配信しているみたいなので、試しに登録して視聴してみた。

NHK スティーブ・ジョブズ特集｜NHKスペシャル世界を変えた男スティーブ・ジョブズ（仮）

ちなみに通常NHKオンデマンドは海外から利用できない。

個人的には知識系の番組が好きなので、"その時歴史が動いた"は凄く惹かれる。

価格も単品で105円～なので気軽に視聴できる。（詳しくは利用料金表を参照）

しばらくは週一で見ていこう。

< Related Posts >

【CentOS】プロキシサーバーSquidのインストールして設定

Mac OS X Lion Serverを購入してInstall(Upgrade)

2011-12-16T11:44:00.001+09:00

前の記事でClean InstallしたMac mini(Snow Leopard Server)にOS X Lion ServerをApp Storeから購入してInstallしてみた。

OS X Lion Server 4300円
OS X Lion 2600円
計 6900円

ここからはハマったときのLogなので読み飛ばしてOK

購入後Dockに
"OS X Lion Server - Waiting..."
が表示され、一向に動かない。Activity Monitorを見ると、何かしらDownloadしているみたいなので、しばらく放って置いた。

・・・で、２時間経過

さすがに痺れを切らして、Mac mini自体を再起動。
再起動後は、Dockに
"OS X Lion - Paused"
"OS X Lion Server - Paused"
と表示され、App Storeから"Install"をClickしても変化しない。

system logを確認すると以下のようなErrorが出ていた
$ less /var/log/system_log

Dec 13 19:51:17 saturn storeagent[201]: wrote primary DSID: 212901445
Dec 13 19:51:20: --- last message repeated 1 time ---
Dec 13 19:51:20 saturn App Store[907]: Calling purchase callback
Dec 13 19:51:21 saturn storeagent[201]: CANCEL 2: -[DownloadQueue _notifyClientsAboutDownloadsChange:forSource:]
Dec 13 19:53:18 saturn [0x0-0x16016].com.apple.iTunes[932]: AppleGVA:: Error creating the accelerator 1
Dec 13 19:54:33 saturn App Store[907]: *** Assertion failure in -[ISDistributionManager verifyDistributionAtURL:allowsDevSign:error:distributionControl
ler:], /SourceCache/Pisa/Pisa-60.8/Source/ISDistributionManager.m:183
Dec 13 19:57:42 saturn [0x0-0x12012].com.apple.appstore[907]: Tue Dec 13 19:57:42 hoge.com.sg App Store[907] <Error>: CGBitmapContextGetBitsPerComponent: invalid context 0x10036e340

やったこと

固定IP Addressに変更
Preference → Networkで"AirPort"をOff
DNS Serverの設定もそれに合わせて変更

で、結局

App Store → MenuのStore → Check for Unfinished Downloads ...

から再開(Resume)出来た。

4GB近いFileをDownloadするので時間が掛かってたみたい（？）

InstallはOS X Lion → OS X Lion Serverの順に行う。ただOS X Lion ServerをInstallしようとしても、「既にInstall済みです。」と言われ、Install出来ない。

Dockの中には"Server"がいるので大丈夫なのかな？

< Related Posts >

Mac mini ServerをNetwork経由でClean Installする方法

2011-12-15T11:38:00.001+09:00

1年半前に買って、Singaporeに来てからも大活躍していたMac mini Server. Lion ServerにUpgradeしたくなったので、Clean Installからやってみた。

Mac mini (Snow Leopard Server) (Mid 2010版)

詳しくはOfficial Supportに方法が載っている。

リモートインストール Mac OS X v10.5 および v10.6 を使ってソフトウェアを再インストールする方法

1. Install Utility起動

Macがもう一台あれば、そちらにInstall Diskを挿入したあと、
Utilities → Remote Install Mac OS X
を選択。画面に従って、待機状態になるまで進めていく。

Windowsしか周りにない場合は、リモートアシスタントを使うと出来るらしい。
詳しくは"OS X Lion：Windows 移行アシスタントについて"へ。

一台が待機状態になったら、InstallしたいMac miniを再起動。起動中に"Option"Keyを押し続ける。

起動後は右のRemote Install Mac OS Xを選択。Ethernetに接続してあれば、Networkは選択する必要なし。

2. Disk UtilityでRaid1構成にする

500GBのDiskが２つあるので、今度はRaid1構成にしてみる。

Install画面のMenuに"Disk Utility"があるので選択。

２つのDiskをそれぞれ"Format: Mac OS Extended(Journaled)"でErase

"RAID"から"RAID Type: Mirrored RAID Set"を選択。左PanelからFormatしたHDDをDrag&Dropする。

これでCreate。

Disk Utilityを終了。作成したDiskを選択してInstall実行。

3. Install後の設定

OS Install自体は40分ぐらいで終わる。その後、Serial Numberの入力などの初期設定。

ちなみにLoginした後もSoftware Updateを行うとさらに40分ぐらい掛かる。

さて、次はLion ServerへUpgradeしてVMware Fusion4をInstallする予定

< Related Posts >

Mac mini(snow leopard server) + VMware fusion 3を買った

Google Analytics導入時にやるべき初期設定（FilterとSocial Pluginへの対応）

2011-12-13T12:23:00.001+09:00

Google AnalyticsのTracking CodeをSiteに設置してから、行うべき設定をまとめてみた。

Filterを使って、指定したDomain以外はTrackingしないようにする
Webmaster ToolsとGoogle Analyticsを連携させる
Facebook Like, Twitter, Google +1のSocial系PluginもAccess解析する
その他、Trackingしたい箇所でEvent情報を送信するScriptを埋め込む

1. Filterを使って、指定したDomain以外はTrackingしないようにする

Google Analyticsは同じWeb Property ID(UA-xxxxxx-x)を使っていると、申請したWebsite URLとは関係なくTrackingしてしまう。開発環境やSTAGE（Test環境）からのAccessは除外したいので、下記Siteを参考にFilterを設定。

[重要] Google Analyticsの導入後、最初にやること

Google AnalyticsにLogin → Accountを選択 → 設定画面 → Filters → New Filter

入力例

Filter Fieldに「Hostname」を選択。
Filter Patternには正規表現を記述するので、「.」（ドット）や「-」（ハイフン）は「\」（バックスラッシュ）でEscapeしないといけない。詳細はAnalytics Helpを参照（Change Languageで日本語に変更可能）

2. Webmaster ToolsとGoogle Analyticsを連携させる

Google AnalyticsのSearch Engine OptimizationからWebmaster Toolsの情報を参照できるようになる。

設定画面 → Web Property Settings

"Webmaster Tools Settings"の"Edit"をClick. 既にWebmaster ToolsでSiteを同じGoogle Account登録してあれば、一覧に表示されるので選択するだけ。

3. Facebook Like, Twitter, Google +1のSocial系PluginもAccess解析する

一般的なSiteではFacebook Like, TwitterのTweet Button, Googleの+1 Buttonがあるのは当たり前になってきているので、これもTracking出来るようにScriptを埋め込んでおく。詳細は前の記事を参考に。

iframeや静的Linkを使っていたりすると、ClickされたときのEventを取得できないので注意。Google +1はWebmaster Toolsを導入していれば何もしなくていい。

4. その他、Trackingしたい箇所でEvent(Pageview)情報を送信するScriptを埋め込む

次のような場合はGoogle AnalyticsにEvent情報を送信するようにしている

Ajaxで遷移（詳細記事）
動画の再生、一時停止、最後まで見たか。（詳細記事）
画像や商品のSlideshow(Lightbox)系

< Related Posts >

動画(FlowPlayer)の再生回数をGoogle AnalyticsでTrackingする

2011-12-12T13:39:00.001+09:00

動画の再生回数、最後まで見たかどうかをGoogle AnalyticsでTrackingする方法。

YouTubeを利用する場合は、YouTube Analyticsがあるので特に何もする必要はない。

どうしてもGoogle Analyticsを使いたい場合は、YouTube JavaScript Player APIを使うと再生、停止のEventを取得できるので、EventをTriggerにしてGoogle Analyticsに情報を送れば可能。この辺は前の記事を参考に。

今回は動画をYouTubeに置きたくないという要件だったので、再生するためにOpen SourceのFlash Player "FlowPlayer"(version 3.2.7)を利用。

FlowPlayerはGPLv3で配布されていて、Free版はFull ScreenにするとFlowPlayerのLogoが表示される。このLogoを消すためにはCommercial Licenseを購入する必要がある。詳しくはOfficial Siteを参照。

このFlowPlayer非常によく出来ていて、外見(Skin)を変更したり、JavaScriptで外部から操作できるようなAPIが充実しているので、とても使いやすい。

Google Analyticsと連携するCodeはOfficial Siteにもある。Eventにhookして、Google Analyticsに情報を送信するのはYouTubeのAPIと同じ。それすらも面倒くさい場合は、直接Parameterを指定すると、FlowPlayerがGoogle Analyticsに情報を送信してくれる機能もある。

Official SiteにあったのはGoogle Analyticsの古いCodeを利用していたので、jQueryと組み合わせて利用するために次のように記述。

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1234567-1']);
_gaq.push(['_trackPageview']);

(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

<script type="text/javascript">
jQuery.extend({
    gaEventTracker: function(action, label, target, value) {
        if (typeof _gaq == 'undefined') return false;
        var target = target || location.href;
        _gaq.push(['_trackEvent', action, label, target, value]);
    }
});
</script>

<script type="text/javascript">
jQuery(function($){
    flowplayer('movie-player', {
      src: 'flowplayer.swf',
      wmode: 'transparent'
    },
    {
      clip: {
        onStart: function(clip) {
            $.gaEventTracker('Videos', 'Play', clip.url);
        },

        onPause: function(clip) {
          $.gaEventTracker('Videos', 'Pause', clip.url, parseInt(this.getTime()));
        },

        onFinish: function(clip) {
           $.gaEventTracker('Videos', 'Finish', clip.url);
        }
      }
    });
});
</script>

"_trackEvent"の詳細はGoogle AnalyticsのOfficial Documentを参照（英語）

Event Tracking Guide - Google Analytics - Google Code

実際にGoogle AnalyticsにEvent情報を送っているかは、Google ChromeのDeveloper Toolsを使って確認する。

下図のように"__utm.gif"を取得していれば、何かしらの情報をGoogle Analyticsに送っている。開発環境（Google Analyticsに登録したDomain以外）では動作しない。

< 2011/12/16 Modified >
Google Chrome + Google Analytics Debuggerを利用するとConsoleにHost Nameなどの情報を表示してくれるので便利。

さらにiPad, iPhone用にはHTML5のVideo Tagを使っているので、こちらのTrackingも同様に取得する。Video TagのEventについては、下記Siteを参考に。

HTMLMediaElement Class Reference: Safari Developer Library

<script>
jQuery(function($) {
    var jContent = $('#content');
    jContent.find('video')
    .bind('loadeddata', function() {
        $.gaEventTracker('Videos(HTML5)', 'Play', $(this).attr('src'));
    })
    .bind('pause', function() {
        $.gaEventTracker('Videos(HTML5)', 'Pause', $(this).attr('src'));
    })
    .bind('ended', function() {
        $.gaEventTracker('Videos(HTML5)', 'Finish', $(this).attr('src'));
    });
});
</script>

iPadの場合はSettingからSafari → Debug ConsoleをOnにするとconsole.logの結果を閲覧できる。もしくはiOS Simulatorを使うとDebugし易い。詳しくは前の記事で。

< Related Posts >

HTML5のVideo Tagを使う際の注意点とiPad, iPhone向けの動画へ変換する

2011-12-09T11:34:00.001+09:00

HTML5のVideo Tagを使うとIE9, iPhone, MacのFirefoxなど特定の環境だけ動画が再生されなくて困ったときのMemo.

結論から言うと、PC BrowserではFlowPlayerなどのFlashを使った方が無難。少なくともお客様相手の仕事はそうした方がいい。

VideoJSなどのJavaScript Library(HTML5のVideo Tag)を使う場合の注意点。

FirefoxはH.264 codecの動画を再生できない。
参考： Firefox で Youtube の HTML5 動画が見られない | トラブルシューティング | Firefox ヘルプ
Google ChromeでもH.264の動画を再生できなくなる
参考： Google ChromeがH.264対応をとりやめ、WebM推進を鮮明に -- Engadget Japanese
MP4などの動画を再生するためにはApacheのMime Typeを設定する必要がある(IE)。
参考： MIMEタイプ一覧 : 個人ホームページ / BIGLOBE

動画の形式(type)も様々。Video TagのType属性指定する値は下記Siteを参考に。

iPad, iPhoneなどiOS向けへの動画はAdobe Media Encoderを使って変換しているけど、FFmpegなどで変換する場合は下記Siteを参考に。

Technical Note TN2218: Compressing QuickTime Movies for the Web | Safari Developer Library
「ios dev h.264」でGoogle先生に聞く

< Related Posts >

HTML5(

2011-12-08T12:03:00.001+09:00

Web上で動画を再生させる方法はswfobjectを利用して、
Flash対応 → Flashを埋め込む
Flash未対応 → 静的画像
とするのが今までの正攻法。今後はiPad, iPhone(iOS)やSmart Phoneでも再生できるように、HTML5の"video" Tagを使うのが当たり前になってくると思う。

各Browserの差異を吸収して、HTML5のVideo TagとFlashを切り替えてくれるJavaScript Libraryを紹介。

	MediaElement.js	VideoJS	JW Player
License	GPLv2/MIT	LGPLv3	CC3.0
商用利用	-	FlashはFlowPlayerを利用しているので、Logoを消したい場合はこちらを参照。 $95～	$89～詳しくはOfficial Siteで
説明	Flash PlayerのSourceも公開されているので何でも出来る。基本はこれでいい気がする。	FlowPlayerがJavaScriptで制御できて使いやすい。	Creative Commons Licenseなので注意。iOSの場合だけHTML5を使うみたい。
注意点	「○秒間連続再生できるまで停止する」のようなBuffering機能がない。	3.2.7にはBufferingしている間Loading Animationが表示されないBugがある。（詳細）

Video tagに設定できる属性は下記Siteを参考に。

その他HTML5 Videoについて参考になる記事

Videoタグのイベント挙動サンプル｜ Classmethod.dev()
日本語で分かりやすい
code · Video for Everybody!
Video Tagの基本的な記述方法、動画形式など必読！
HTML5 video issues on the iPad and how to solve them | Blog | Miller Medeiros
iPadでHTML5 Videoを使った場合のEventの取得方法。ちなみにiPadではPageを読み込んだ後に自動で動画を再生させることは出来ない。

実際使ってみて・・・

Video Tagを使うと動画形式によって再生できたり出来なかったりでハマるので、前に書いたMobile端末かを判断するScriptを使って、PCならFlash, MobileならHTML5と使い分けた方がいいと思う。

< 2011/12/21 Modified >
表に「注意点」追記。

< Related Posts >

PHP or JavaScriptでMobile端末(iPad, iPhone, Android)かどうかを判別

2011-12-07T12:24:00.001+09:00

PCとiPad両方に対応したWeb Siteを構築したときのMemo.

共通のCSSのみで完結させたかったけど、どうしても下記理由でPCとMobileを判別する必要が出てきた。

どの端末でも動画を再生させたい
どの端末でも曲(BGM)を流したい
Gallery（画像一覧）はSwipeで次の写真に移動したい
→ jQuery系Plugin側で対応しているのが多い。
PCで画面を広くした場合だけ、位置を変えたい

実現するために調査した結果の一覧。

Library	言語&License	用途
swfobject	JavaScript (MIT)	Flash(swf)が使えるか判別して、object tagか静的画像を自動挿入してくれる。
Modernizr	JavaScript (MIT & BSD)	HTML5/CSS3が使えるか判別。<video>が使えるかの判断に
jQuery.Mobile	JavaScript (MIT or GPLv2)	TapやSwipeなどのEventを取得するのに使える。その場合autoInitializePage=falseにして利用する。
VideoJS	JavaScript (LGPLv3)	video tag → flash → 静的画像の順に判断して、動画を再生できるようにしてくれる。Flashの場合はFlowPlayerを利用。こちらの記事も参考に
php-mobile-detext	PHP (MIT)	Server側で判断したいときに。PHP4で動かないけど、簡単に修正できる。

ちなみにiPhone, iOS, Androidが判断できればいいという場合は次のようなJavaScriptで簡単に判断することが出来る（jQueryを拡張）。

jQuery.extend({
    isMobile: function() {
        if (navigator.userAgent.indexOf('iPhone') > 0 ||
            navigator.userAgent.indexOf('iPad') > 0 ||
            navigator.userAgent.indexOf('iPod') > 0 ||
            navigator.userAgent.indexOf('Android') > 0) {
            return true;
        }
        return false;
    }
});

jQuery(function($) {
    if ($.isMobile()) {
        alert('this is mobile');
    }
});

HTML5のVideo TagはBrowserごとに動作が違うので

PC → Flash or 静的画像
Mobile(iOS or Android) → Video Tag or 静的画像

と判断した方がよさそう。

< Related Posts >

WordPressのOfficial LogoがPSD形式でDownloadできる

2011-12-06T11:42:00.001+09:00

最近は記事にThumbnail画像を付けるようにした。

理由は

Blogger（このBlog）をSmart Phone(iPhone, iPod touch, Android)で開いたときに最初の画像が一覧で表示される。
記事を読みやすく。
閲覧数に影響が出るか実験
Design Skillを上げたい
Gimp, Photoshop, Illustrator, Fireworksの使いこなせるように

ちなみにAndroidはこんな感じで表示される。

WordPressはOfficial LogoのSource Fileを配布している。

WordPress > About > Logos and Graphics

PSD形式でDownloadできるので、どんな風に構成されているかも確認できて勉強になる。iPhone用のIconの作成するときにも参考になりそう。

< Related Posts >

Xen or KVM or OpenVZ. VMware Serverからの移行を考える

2011-12-05T16:53:00.001+09:00

VMware ServerのSupportが切れて、CentOS6.0にInstall出来なかったので、他の仮想化技術に切り替えようと調査したMemo.

用途は主に社内の開発用。要件をまとめると、

Source CodeはSubversionで管理しているので、サーバーが壊れても問題ない。
Guest OSはお客様の環境に合わせるので、CentOSとかWindowsとかいろいろ。
Windows XP + IE6 or IE8の環境は作っておきたいので、Windowsはほぼ必須。
Commandを叩かなくても管理Toolで簡単に起動、停止できるとうれしい。
無償で将来的にも安心して、長く使える技術を選択したい。

参考にしたSiteは下記。

ちなみにKVMはCPUに仮想化支援機能がないと使えないらしい。

要件と照らし合わせると、WindowsをGuest OSに出来ないOpenVZは消える。将来性を考慮すると、やっぱりKVMかな？

でも、Server自体が古いので、結局CentOS5 + VMware Serverになりそう。（＾＾；

< Related Posts >

SE奮闘記

Xcode 4 の初期設定と新機能について

1. 自動生成される名前と"__MyCompanyName__"を設定

2. Xcode 4の新機能"Storyboard"を理解する

3. Xcode 4で新規Projectを作成すると"Resources"Folderがない。

[Titanium Mobile] ModuleをInstallする方法

iOS, Android開発をJavaScriptで行うTitanium Mobileを試す

1. Download "Titanium Studio"

2. Install "Titanium Studio"

3. Create "Hello World" application

4. Import "KitchenSink" Sample App

5. Read documents

Adobe InDesign CS5.0を利用したiPad App開発環境を整える。ADPSの関連Link集

1. Adobe InDesignにDigital Publishing Suite用のPluginをInstall

2. 簡単な電子書籍を作る

3. Preview

4. Digital Publishing SuiteにUpload

5. Adobe製Viewerを使ってiPad上で確認

6. 有償Accountを購入して、iPad Appを取得する。

"Closure Library プログラミングガイド"を読んだ

Adobe Dreamweaverを使うと開発効率が良くなるか調査

PDF出力をしようとすると"GothicBBB-Medium not found"

TrueType, PostScriptなどFont関連用語とFont一覧表示

Mac mini(Mid 2010)のMemoryを8GBに増築した

VMware FusionをCommand Line（SSH経由）で操作

2012年 Singaporeで迎えるお正月

"ハッカーと画家(Hackers and Painters)"を読んだ

iPad向け電子書籍AppをAdobe InDesign + Digital Publishing Suiteで作成するためのまとめ

1. Adobe InDesign単体ではEPUB形式のみ対応

2. Adobe Digital Publishing Suite (ADPS) とは

3. Adobe Digital Publishing Suiteの費用

4. 流行るか？

VMware FusionにVirtual MachineとしてMac OS X LionをInstallする方法

1. Mac OS X LionをApp Storeから再Download

2. Install Disk Image(dmg)を作成

3. VMware FusionにInstall

SWF形式のBGMを停止、再生する方法とvideo tagを使ってiPadも対応する

1. BGM用の曲(MP3)をSWFに

2. PCとMobileを判断してSite埋め込む

3. 再生、停止する方法

NHKオンデマンドを登録、利用してみた。

Mac OS X Lion Serverを購入してInstall(Upgrade)

Mac mini ServerをNetwork経由でClean Installする方法

1. Install Utility起動

2. Disk UtilityでRaid1構成にする

3. Install後の設定

Google Analytics導入時にやるべき初期設定（FilterとSocial Pluginへの対応）

1. Filterを使って、指定したDomain以外はTrackingしないようにする

2. Webmaster ToolsとGoogle Analyticsを連携させる

3. Facebook Like, Twitter, Google +1のSocial系PluginもAccess解析する

4. その他、Trackingしたい箇所でEvent(Pageview)情報を送信するScriptを埋め込む

動画(FlowPlayer)の再生回数をGoogle AnalyticsでTrackingする

HTML5のVideo Tagを使う際の注意点とiPad, iPhone向けの動画へ変換する

HTML5() or Flashを自動で切り替えてくれるJavaScript Library（iPadやiPhoneでも動画を再生）

PHP or JavaScriptでMobile端末(iPad, iPhone, Android)かどうかを判別

WordPressのOfficial LogoがPSD形式でDownloadできる

Xen or KVM or OpenVZ. VMware Serverからの移行を考える

1. 自動生成される名前と"MyCompanyName"を設定

HTML5(