あらびき林檎。 » iPhone http://splitchin.com/tech Macや, iPhoneでの,Webデザイン,アプリ開発などを綴ってます。 Sun, 06 May 2012 01:09:21 +0000 http://wordpress.org/?v=2.9.1 ja hourly 1 iPhone タッチイベント http://splitchin.com/tech/2011/04/11/iphone-%e3%82%bf%e3%83%83%e3%83%81%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88/ http://splitchin.com/tech/2011/04/11/iphone-%e3%82%bf%e3%83%83%e3%83%81%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88/#comments Sun, 10 Apr 2011 15:24:22 +0000 admin http://splitchin.com/tech/?p=1687 スマートフォンのためのHTML5アプリケーション開発ガイド―iPhone/iPad/Android対応

touchevent画像

サンプルURL

Apple資料

Safari Web Content Guide – Handling Events

  • onTouchStart
  • onTouchMove
  • onTouchEnd
  • onTouchCancel

※onClickのようなイベントの使い方。iPhoneでは、onClickよりレスポンスが良いらしい。

タッチ数の取得

  • event.touches.length

タッチ座標（x, y）の取得

  • event.touches[i].pageX
  • event.touches[i].pageY

※iで、各タッチの座標を格納。

]]> http://splitchin.com/tech/2011/04/11/iphone-%e3%82%bf%e3%83%83%e3%83%81%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88/feed/ 0 EPUB – iPadで電子書籍をつくる。 http://splitchin.com/tech/2010/12/06/epub-ipad%e3%81%a7%e9%9b%bb%e5%ad%90%e6%9b%b8%e7%b1%8d%e3%82%92%e3%81%a4%e3%81%8f%e3%82%8b%e3%80%82/ http://splitchin.com/tech/2010/12/06/epub-ipad%e3%81%a7%e9%9b%bb%e5%ad%90%e6%9b%b8%e7%b1%8d%e3%82%92%e3%81%a4%e3%81%8f%e3%82%8b%e3%80%82/#comments Sun, 05 Dec 2010 16:57:17 +0000 admin http://splitchin.com/tech/?p=1578 電子書籍の作り方、売り方　iPad/Kindle/PDF対応版

EPUBとは？

EPUB（いーぱぶ、electronic publication）は、米国の電子書籍標準化団体の1つであるInternational Digital Publishing Forum（IDPF）が普及促進するオープンな電子書籍ファイルフォーマット規格。ネット上では「epub」「ePub」などと表記される場合もある。そのオープン性と単純さから、対応する電子書籍ハードウェアや電子書籍アプリケーションは多い。- Wikipediaより

EPUBファイル作成ツール

  • sigil・・・テキストベースの書籍向け。
  • ChainLP・・・コミックや雑誌など、画像をスキャンする書籍向け。

EPUBのファイル構造

EPUBの.zipファイルを解凍すると、こんな構成になっています。

mimetype

必須ファイル。zip圧縮されたePubであることを示す。

META-INF

必須フォルダ。container.xmlを含む。

– container.xml

必須ファイル。content.opfのファイル名とパスを指定。

content.opf

必須ファイル。ePubファイルを構成するファイルのパス

– toc.ncx

任意ファイル。epubファイルの目次

page001.xhtml

任意ファイル。コンテンツページ

style.css

任意ファイル。CSS フォント埋め込み指定

cover.jpg

任意ファイル。画像ファイル

XMLや使えるHTMLタグのフォーマットについてはこちらを参考に。

■Open Publication Structure (OPS) 2.0 v1.0
Open Publication Structure (OPS)日本語訳

■Open Packaging Format (OPF)
OPF 2.0 v1.0 日本語訳

■OEBPS Container Format (OCF) 1.0
OEBPS Container Format (OCF) 1.0

.epubファイルを作成する

上記のXHTMLや画像を編集したら、zipファイル化します。
しかし、「metafileがZIPファイルの最初のファイルで、しかも圧縮されてないことが条件。」
が、通常の圧縮方法ではできないので、cleanarchiverというツールを使ってzipファイルを作ります。
※gzipではなく、zip形式を選択します。

ファイル拡張子を「.zip」→「.epub」に変換します。

iBookにいれてみる。

iTunesのBookに、つくったepubを放り込んでみます。

iBook

epubコンテンツ

こんな形で、書籍形式になりました。

ePubの問題点

-Wikipediaより抜粋

仕様上の問題
  • 縦組みを指定することはできない（縦中横も当然できない）。
  • 圏点を指定することはできない。
  • 割注（本文一行に小さな文字で二行詰め込まれた注）を指定することはできない。
  • 漢文の返り点を指定することはできない。
  • これらの問題点は、EPUB 2.0.1のベースとなっているXHTML1.1とCSS2に起因する。現在、HTML5とCSS2.1及びCSS3の一部機能を用いてEPUB 3.0を制定する作業が行われており、2011年5月に完成を予定している。
  • 縦組み、縦中横、圏点は、EPUB 3.0で対応することが予定されている。
実装上の問題
  • ルビの実装は知られていない。
  • 禁則処理などの処理が実装されていないことがある。
  • 正字（たとえば、「嘘」や「頬」や「湮」の正字）をうまく出せない実装がある。
  • ────　のような直線を連続させたとき、この直線が繋がって見えない実装がある。
  • 繰り返し記号（　く　を縦に細長くした記号：縦書きのみ）を表示できない実装がある。

これらの問題点は、閲覧ソフトが対応すれば解決する問題である。

ePub3.0のタイムライン

revision timeline and milestones

  • June 15 & 16, 2010: Kickoff F2F
  • June 24: Subgroup requirements: start
  • July 23: Subgroup requirements: submission to WG
  • August 27: Subgroup requirements: finalization
  • August 27: Subgroup implementation proposals: start
  • August 27: FWD production: start
  • October 18-20: San Francisco F2F
  • October 20: Subgroup implementation proposals for first draft: finalization
  • October 29: First Working Draft
  • November 30: Second Working Draft
  • December 23: Public Draft
  • January 28, 2011: Draft standard for trial use
  • May 15, 2011: final specification
所感

ePubは簡単なので、導入は簡単ですが、文書構造以外のことはあまりできないので、紙媒体に対してのアドバンテージは、販売PF以外あまりない印象です。
HTML5/CSS/JSがサポートされると、よりインタラクティブなコンテンツが出来ると思いますが、そうなると、ePubというフォーマットとはページの概念と、ビューワーとの相性ぐらいになって、全部Webコンテンツになるのかな、と感じました。

]]> http://splitchin.com/tech/2010/12/06/epub-ipad%e3%81%a7%e9%9b%bb%e5%ad%90%e6%9b%b8%e7%b1%8d%e3%82%92%e3%81%a4%e3%81%8f%e3%82%8b%e3%80%82/feed/ 0 PhoneGap – HTML/CSS/JavaScriptで、iPhoneやAndroidアプリを作るフレームワーク http://splitchin.com/tech/2010/11/06/phonegap-htmlcssjavascript%e3%81%a7%e3%80%81iphone%e3%82%84android%e3%82%a2%e3%83%97%e3%83%aa%e3%82%92%e4%bd%9c%e3%82%8b%e3%83%95%e3%83%ac%e3%83%bc%e3%83%a0%e3%83%af%e3%83%bc%e3%82%af/ http://splitchin.com/tech/2010/11/06/phonegap-htmlcssjavascript%e3%81%a7%e3%80%81iphone%e3%82%84android%e3%82%a2%e3%83%97%e3%83%aa%e3%82%92%e4%bd%9c%e3%82%8b%e3%83%95%e3%83%ac%e3%83%bc%e3%83%a0%e3%83%af%e3%83%bc%e3%82%af/#comments Sat, 06 Nov 2010 13:30:07 +0000 admin http://splitchin.com/tech/?p=1348

■PhoneGapとは
HTML/CSS/JavaScriptで、iPhoneやAndroidアプリを作るフレームワーク。

1. PhoneGapをはじめる。

今回は、iPhoneアプリでのPhoneGapを試します。
Android編はこちらから。

公式サイトもしくは、GitHubから、PhoneGapフレームワークをダウンロードします。

PhoneGap

DLしてきたZipファイルを解凍し、iOSフォルダにある、
「PhoneGapLibInstaller.pkg」を開いて、PhoneGapフレームワークをインストールします。

PhoneGapTemplate

XCodeを起動して、新規プロジェクトを作成すると、
「PhoneGap」というテンプレートが追加されているので
それを、選択してプロジェクトを作成します。

PhoneGapIndex

「www」というフォルダに、index.htmlファイルが追加されています。
このhtmlに、記述したり、PhoneGap APIをJSから使用することで
iPhoneアプリを作成していきます。

PhoneGap – API Reference http://docs.phonegap.com/
  • Accelerometer
  • Camera
  • Contacts
  • Device
  • Events
  • Geolocation
  • Network
  • Notification

2. PhoneGap APIの加速度センサーを使ってみる。

Accelerometerを参考に、accelerometer.getCurrentAccelerationを使った加速度センサーのAPIを使ってみます。

前述のwwwフォルダの、index.htmlを記述します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
	<!-- Change this if you want to allow scaling -->
    <meta name="viewport" content="width=default-width; user-scalable=no" />

    <meta http-equiv="Content-type" content="text/html; charset=utf-8">

    <title>PhoneGapTest</title>

	<!-- iPad/iPhone specific css below, add after your main css >
	<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />
	<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
	-->
	<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
    <script type="text/javascript" charset="utf-8">

	// If you want to prevent dragging, uncomment this section
	/*
	function preventBehavior(e)
	{
      e.preventDefault();
    };
	document.addEventListener("touchmove", preventBehavior, false);
	*/

	// Wait for PhoneGap to load
	function onBodyLoad() {
		document.addEventListener("deviceready",onDeviceReady,false);
	}

	/* When this function is called, PhoneGap has been initialized and is ready to roll */
    // PhoneGap is ready
	//
	function onDeviceReady() {
		navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);
	}

	// onSuccess: Get a snapshot of the current acceleration
	//
	function onSuccess(acceleration) {
        alert('Acceleration X: ' + acceleration.x + '\n' +
              'Acceleration Y: ' + acceleration.y + '\n' +
              'Acceleration Z: ' + acceleration.z + '\n' +
              'Timestamp: '      + acceleration.timestamp + '\n');
	}

	// onError: Failed to get the acceleration
	//
	function onError() {
		alert('onError!');
	}

  </script>
  </head>
  <body onload="onBodyLoad()">
  <!-- PhoneGap Test Code -->
  <h1>PhoneGap test.</h1>
  <p>getCurrentAcceleration</p>
  <!-- /PhoneGap Test Code -->
  </body>
</html>

通常のiPhoneアプリと同じように、XCodeから、ビルドします。

phoneGapAPIAccelr

JavaScriptで実装したアラートに加速度センサーが動きました。

3. PhoneGap ドキュメント関連

■PhoneGap
http://www.phonegap.com/

■PhoneGap Roadmap
http://wiki.phonegap.com/w/page/16494820/Roadmap

■GitHub
https://github.com/phonegap
オフィシャルのプラグインやAPIの、レポジトリがあります。

■DOCS API Reference
http://docs.phonegap.com/

]]> http://splitchin.com/tech/2010/11/06/phonegap-htmlcssjavascript%e3%81%a7%e3%80%81iphone%e3%82%84android%e3%82%a2%e3%83%97%e3%83%aa%e3%82%92%e4%bd%9c%e3%82%8b%e3%83%95%e3%83%ac%e3%83%bc%e3%83%a0%e3%83%af%e3%83%bc%e3%82%af/feed/ 0 openframeworks+iphone インタラクションデザイン, メディアアート http://splitchin.com/tech/2010/08/31/openframeworksiphone-%e3%82%a4%e3%83%b3%e3%82%bf%e3%83%a9%e3%82%af%e3%82%b7%e3%83%a7%e3%83%b3%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3-%e3%83%a1%e3%83%87%e3%82%a3%e3%82%a2%e3%82%a2%e3%83%bc%e3%83%88/ http://splitchin.com/tech/2010/08/31/openframeworksiphone-%e3%82%a4%e3%83%b3%e3%82%bf%e3%83%a9%e3%82%af%e3%82%b7%e3%83%a7%e3%83%b3%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3-%e3%83%a1%e3%83%87%e3%82%a3%e3%82%a2%e3%82%a2%e3%83%bc%e3%83%88/#comments Tue, 31 Aug 2010 12:59:05 +0000 admin http://splitchin.com/tech/?p=1279 Prototyping Lab ―「作りながら考える」ためのArduino実践レシピ

インタラクションデザインやメディアアートの分野で、制作環境のフレームワークとして採用されている「openFrameworks」のiPhoneアプリ版を試してみました。

公式サイト

■openFrameworks is an open source C++ toolkit for creative coding.
http://www.openframeworks.cc/

iPhoneアプリ用ライブラリ

■openFrameworks for iPhone
http://www.openframeworks.cc/download

上記URLの、iphone: iPhone 0061 FATからDLします。

iPhone SDK4用対応

ターゲット設定をiOS4にして、iPhone SDK4でビルドすると

error: Invalid DWARF in *****/libs/FreeImage/lib/iphone/libFreeImage_iphone_universal.a: DIE 0x000016a6 has multiple AT_byte_size attributes.

このようなビルドエラーが出てくるので、

■ iphone ~ xcode 3.2.3 + iPhone SDK 4 beta works with ofxiPhone?
http://www.openframeworks.cc/forum/viewtopic.php?f=25&t=3658

こちらのフォーラムを参考に、 FreeImage_libs_iphoneOS40.zip,を
DLしてきて、libファイルの中身を入れ替えます。
FreeImage
元から入っていた、libFreeImage_iphone_universal.aを参照から外し、DLしてきた下記２つのファイルを追加します。

  • libfreeimage-iphone.a
  • libfreeimage-iphone.a

今度は、ビルドするとサンプルデモが起動します。
デモ

]]> http://splitchin.com/tech/2010/08/31/openframeworksiphone-%e3%82%a4%e3%83%b3%e3%82%bf%e3%83%a9%e3%82%af%e3%82%b7%e3%83%a7%e3%83%b3%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3-%e3%83%a1%e3%83%87%e3%82%a3%e3%82%a2%e3%82%a2%e3%83%bc%e3%83%88/feed/ 1 Palm+Piece ブログパーツをリリース！ http://splitchin.com/tech/2010/08/12/palmpiece-%e3%83%96%e3%83%ad%e3%82%b0%e3%83%91%e3%83%bc%e3%83%84%e3%82%92%e3%83%aa%e3%83%aa%e3%83%bc%e3%82%b9%ef%bc%81/ http://splitchin.com/tech/2010/08/12/palmpiece-%e3%83%96%e3%83%ad%e3%82%b0%e3%83%91%e3%83%bc%e3%83%84%e3%82%92%e3%83%aa%e3%83%aa%e3%83%bc%e3%82%b9%ef%bc%81/#comments Thu, 12 Aug 2010 13:56:26 +0000 admin http://splitchin.com/tech/?p=1260

iPhoneアプリ「Palm+Piece」のブログパーツをリリースしました！

Graphic Designer @fromfmさんとのコラボアプリです。

ブログパーツは、W:160px-H:320pxの、Flash時計パーツとなっていて、
ブログパーツ.comさんのサイトにも掲載して頂いております。


詳細はこちら

