Monkey Circus ← トップページに戻る。

how to

2016年12月 iOS の WKWebView で。 canvas 外から canvas 内へ何度かすばやくスワイプした時の touchmove イベント内では、 たまに changedTouches が undefined になる。(ルーペ虫眼鏡が出る時?)
2016年10月 iOS のタッチと、Web Audio の scriptProcessorNode の始動との関係で、不思議なこと。 (iPhone でも iPad でも同じ。Safari でも Chrome でも同じ。) 複数同時タッチの touchstart 内では始動できない。 複数同時タッチ中のシングルタッチの touchstart 内でも始動できない。 ただのシングルタッチの touchstart 内なら、もちろん普通に始動できる。 タッチをわずかにでも動かした後の touchend では始動できない。 タッチを動かさずに放した時の touchend では始動できる。 iPhoneChrome の組合せの場合のみ、マルチタッチの不思議なこと。 最初のタッチを 20 ピクセル程度以上動かすと、 二つ目以降のタッチが無視される。 web 用に HTML5 と Java Script で作ったゲームを、iOS のガワネイティブに組込む時。 UIWebView を使えば問題ないけれど、より速い WKWebView を使おうとしたところ、 ローカルのページを表示する段階までは、iOS 9 のおかげでちゃんとできるようになったけど、 Web Audio で音を鳴らすために、XMLHttpRequest で音のデータを読込もうとすると、 CORS の制限のせいでローカルのファイルを読込めないので、 WKWebView の configuration や、Info.plist の ATS を調整すれば読込めるかな、とか、 メディアエレメントならローカルでも再生できるから、そこから AudioBuffer を取り出せないかな、とか、 いろいろな方法を半年間ぐらい試行錯誤してたけど結局だめで、iOS 10 になっても XHR できなくて、 しょうがなく、面倒くさそうなローカルサーバを立てるとか、Base64 に変換するとか、 今までやりたくなかったことも調べていたら、意外に Base64 ってすごく単純で、 昔のマイコン時代にやってたこととよく似ていて親しみを感じたので、ぜんぶ Base64 にして解決。 WKWebView から App Store (iTunes Store) を開く。 UIWebView ならば、js で、location.assign するだけで iTunes Store を開くことができたので楽チンでしたが、 WKWebView は、そのリクエストを Swift 側でキャッチしてあげる必要がある。やり方は……。 class ViewController: UIViewController, WKNavigationDelegate{…} と、インプリメントして、 wkwv.navigationDelegate = self として、 func webView( _ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void){…} の中で、 UIApplication.shared.openURL( url!) とすればよい。 iOS 10 専用にするなら UIApplication.shared.open( url!, options: [:], completionHandler: nil})
2016年6月 たまたま three.js のデモのページを見つけて、web でいろいろ 3D できるの見て感動。 3年ぐらい前から WebGL ですごいグラフィックスができるってことは、薄々知ってたけど、 ややこしすぎて自分には無理と思ってたけど、three.js のおかげで、 自分でもできそうと思って1ヶ月間ほどで fpw を作った。Unity やめた。


web

onresize と onorientationchange で、viewport を変えるのは、iPhone や Android ではうまくいくけど、 iPad で不安定だし、WindowsPhone に無効なのでだめ。 なので収縮 canvas 方式にする。 ★Edge は、F12 キーで開発者画面。 ★画像・音リソースのロード失敗時にリトライ。 ★NOID と MOUSEID は負の数に。NOWHERE を使用。 ★setInterval ではなく requestAnimationFrame。 ★touch の ID は Int32Array に代入してはいけない。(long だから?) (iOS では Chrome でも Safari でも、非常に大きな数になる。) (Android では 0 からの小さい数。何度でも 0 に戻る。) (Win 10 Edge は、pointer ID、小さい数から始まってどんどん増えてゆく。) ★タッチ座標を Float32Array に代入してはいけないかもしれない。(long だから?) ★加速度の扱い。 ★Windows の viewport や pointerdown を入れる。 ★一部の機種では、touch 系と mouse 系のイベントが続けざまに発生する。 リスナは両方登録する。一方がスタート後 0.5 秒間は、他方のスタートを無視。 ★js ファイルを、メールに添付して送ると改行コードが増えることがある。 圧縮してから添付すれば大丈夫。 ★Windows の Edge でタッチを離した時、pointerup → pointerout 続けざまに呼ばれる。 ★Windows では、絶対 URL を書くと CORS ひっかかる。相対にする。 <各デバイスでのチェック項目> ★マルチタッチできるか。 ★スクロール中に停止しないか。 ★音が出るか。
Web Audio
★無音の AudioBufferSourceNode のループから ScriptProcessorNode を通して 音を出すのは、Android には荷が重い (2015年頃)。iOS では大丈夫。 ★MediaElementAudioSourceNode で音を出すのは、遅延がある。 ★AudioBufferSourceNode で音を出すのが良い。 ★iOS では、最初の touchend で、ac.createBufferSource().start( 0); と、しておけば、後はいつでも再生できる。 ★wav ファイルを XMLHttpRequest で ArrayBuffer として読み込む。 →ArrayBuffer を decodeAudioData で、AudioBuffer に変換。 →AudioBuffer から getChannelData で、Float32Array を取り出す。 ↓[WebAudio API] iOS9で音が歪む、遅い、低い、割れる等の回避方法 http://qiita.com/simiraaaa/items/79a9ac972cc76fb58d93

ガワネイティブ

webview から、ストア等での購入まで行けるかチェック。

iOS

(iAd は、2016年6月で終了したので、AdMob を使用。Firebase も入れよう。) Xcode を使う。 新規プロジェクト。テンプレートは、Single View Application。Swift で。 始めたばっかりだけど、Xcode を一旦閉じる。 既存の Podfile をコピーして .xcodeproj と同じフォルダーに置くいて、その中のプロダクト名を変える。 ターミナルでそのフォルダーに行って、pod install 以後は .xcodeproj (青アイコン)は使わない。.xcworkspace (白アイコン)を開く。 Info.plist をいじるのではなくて、ファイルのツリー表示の上のプロジェクト名を選択して、 設定の General の中で、Display Name、Version 番号、Build 番号、を設定。 4S でも動くように、デプロイメントを 9.3 にする。 (Requires full screen をチェックすると、iPad の2画面表示ができなくなる。) Info.plist で設定することは、端末の向きと、ATS。 (AdMob のための、3つの privacy の description は、もう不要になったみたい。) (AdMob のために) ATS の Allow Arbitrary Loads を YES に。(←しなくても大丈夫みたい。) (php にアクセスする場合は ATS が必要。) (iPad の2画面表示のために。) iPad の端末の向きを4つとも有効に。 LaunchScreen.storyboard は、<ツリー表示>の中で、control キーを押しながら、子要素から親要素へ青い線を伸ばす。 LaunchScreen.storyboard の画像が実機で表示されない時は、実機を再起動するだけでなおる。 イメージやラベル等の要素は全部、ルートに置く。透明のビューをいろいろ配置して、その位置やサイズを要素へ適用。 Main.storyboard の View の背景は Dark Gray に、AdMob 用に普通のビューを追加して、 クラスは GADBannerView を選択。背景は透明に。 ホリゾンタルセンター。下端合わせ。 (Main.storyboard の中には、サイズ 320 x 50 の制約を付けないで、……) (ViewController.swift の中で bannerView.adSize = kGADAdSizeBanner を指定する。) アシスタントエディタで2画面表示にして、Main.storyboardとViewController.swift を表示した状態で、 control キーを押しながら、このビューから線をのばして、 Main.storyboardとViewController.swift のソースのクラス内側までつなぐ。名前は bannerView に。 ViewController.swift のソースを既存と同様に。 タッチイベントで音を再生しなくても、音が出るようにできる。 ・UIWebView の場合、uiwv.mediaPlaybackRequiresUserAction = false ・WKWebView の場合、wkwv.configuration.requiresUserActionForMediaPlayback = false (←deprecated) iTunes Connect へのリンクのイベントをキャッチする。 ウェブ版のファイル一式をプロジェクトに追加。 html ファイルには、maximum-scale=1 入れる。 Assets.xcassets を選択して、アイコンいっぱい入れる。 AdMob (FireBase) から GoogleService-Info.plist をダウンロードして Info.plist を同じフォルダーへ。 設定の Build Settings の中で、Swift Compiler - Code Generation の Optimization Level は、 Debug も Release も両方について、Fast, Whole Module Optimization [-O -whole-module-optimization] にする。
ターミナル
/ はルート、~/ はユーザーのホーム $ ls $ cd
CocoaPods
★インストール $ sudo gem update --system $ sudo gem install cocoapods ←ではなくて…… $ sudo gem install -n /usr/local/bin cocoapods インストールされたバージョンを表示。 $ pod --version $ pod setup ←数時間かかる。待つ。 ★AdMob と Firebase を、最新バージョンにする。 $ pod update
使用中のマシン 2015/07/17〜 iPod touch 第6世代 ブルー A8 バッテリー膨張。 2012/10/10〜 iPod touch 第5世代 イエロー A5 ■バッテリー膨張、使用不可。 2011/06/11〜 iPod touch 第4世代 A4 ■Swift 不可。 2016/10/01〜 iPhone 6 A8 2016/06/21〜 iPhone 4S A5 ■iOS 10 を入れられないので使用中止。 2010/10/02〜 iPhone 4 A4 ■ 2009/06/27〜 iPhone 3GS Samsung S5PC100 ■ 2008/08/02〜 iPhone 3 (?) ARM 1176JZ(F)-S ■ 2017/02/02〜 iPad Air 2 Retina A8X 2013/12/02〜 iPad mini 第2世代 Retina A7 ■バッテリー残量がゼロになったり 100 % になったり。 2013/02/21〜 iPad 第4世代 A6X 2010/08/31〜 iPad 第1世代 A4 iOS 5.1.1 ■ 2015/06/25 MacBook 12 インチ Retina Core m (Broadwell) 2013/06/15 MacBook Air 13 インチ 256 GB Core i5 (Haswell)
3.5 : 640 x 960 = 1.5 4 : 640 x 1136 = 1.775 4.7 (iPhone 6・7) : 750 x 1334 = 1.778666 5.5 (plus) : 1242 x 2208 = 1.777 iPad : 1536 x 2048 = 1.333 iPad Pro : 2048 x 2732 = 1.333
the App Store に申請
debug と release で、optimization 等の設定が違うので注意する。 前もって iTunes Connect で、アプリを登録する。 Xcode で Archive して、Validate してから、Upload する。 15 分ぐらい待って、処理完了のメールが来たら、ブラウザ上の iTunes Connect で、それを選択。 スクリーンショットや、1024 ドットサイズのアイコンも iTunes Connect で登録。

Windows 10

★タスクマネージャーを起動するには…… タスクバーを右クリック。 ★コマンドプロンプトを起動するには…… 画面の左下の旗ボタン → すべてのアプリ → Windows システムツール → コマンドプロンプト ★Visual Studio でエミュ使うには、64 ビット版の Win 機が必須。 CPU が SLAT 対応であることも必須。 開発に使うWindows 10は「開発者モード」を有効にしておく。 <UWP にメディエーション付きの広告を追加する方法。> Visual Studio を使う。 Microsoft ユニバーサル広告クライアント SDK のインストール https://msdn.microsoft.com/ja-jp/library/windows/apps/xaml/mt621245.aspx 広告メディエーター コントロールの追加と使用 https://msdn.microsoft.com/ja-jp/library/windows/apps/xaml/mt219682.aspx assets以下のHTMLファイルを読み出す方法 $.webview.url = "ms-appx-web:///test.html"; jsとHTMLでは、メディエーションできないみたいなので、 C#とXAML にしよう。 ↓メディエーション付きで、広告を入れる方法 https://msdn.microsoft.com/library/windows/apps/xaml/mt219691.aspx

Android

Android Studio を使う。 (以前は、Eclipse に ADT と SDK を入れて使っていた。Eclipse は、2015年末で Android のサポート終了になった。) AdMob のテンプレートから始める。Interstitial じゃなく Banner で。 ・AdMob を入れるためには、Google Play Services も入れる必要があり、 そのせいで 65K 問題が起こらないように、Android 4.4 (SDK 19) 以上が必要。 ・setAllowFileAccessFromFileURLs( true); を使うためには、SDK 16 以上が必要。 ・マルチウィンドウは SDK 24 以上。 strings.xml を、既存のと同様に。 AndroidManifest.xml を既存のと同様に。 screenOrientation を設定。 アイコンのファイル名を ic_launcher から icon に変える。 activity_main.xml を既存のと同様に。WebView を入れる。 MainActivity.java を既存のと同様に。firebase を import。 アイコンも入れる。 app/src/main/res/mipmap-hdpi 72 ピクセル app/src/main/res/mipmap-mdpi 48 ピクセル app/src/main/res/mipmap-xdpi 96 ピクセル app/src/main/res/mipmap-xxdpi 144 ピクセル app/src/main/res/mipmap-xxxdpi 192 ピクセル Firebase から google-services.json をダウンロードして app フォルダーの中へ。 プロジェクトレベルの build.gradle と アプリケーションレベルの build.gradle を、既存のと同様に。 バージョン番号を最新にする。 app/src/main の中に assets フォルダを作って web 版のファイルを入れる。
Android のガワネイティブは、↓WebView をやめて、Chrome Custom Tabs を使った方がいいの? http://qiita.com/keeey/items/6f39de928228e29b9aa5
★2017/06/18〜 Android 7.0 AQUOS EVER SH-02J Champagne Gold ★2016/06/21〜 Android 6.0.1 arrows Fit F-01H (2015年10月発売) ■MVNO でテザリング不可、Android 7 不可、1年使用。 ★2016/02/25〜 Android 4.4.2 S8N (ウォッチ) ■ ★2015/09/04〜 Android 5.0.2 XPERIA Z3 Compact ■画面破壊。 ★2014/11/04〜 Android 6.0.1 Nexus 5 ★2014/04/03〜 Android 4.2.2 AQUOS PHONE ■
★開発者モードにする方法(設定→端末管理→端末情報へ移動後、最下部の「ビルド番号」連打) ★Android 4.4 以降の WebView は Chromium になった。
AdMob
★AdMob の広告ユニット ID は開発時はテスト用を使用すること。 ★AdMob の ad_unit_id は strings.xml の中に書いておいて、activity_main.xml から引用。 ↓AdMob のこと。 https://developers.google.com/admob/android/quick-start?hl=ja ↓Android の画面レイアウトについて http://developer.android.com/intl/ja/guide/topics/ui/declaring-layout.html
Crosswalk
★デバイスごとにまちまちな webview を使用せずに、 必ず Chromium を使用するために、Crosswalk を使用する。 ★Android 5.0 以降は Crosswalk 不要。 ★Crosswalk のバージョンを↓ここで選ぶ。 https://download.01.org/crosswalk/releases/crosswalk/android/maven2/ ★app/build.gradle の中に… repositories{ maven{ url 'https://download.01.org/crosswalk/releases/crosswalk/android/maven2' } } dependencies の中カッコの中に… compile 'org.xwalk:xwalk_core_library:17.46.448.10' ★layout は↓このように <org.xwalk.core.XWalkView android:id="@+id/xwalkWebView" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#000000" /> ★コードは↓このように import org.xwalk.core.XWalkPreferences; import org.xwalk.core.XWalkView; public class MainActivity extends ActionBarActivity { private XWalkView xwv; @Override protected void onCreate( Bundle savedInstanceState){ super.onCreate( savedInstanceState); setContentView( R.layout.activity_main); xwv = (XWalkView) findViewById( R.id.xwalkWebView); xwv.load( "http://www.yahoo.co.jp", null); xwv.load( "file:///android_asset/index.html", null); // turn on debugging //★↓ これいるの? XWalkPreferences.setValue( XWalkPreferences.REMOTE_DEBUGGING, true); } @Override protected void onPause(){ super.onPause(); if( xwv != null){ xwv.pauseTimers(); xwv.onHide(); } } @Override protected void onResume(){ super.onResume(); if( xwv != null){ xwv.resumeTimers(); xwv.onShow(); } } @Override protected void onDestroy(){ super.onDestroy(); if( xwv != null){ xwv.onDestroy(); } } }
apk を作って、申請するやり方
★「Build」 → 「Generate Signed APK...」 ★keystore のパスワード。 ★v1・v2 両方にチェック。 ★リリースビルドの apk ファイルを念のため、実機に入れてみる。 ★apk ファイルを実機に入れるには、 メールで添付するか、いったんネット上に置くか。 ★アプリ名は、後からいつでも変更できる。 ★英語も追加する。 ★最初の5行は常に表示される文章 ★背景付きのスクリーンショットに差し替える。 タブレット用のスクリーンショットも入れよう。 アイコンは 512 x 512 角丸。 ヘッダー画像 1024 x 500 プロモーション画像 180 x 120 テレビバナー 1280 x 720 ↓Android の申請について。 http://dev.classmethod.jp/smartphone/android/android-app-how-to-release/
★KitKat 端末では、AndroidStudio DDMSパネル上のボタン押して 表示されるダイアログ上のボタンから「録画開始」です。 ↓Android の Activity の、ライフサイクル。 http://itpro.nikkeibp.co.jp/atcl/column/15/042000104/042300004/?ST=develop&P=2

S!アプリ (ソフトバンク用)

Windows に SDK 入れて Java で。

iアプリ (docomo 用)

Windows に SDK 入れて Java で。

Flash


Java アプレット

Eclipse で。

THREE.js

image を描画した canvas をテクスチャにすると、Chrome で cors。 canvas をテクスチャにして、後でそのテクスチャを変えたかったら、ctx だけを保存しておけばよい。 ctx に描画した後で、mymesh.material.map.needsUpdate = true; する必要がある。

Blender

Blender から THREE.js のために json で書出す際は、Vertices と Faces と Face Materials だけチェックすればいい。 2本指ドラッグで、見る角度を変える。 2本指ピンチで、拡大縮小。 shift + 2本指ドラッグで、見る位置を変える。 tab で、オブジェクトモード ⇔ 編集モード。 モディファイアー、マテリアル、テクスチャ T キー、N キーで、メニューが出る。 タイムライン上にキーフレームを打つ方法は、 3D View で、ボーンを選択して I キー → LocRot。 Dope Sheet で、アクションを作る。 新規アクションを製作したら F ボタンを押しておく。 NLA Editor で、アクションを使う。 2つのストリップを選択して shift + T でトランジション。 ストリップを選択して shift + D でデュープ。

Unity

2017年6月22日 WebAssembly の存在に初めて気づいた。 Unity で作ったものをブラウザ内で見てもらうためには、プラグインをいれてもらう必要があったので、面倒をかけてしまうし、 スマホやタブレットを使っている人には見てもらうことが不可能だったから、Unity をやめた。 Unity 5 ぐらいで WebGL 書き出しができるようになって、プラグイン無しで見てもらえるし、 スマホやタブレットを使っている人にも見てもらえるようになったから、Unity に戻ろうと思ったけど、 書き出したファイルが巨大すぎたので、あきらめた。 このたび、WebAssembly のおかげで、だいぶコンパクトになるみたいなので、また Unity に戻ろう。

Photoshop

★クリックした位置にあるレイヤーが選択されるようにする方法。 画面上部のオプションバーの中にチェックボックスがある。 ★背景を消す方法。ウィンドウ → アプリケーションフレームのチェックを外す。

Mac

ファインダで、ドットで始まる名前のファイルを表示させる方法 defaults write com.apple.finder AppleShowAllFiles true killall Finder (非表示に戻すには、true を false に。) macOS Sierra で、Photoshop CS5 を使う方法 下記の2つの空フォルダを作るだけでよい。 ● /System/Library/Java/JavaVirtualMachines/1.6.0.jdk ←拡張子が付いてるけど、これがフォルダの名前。 ● /System/Library/Java/Support/Deploy.bundle ←拡張子が付いてるけど、これがフォルダの名前。 でも、この場所には、通常のやり方では新しいフォルダを作れない。 作るためには、Command + R 起動でリカバリーモード。ターミナルで csrutil disable。 今度は普通に再起動して、普通にファインダで上記の2つの空フォルダを作る。 そしたらまた、Command + R 起動でリカバリーモード。ターミナルで csrutil enable。 あとは普通に再起動。Photoshop CS5 が使えるようになる。 ちなみに Audition CS5 は、これをしなくても macOS Sierra で使える。 Illustrator CS5 が終了時にクラッシュする場合 /Library/Application Support/Adobe/CS5.5ServiceManager を /Library/Application Support/Adobe/CS5.5ServiceManager.bak 等にリネームすればいいらしい。 USB SuperDrive を、ハブ経由で使用する方法 Command + R 起動でリカバリーモード。ターミナルで csrutil disable。(SIP を一時的に無効化。) 普通に再起動。ターミナルで sudo nvram boot-args=”mbasd=1″ Command + R 起動でリカバリーモード。ターミナルで csrutil enable。(SIP を元に戻す。) 普通に再起動。