UIWebViewでローカルJavascriptを読み込む

2013/6/27 [19:05:12] (木) 天気

安直iOSアプリ。UIWebViewを使ってデバイス上にローカルHTMLを表示させるだけ、というシロモノ。


簡単じゃん、と思ってたら甘かった。


jQueryを使ってJavascriptをごにょごにょするには、HTMLのheadに外部Javascriptへリンクするだけじゃダメだった。Xcode側でjavascriptを読み込ませる必要があった(…CSSは特に細工もなしに、HTMLに指定するだけで使えるのに)


ViewController.m の viewDidLoad の中に(これは多分 Javascript でいう、onload関数)読み込みのときにjavascriptも読み込め、と指示してやる。


    NSString *path = [[NSBundle mainBundle] pathForResource:@"jquery-1.7.2.min" ofType:@"js"];
    NSString *jsCode = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
    [wview stringByEvaluatingJavaScriptFromString:jsCode];

    NSString *localpath = [[NSBundle mainBundle] pathForResource:@"local" ofType:@"js"];
    NSString *localjsCode = [NSString stringWithContentsOfFile:localpath encoding:NSUTF8StringEncoding error:nil];
    [wview stringByEvaluatingJavaScriptFromString:localjsCode];


ためしに、local.jsというjqueryを使ったjavascript


$(function(){ alert(’here’); }  )

を試してアラートが出ることを確認。今日のところはここまで。


cssの書き方もちょっと考えなきゃいけないかもしれない。

単純なcssなら問題なく意図通り表示されるけど、複雑になってくると、対応状況対応レベルがあるのかもなあ。

[更新]2026-02-01 15:25:31

ローカルHTMLを表示するだけのiOSアプリ

2013/6/23 [19:45:50] (日) 天気

UIWebViewというのがある。

これを使えば、iOSアプリ(iPhoneやiPad)で簡単にHTMLを読み込んで表示してくれる。ローカルにおいたHTMLも同じく。


ということで、ガワさえ作ってしまえば、中身はHTMLとCSSで頑張ればアプリっぽいものができる。というかほぼまんまWEBの再現が可能。とはいえ、この程度のシロモノがapp storeの審査を通るとはとても思えないので「AD-HOC配布で野良アプリ」もしくは「専用端末化したiOSデバイスにプリインストールして配布」というのが使いどころだろう。


とりあえずこのローカルHTMLを読むアプリは、ド素人、超初心者でも作れるiOSアプリということで、Xcode 最初の1歩としては(わたしのような素人には)ちょうどいい練習問題っぽい。


・Xcodeを立ち上げる。

↓新規作成する

↓「Single View Application」を選択

↓「Product Name」「Organization Name」「Company Identifier」など適当に

 ※ Storyboardsがよくわからないので、チェックを外しておいた。

↓プロジェクトフォルダを作成する

・デフォルトのシンプルな設定でXcodeが立ち上がる。


ソースを2つ編集する。


ViewController.h の @interface の行の下に追加。

(WEB表示オブジェクト(?)はwviewという名前ですよと設定・宣言する)


{
    @private
    IBOutlet UIWebView* wview;
}


ViewController.m の viewDidLoad の中に LoadRequestうんぬんの行を追加。


- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    [wview loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"index"] ofType:@"html"]isDirectory:NO]]];
}

プロジェクトフォルダの中のResourceフォルダを探して、そこにあるindex.htmlを読み込んで表示しますよ、ということなので、Resource フォルダを作ってそこにHTMLやCSS、画像などを入れるようにする。


Xcodeでプロジェクトフォルダを右クリックして「Add Files to "SAMPLE"」(SAMPLEはプロジェクト名)でリソース用のHTMLなどが入ったフォルダを追加する。

※ この時、HTMLの中から相対パスで画像などを指定できるように「Create folder references for any add folders」にチェックを入れる。


Xcode の便利だけど面倒くさいのが画面設計。UIが良く出来ていて、部品をドラッグアンドドロップするだけでそれっぽい見た目のできあがり。


ViewController_iPhone.xib をクリックするとiPhoneのモックアップ(?)が現れる。

とりあえず表示するだけなら、そこにWebViewオブジェクトをドラッグアンドドロップ(このWebViewオブジェクトの中にHTMLが表示されることになる)すれば完成。

あとは、シミュレーターにiPhoneを指定して、「Run」するだけ。


以下は、index.htmlに戻るとかリロードなどのコントロールをつけたもの。

image

コントロールをつけるとなると、とたんに考えることがいろいろ増えるので試行錯誤で大騒ぎ・大変。なかなか思うようにいかない…けど、今日のところは終了、続きはまた明日以降。もう初老だ。7時間程度ぐらいしか続かない。


・画面・レイアウト設計

・ソースコードの編集

・画面レイアウトされたオブジェクトをソースコードの該当するところに紐づける


大雑把に、XcodeでのiOSアプリの作成はこの3つかな。


Xcodeのソースについて調べていて。バージョンごとで書き方がけっこう違うんで、混乱。基礎からきちんと訓練を受けたプログラマならすぐに解決だろうなあと、うらやましい。

[更新]2026-02-01 15:26:54

3週連続水元公園菖蒲祭り

2013/6/16 [10:35:53] (日) 天気

今年は水元公園菖蒲祭りに3週連続。といいつつ、昨日は菖蒲の方はほとんど回らず逆側で開催の陶器市という名の公園内赤提灯屋台でまったり。


水元公園は水場の広大な公園。サギが釣り人おじさんのところに飛んできて、フツーに餌を催促する光景がそこここに。野良猫やカラスも絡んでひとと動物たちのエコシステムが完成している。

image