↓　iPhoneアプリ、”Palm+Piece”の、ダウンロードはこちらから
AppStoreからダウンロード

]]> http://splitchin.com/tech/2010/08/12/palmpiece-%e3%83%96%e3%83%ad%e3%82%b0%e3%83%91%e3%83%bc%e3%83%84%e3%82%92%e3%83%aa%e3%83%aa%e3%83%bc%e3%82%b9%ef%bc%81/feed/ 0 iPhoneアプリ 世界時計 “Palm+Piece” http://splitchin.com/tech/2010/08/10/iphone%e3%82%a2%e3%83%97%e3%83%aa-%e4%b8%96%e7%95%8c%e6%99%82%e8%a8%88-palmpiece/ http://splitchin.com/tech/2010/08/10/iphone%e3%82%a2%e3%83%97%e3%83%aa-%e4%b8%96%e7%95%8c%e6%99%82%e8%a8%88-palmpiece/#comments Mon, 09 Aug 2010 15:57:09 +0000 admin http://splitchin.com/tech/?p=1240

iPhoneアプリ 世界時計　”Plam+Piece”をリリースしました！

“Palm+Piece”は、iPhoneの回転方向に合わせて、
「東京」「上海」「ロンドン」「ニューヨーク」と、
時刻とデザインが変化する、世界時計です。

また、画面をタップすると、国花が舞い散ります。

詳細はこちら

↓　ダウンロードはこちらから
AppStoreからダウンロード

]]> http://splitchin.com/tech/2010/08/10/iphone%e3%82%a2%e3%83%97%e3%83%aa-%e4%b8%96%e7%95%8c%e6%99%82%e8%a8%88-palmpiece/feed/ 0 NSTimeZone タイムゾーン http://splitchin.com/tech/2010/07/29/nstimezone-%e3%82%bf%e3%82%a4%e3%83%a0%e3%82%be%e3%83%bc%e3%83%b3/ http://splitchin.com/tech/2010/07/29/nstimezone-%e3%82%bf%e3%82%a4%e3%83%a0%e3%82%be%e3%83%bc%e3%83%b3/#comments Wed, 28 Jul 2010 15:23:29 +0000 admin http://splitchin.com/tech/?p=1230 NSTimeZoneのクラスメソッド
  • timeZoneWithName:・・・タイムゾーン名でタイムゾーンを作って返します
  • timeZoneWithAbbreviation:・・・省略形からタイムゾーンを作って返します
  • timeZoneForSecondsFromGMT:・・・グリニッジ標準時からの秒差でタイムゾーンを作って返します

次のソースで、timeZoneWithNameの、タイムゾーン名を取得できます。

#import <CoreFoundation/CoreFoundation.h>

NSString *timeZoneinfo = (NSString *)CFTimeZoneCopyKnownNames();
NSLog(@"timeZoneinfo is %@", timeZoneinfo);

例えば、

  • ニューヨーク・・・“America/New_York”
  • 上海・・・“Asia/Shanghai”
  • 東京・・・“Asia/Tokyo”
  • ロンドン・・・“Europe/London”

]]> http://splitchin.com/tech/2010/07/29/nstimezone-%e3%82%bf%e3%82%a4%e3%83%a0%e3%82%be%e3%83%bc%e3%83%b3/feed/ 0 状態通知メソッド – UIViewController http://splitchin.com/tech/2010/07/22/%e7%8a%b6%e6%85%8b%e9%80%9a%e7%9f%a5%e3%83%a1%e3%82%bd%e3%83%83%e3%83%89-uiviewcontroller/ http://splitchin.com/tech/2010/07/22/%e7%8a%b6%e6%85%8b%e9%80%9a%e7%9f%a5%e3%83%a1%e3%82%bd%e3%83%83%e3%83%89-uiviewcontroller/#comments Wed, 21 Jul 2010 15:20:26 +0000 admin http://splitchin.com/tech/?p=1217 そのまま使える iPhoneアプリプログラム

UIViewControllerの状態に応じて呼ばれるメソッドのメモ。

viewDidLoad UIViewControllerが保持する、画面の基点となるUIViewがロード完了した時にコールされる。画面生成後・メモリ不足でUnloadされた後にコールされる
viewWillAppear: 画面が表示される度に必ずコールされる。
viewDidAppear: 画面が表示された後にコールされる。
viewWillDisappear: 画面が非表示になる直前にコールされる。次の画面が表示される前に処理すべきタイミング
viewDidDisappear 画面が非表示になった後にコールされる。

]]> http://splitchin.com/tech/2010/07/22/%e7%8a%b6%e6%85%8b%e9%80%9a%e7%9f%a5%e3%83%a1%e3%82%bd%e3%83%83%e3%83%89-uiviewcontroller/feed/ 0 cocos2d for iPhone http://splitchin.com/tech/2010/07/18/cocos2d-for-iphone/ http://splitchin.com/tech/2010/07/18/cocos2d-for-iphone/#comments Sun, 18 Jul 2010 14:42:10 +0000 admin http://splitchin.com/tech/?p=1183 iPhone これは使える!アプリ&ツールガイド OS3.0&3GS (SOFTBANK MOOK)

iphone-cocos

■Download
http://www.cocos2d-iphone.org/download
「Stable version」から、Downloadします。

■Wiki
http://www.cocos2d-iphone.org/wiki/doku.php/

1. サンプルを実行する

DLしてきたファイルを解凍し、「 cocos2d-iphone.xcodeproj」を、xcodeで開きます。
色々な学習用サンプルが入っています。

実行するためには、「Active Target」と、「Active Executable」をセットする必要があります。「表示」→「ツールバーのカスタマイズ」→「Active Target」,「Active Executable」をツールバーに、ドラッグ＆ドロップしてセットします。

例えば、エフェクトのサンプルが色々入っている「Action Test」を試します。

おじさんキャラが色々エフェクトで動く、サンプルを試せます。
iphone cocos2d

2. プロジェクトテンプレートをインストールする

一から作成する場合の、Cocos2d用プロジェクトテンプレートをインストールします。

cocos2d-template

・a cocos2d stand alone template
・a cocos2d + box2d template
・a cocos2d + chipmunk template

ターミナルから、以下のスクリプトを実行して、テンプレートをインストールします。

cd cocos2d-iphone
./install-templates.sh

再インストールするときは、下記のコマンドで。

./install-templates.sh -f

問題なければ、プロジェクトを作成すると、
下記のように、「Hello, World」が起動します。

Hello World

]]> http://splitchin.com/tech/2010/07/18/cocos2d-for-iphone/feed/ 0 iPhoneアプリ 24h時計「ChronoRound]リリースしました！ http://splitchin.com/tech/2010/04/16/iphone%e3%82%a2%e3%83%97%e3%83%aa-24h%e6%99%82%e8%a8%88%e3%80%8cchronoround%e3%83%aa%e3%83%aa%e3%83%bc%e3%82%b9%e3%81%97%e3%81%be%e3%81%97%e3%81%9f%ef%bc%81/ http://splitchin.com/tech/2010/04/16/iphone%e3%82%a2%e3%83%97%e3%83%aa-24h%e6%99%82%e8%a8%88%e3%80%8cchronoround%e3%83%aa%e3%83%aa%e3%83%bc%e3%82%b9%e3%81%97%e3%81%be%e3%81%97%e3%81%9f%ef%bc%81/#comments Fri, 16 Apr 2010 12:37:11 +0000 admin http://splitchin.com/tech/?p=1002 ChronoRound

デザイナーの@CloverMelodyさんと、Splithchinのコラボレーション
iPhoneアプリ　24時間時計「ChronoRound」をリリースしました。

どこかノスタルジックで、神秘的な、24の時を刻む時計が、
いつもの有り触れた日常を、30度から15度刻みに変える事で、
新しい発見があるかも（？）

AppStoreでチェック

昼モード / 夜モード

ChronoRoundCap

]]> http://splitchin.com/tech/2010/04/16/iphone%e3%82%a2%e3%83%97%e3%83%aa-24h%e6%99%82%e8%a8%88%e3%80%8cchronoround%e3%83%aa%e3%83%aa%e3%83%bc%e3%82%b9%e3%81%97%e3%81%be%e3%81%97%e3%81%9f%ef%bc%81/feed/ 1