赤提灯に並ぶのは東京都の地酒。昨日飲んだのは澤乃井、桑の都、金婚の3杯。どれもすっきりキリっとした味で、ツマミの塩辛が絶品でありました。

image
image


↓この雑記帖で「水元公園」を検索

http://t2aki.doncha.net/index.pl?submit=OK&words=%E6%B0%B4%E5%85%83%E5%85%AC%E5%9C%92


春は桜、梅雨時は菖蒲、新緑とザリガニがあって、紅葉で色が炸裂する秋〜初冬。家族連れ・町内会・ドッグラン・バーベキューでひとが集まる心地の良い公園ですなあ。


[更新]2026-02-01 15:27:27

iOSデベロッパ更新

2013/6/14 [11:33:22] (金) 天気

app storeでアプリを販売するためのiOSデベロッパプログラムは1年8400円(同じAppleでも、iBookstoreは登録無料)

去年7月11日に登録したのでそろそろ1年。app storeでアプリ内課金型の電子書籍は、よっぽどしっかりプロモーションをしないとまるで売れない。


1年かかって、デベロッパプログラムの登録料すら回収できないので今後は考えどころ。ひとさまの原稿を預かった以上は約束・信用、今回は更新。


『iOSデベロッパプログラムとユリシーズの瞳』 (2012/7/11)

そろそろ原稿の用意もできそうなので、SakuttoBookを注文してiOSデベロッパプログラムに登録(購入)してみた。


更新の手続き。


・iOSデベロッパプログラムに登録(購入)

 アクティベーションコードを入力して契約更新。


・アプリ制作のために 以下にアクセス

「Member Center - Apple Developer」 https://developer.apple.com/membercenter/index.action

「Certificates, Identifiers & Profiles」

↑このあたりから入っていって、期限切れとなる証明書とProvisioning を新たに作成する(開発用と公開用で各々2種類ずつ)※ これがかなり面倒くさい。


1) macの キーチェーンアクセス→証明書アシスタント→認証局に証明書を要求

2) ディスクに証明書を要求するためのファイル(CertificateSigningRequest.certSigningRequest)を保存

上記ファイルを使ってここから開発用と公開用証明書を取得・登録する


3) Member Centerにアクセスして証明書を取得する

4) さきほど保存したファイルをアップロードして送信

5) 証明書(ios_development.cer)をダウンロード

証明書をダブルクリックしてキーチェーンに登録(開発用と公開用に3から繰り返し)


こちらのサイトがとても参考になります。ありがとうございます。

『iPhoneアプリを実機で動かす』http://kentaro-shimizu.com/lecture/iphone/step3.html



プログラマでもなく、Xcodeでアプリを作ることができる・作りたいとも思ってなくて、電子書籍を店頭に並べたい、ということで始めたという経緯もあり、ibookstoreがオープンしたこともあり、今後はibookstoreに移行するつもり。


そもそも、わたしが現在利用している電子書籍作成ソフトで作られる電子書籍アプリ(言葉が重複)は、単純な電子書籍なので、間違いなくリジェクト対象。


新作を投入したら既存のまでリジェクトされそうで、恐ろしくて更新できない。


[更新]2026-02-01 15:27:50

電子書籍デザインの制約

2013/6/13 [16:06:49] (木) 天気

電子書籍制作の仕事。「EPUBCHECK でエラーはもちろん、警告も出さないEPUB3で納品する」が大前提。


前提をクリアしてからが本番の始まり。

WEB と同じで、同じコンテンツ・同じソースコードでも、デバイスやアプリで見た目が違う。その擦り合わせに確実にふた苦労。


紙印刷と同じものではない、と理解を示してくれるクライアントも、担当やその先にいるお客さんが使っているタブレット・アプリで見て、指定と微妙に違うとリテイクが飛んでくる。こちらではこんな色味ですよ・こんなサイズですよ、とスクリーンショットを添付して比較してどちらにするのか、適当な落としどころを探すやりとりが続く。


ハードウェア、デバイスとしては:

Kindle Paperwhite Kindle Fire Kindle Fire HD とkindle3種類(この3つですでに色再現が違っている) iPad iPhone kobo Nexus iOSとAndroid各種


アプリは:

kindle、iBooks、kobo、play books(実質kindleとiBooks)


クロスブラウザチェックなどという徒労感しかない「作業」と同じことが電子書籍でも起こっている。

紙印刷本が底本にあるならともかく、オリジナル電子書籍用データで微妙な色や絶対指定してくるデザイナーには驚かされる。いまどきはリッチな環境しか知らないんだろうなあ。


たとえば色指定にしても。

基本16色、webセーフの216色などを中心に、どのユーザーにもできるだけ同じものを見せようというのは、もはやしみったれた努力かも知れない。


でも、そういったことを知った上で指定するのと、知らずに指定するのではずいぶん対応が違う。知らないで指定しているとデザインどおりではない、と怒り出す。指定されたとおりの線幅だしRGB指定ですよと、CSSとHTMLを見せても釈然としないまま、そんなはずはない、と。いや、そういうもんだから。

そここそ、デザイナーの腕が必要なところ・見せどころ。だよなあ。


そのたびに

制約などを説明をして・ソースを見せて・手持ちのデバイスと先方のデバイスで比較してもらって

というのが下請け業者の汗かき仕事。


WEBサイトが、ホームページと呼ばれていた頃に逆戻り。


[更新]2026-02-01 15:28:23

<<2013/06>>
      1
2345678
9101112131415
16171819202122
23242526272829
30

【最近の10件】

日常読書映画アニメゲーム健康料理グルメカメラ写真ネタ仕事パソコンインターネットperlEPUB3電子書籍ActivityPub還暦生活
検索: