Androidでviewportのwidth指定が効かない

http://designdrill.jp/wordpress/?p=8153

viewportをcontent="width=320" とすると効かない機種があるという話。
リンク先はwebviewの話ですが、標準ブラウザでも発生しました。

タッチデバイスでjQueryUI draggable の cancelオプションを使えるようにする

http://raqool.com/blog/archives/334

ｊQueryUIをタッチデバイスに対応させるために、【jquery.ui.touch-punch.js】を使うが、そのままではiPad等のタッチデバイスで、draggableのcancelオプションが機能しない。
上記リンクをやればできるようになる。

AppStore, GooglePlay, MicrosoftStore バッジ入手先とリンク先

http://qiita.com/tsunet111/items/6c6248b110617ba60f7f

AndroidはWebフォント使うときtruetype必須

http://wisdomtrees.net/?p=453

canvasを重ねたいとき

html　canvasを複数枚かさねたいときは、全体をdivで囲む必要あり。

http://h3poteto.hatenablog.com/entry/2014/04/27/203513

iOS In-App Purchase（自動更新購読 Auto-Renewing subscription）の場合のレシート情報のやり取り

http://qiita.com/monoqlo/items/24d36e3a95bc813a7276

要点：
・iTunes Connect内のアプリ内課金ページから「共有シークレット」の発行をする
・レシートデータと共有シークレットをセットにして問い合わせる

AndroidのChromeで文字がやたら大きくなるバグ

http://www.seomode.jp/html-css/2014/06/25/3339/
AndroidのChromeで文字がやたら大きくなるバグ（現状最新でも発現）の対処法。

iOS向けのAIRアプリでIOError #2032が出たら

http://htmlspank.tumblr.com/post/130674234457/ioerror-2032-ios9-adobe-air-and-ats

iOS9からHTTPSデフォルト必須。回避するためにアプリケーション記述ファイル（xml）の<InfoAdditions>タグに指定するドメインを追加すれば良い。

JSON Editor Online

http://www.jsoneditoronline.org/

うまくJSONパースできなかったときに使った。

よく使うCordovaコマンド

http://qiita.com/hara_p/items/f9bbcced6882fcfede6f

node.jsのバージョンに注意

http://neos21.hatenablog.com/entry/2016/05/27/102608
最新のv6系は新しすぎてライブラリたちが対応できていない（phonegapコマンドが使えない）ので、v4、v5系を使うのが良いと思う。ちなみに、公式サイトで配布されているのがv4とv6系だったので、私はv4系です。

nodistとか使うとバージョン管理がやりやすいみたいですが、これもphonegapコマンドが効きませんでした。←これは深追いしてません。

Androidアプリの OpenSSL の脆弱性への対処方法

http://qiita.com/shimitei/items/61e4f4907c1079bb51f9

2016/7/11からはAIRアプリをAndroid用に公開するときはSDK21以降でパブリッシュする。

以下がGoogleからのお達し。

https://support.google.com/faqs/answer/6376725

Captivateでの「フレームに入ったときのアクションを実行する」リセットボタンの作り方

Captivateでの「フレームに入ったときのアクションを実行する」リセットボタンの作り方
http://blog.lilybiri.com/replay-slide-button

Captivateで同じスライドを最初から実行するアクションを素直に作っても、「入力時アクション」が実行されません。
しかし、下記の方法であれば、入力時アクションが実行されるアクションを作ることが可能です。

• リセットしたいスライドの「入力時」アクションで、スライドに入ったときのフレーム数をユーザー変数(上記の例ではv_enter)に代入
• リセットさせたいときに実行されるアクションで、"cpCmndGotoFrameAndResume = v_enter - 2"と設定する

---

「インタラクション」の「ドラッグアンドドロップ」は、「クイズに含める」にチェックしていない場合、フレームに入ったときにリセットされるので、アクションでドラッグアンドドロップをリセットさせたいときにも有効です。

Premiereにマスクをかけて、動きをトラックさせる

マスク＆トラックで、動きのある顔にぼかしをかける
https://helpx.adobe.com/jp/premiere-pro/how-to/blur-face-masking-tracking.html

顔にぼかしを入れるチュートリアルで下記２点について説明してあります。

• ぼかし系のエフェクトのかけ方
• 自動トラッキング機能

自動トラッキング機能

• Premiereが自動で動きを察知して保管してくれる機能。
• フレームとフレームの間に大きな移動があると、迷子になって、誤検出される。
• これでバーッと動きを付けて、微調整するのが良さそう。

スプラッシュ画面を設定する方法（AIR for Android）

http://www.redherringlabs.com/how-to-create-a-native-splash-screen-for-an-air-application-on-android/

AIR SDK の styles.xml を書き換えて、apk にビルドする

Terminal で、content.swf, content-app.xml などから apk にビルドする

../../AIR18/bin/adt -package -target apk-captive-runtime -storetype pkcs12 -keystore ../../AIR18/developer.p12 -storepass ***** content.apk content-app.xml content.swf AppIconsForPublish

../../AIR18/bin/adt -uninstallApp -platform android -appid jp.co.elephancube.work.content

../../AIR18/bin/adt -installApp -platform android -package content.apk

../../AIR18/bin/adt -launchApp -platform android -appid jp.co.elephancube.work.content

CSS 幅100%でpadding指定するとはみ出る

http://ginpen.com/2012/12/05/css-box-model/
box-sizing使うのがオススメ

phonegapでアプリ内課金のプラグインたち

https://github.com/j3k0/cordova-plugin-purchase

https://github.com/AlexDisler/cordova-plugin-inapppurchase

https://github.com/cranberrygame/cordova-plugin-payment-iap

JSでドラッグ＆ドロップ

http://qiita.com/tsunet111/items/911b72e0fb140969190c

phonegapでスプラッシュ画面を制御する

https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/

Androidアプリの開発はEclipse→AndroidStudioになって、何かと不便になった。スプラッシュもその一つ。そのため、phonegapはプラグイン用意してくれてます。

プッシュ通知のとき特定のアプリ内ページに遷移する

http://stackoverflow.com/questions/16689092/phonegap-pushnotification-to-open-a-specific-app-page


プッシュ通知受け取った時、通知領域をタップして、特定のアプリ内ページに遷移させたいとき、アプリが起動していないときはjavaいじるしかない。

アニメーションGIFの諸々を取ったり操作したい

libgif-js  https://github.com/buzzfeed/libgif-js

アニメーションGIFをcanvasに展開して、JSから再生・停止や、再生終了時のイベント発火などを実現している。

IEでものすごく遅くなります。クロスドメインもダメです。
（結局アニメーションGIFを使わずに、mp4にしてvideoタグの方向にしましたが、参考までに…）

iTunes ConnectにアップロードするとInvalid Signatureとなる

http://qiita.com/shimitei/items/4618f304d76f6e7d130b

AIR SDK 21でうまくipaファイルが作れない方は、こちらを参考にすると良いようです。

AIR SDK 22 Betaですが、こちらだと署名問題なく申請できるようです。

CSS インライン要素 はみ出た部分を ... で省略する

http://d.hatena.ne.jp/masayoshi_9a7ee/20150206/1423228027

gulp + EJS で JSONからファイルを生成する

http://kinacom.hatenablog.jp/entry/2015/08/04/211403

大量の(150個くらい)のHTMLをほぼ手作業で作成する必要があったのですが、定型文を流し込んでいく感じの作業だったので、自動化しようと思い立ち、イマドキっぽくgulpでやってみました。

glupのサンプル自体はたくさんあるのですが、上記のものが割と新しめでほぼそのまま使えます。

EJSとglupのファイルを用意すること自体は10分くらいででき、結果として75ms で約150のほぼ完成形のファイルが生成されました
（JSONファイルを作るのが一番手間でしたが、そこは目をつむります）。

---

追記  EJSでなにができるかは、下記の記事がよいです。

テンプレートエンジンEJSで使える便利な構文まとめ（http://qiita.com/y_hokkey/items/31f1daa6cecb5f4ea4c9）

if文で表示・非表示などが可能なので、ちょっとしたHTMLの大量生産にはうってつけだと思います。

jQuery 選択したテキストを取得するプラグイン

http://madapaja.github.io/jquery.selection/ja_jp.html
iPadでもうごきました。

Android Studioのバージョンコード変更手順

Android Studioでバージョンコードを変更する場合、AndroidManifest.xmlではなく、build.gradleを修正する。

http://qiita.com/Masaminr/items/194f650e7ed9b6c4f0e2

クロスサイト・リクエストフォージェリ(CSRF)対策(PHP編)

http://www.websec-room.com/2013/03/07/479
ここが分かりやすいけど、セッションIDをそのまま格納するのは非推奨。リンク先の方法で使い捨てのトークンを作成する。

IEでJSONデータが正常に取得できないケース

InternetExplorerでJSONのエラーが出たら-ITかあさん
http://www.kaasan.info/archives/1612


IE11でJSONを利用できません。 - Microsoft
https://social.technet.microsoft.com/Forums/ie/ja-JP/990ea9f8-7887-4455-a8d1-b9c3e00a2c29/ie11json?forum=internetexplorerja
http://stackoverflow.com/questions/20577007/filereader-and-json-objects-not-defined-in-ie11
==========================================
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
==========================================


IE+Jsonではまった - とりあえず暇だったし何となく始めたブログ
http://d.hatena.ne.jp/khiker/20081026/javascript_json
==========================================
次のようなものを.htaccessに足したらちゃんと動いた．
AddCharset utf-8 json
AddType text/javascript json
==========================================


1.json2.jsのススメ - motohasi.net
http://www.motohasi.net/Program/JavaScript/Item1.php

GitHub - douglascrockford/JSON-js: JSON in JavaScript
https://github.com/douglascrockford/JSON-js

JSON記述の基本とデコード（ json2.js ）
http://logic.moo.jp/data/archives/535.html
============================================
// 古いやり方 var json_object = eval('(' + json_text + ')');
var json_object = JSON.parse( json_text );

json2.jsで解決。

ただし、jQueryなどを使っている場合は、別の解決策の方がよいかも。

iOS9からiPadランドスケープでdevide-widthが無視される

http://webskillup.com/ety/20150930014228/
これけっこう重要！

http://gori.me/ipad/ipadair/82202
devide-widthが無視されるけど、iPadのminiからProまでで表示が変わるわけではなさそう。ちょっと安心。

Captivate 音声合成マークアップ仕様

https://ondemand.neospeech.com/vt_eng-Engine-VTML-v3.9.0-3.pdf

読む速さとか変更できます。

iOS Safari でタップしたときに黒い枠がでるのを消す

http://www.yoheim.net/blog.php?q=20120811

Javascriptで改行を含む長い文を扱う

http://7cc.hatenadiary.jp/entry/string_linebreak_
改行のある長い文章なんかを変数に入れたいときに。
functionにコメントアウトした文章を入れ、そのコメントを文字列に変換して、コメント部分を消去する　ということをしています。

※ 上の記事にもあるように、最新環境だけがターゲットの場合は非推奨。

※ 内容によってはうまくいかないこともあるようで、私が試した内容だと、 replace一回のみパターンでは、iOS Safariでゴミが残った。

jQueryのイベント指定に on を使おう

http://qiita.com/naoyeah/items/b3210a80907896e79cb5
「ｊQueryのイベント指定に on を使おう」という話。
これ知らなかった。

最後に書いてあるけど、スマホだと、bodyやdocumentにイベント割り当てられないらしいので注意。ま、containerとかwrapperとかで囲んでそこに設定すればいいというだけ。

PDFからHTML変換

http://www.pdfconverter.com/products/pce/
このソフトが、仕上がりのHTMLのタグ付けも含めていい感じ

ダミー画像をおく

https://placehold.it/
使い方こんなかんじ↓
<img src="http://placehold.it/350ｘ150">

プレビュー↓

SVGアイコン素材 iconmonstr

http://iconmonstr.com/
商用利用OK
ただし、トレードマークなどに使わないこと

WORDからHTML変換

http://wordcleaner.com/
これがベストソリューションかもしれない！

辞書API

http://dejizo.jp/dev/index.html
いろいろ辞書データ探した限り、ここが、オープンな辞書データをAPIで呼び出せるようにしてくれているようだ。
商用契約もあるらしいが、無料版を商用利用するのはOKとのこと。

jQuery 右クリックをカスタマイズする

https://swisnl.github.io/jQuery-contextMenu/

PDFからHTML変換

http://www.wondershare.jp/win/pdf-converter.html
けっこう精度高い。
WORD→PDF→HTMLというフローつくれそう。

IE6 全てのタグに:hover疑似クラスを適用させる

CSShover
http://peterned.home.xs4all.nl/csshover.html

ie9.jsにも:hoverをすべてのタグに適用させる機能はあるのですが、
IE6ではうまく動かないことがあったので、こちらを使っています。

CSSに

body{
behavior:url(./css/csshover3.htc);
}

のように書くと:hoverが効くようになります。
ただし、パスはCSSファイルからではなく、htmlファイルからなので注意。

PowerPoint ワイヤーフレーム素材 powerWIREFRAME

http://power-story.com/create-wireframes-in-powerpoint-with-powerwireframe/
これがベストかはわからないが、ひとまず無料。

他いろいろ
http://blog.mb.cloud.nifty.com/?p=609

IPA 安全なウェブサイトの作り方

https://www.ipa.go.jp/security/vuln/websecurity.html
別冊の「安全なSQLの呼び出し方」流し読みした感じ、わかりやすそう。
このシリーズ目を通しておきたい。

XP・IE6の仮想環境

以前にもあった古いIE用の仮想環境、使ってみました。

ダウンロード元
Virtual Machine (VM), Windows Virtual PC & BrowserStack : MSEdgeDev https://dev.windows.com/en-us/microsoft-edge/tools/vms/windows/
（以前はmodernIEだったのですが、MSEdgeDevに変更されてます）

XP・IE6環境の場合、日本語表示・入力がかなり厄介

• 表示は日本語フォントを入れる必要がある
• 日本語のフォントならなんでもOK
• 手っ取り早いのは XP用のメイリオ（MS公式）
  https://www.microsoft.com/ja-jp/download/details.aspx?id=10550
• 入力についてはXPのディスクがあれば追加インストールできる 
• Windows Updateはアクティベートしてくださいに阻まれてしまう
• 今回はホスト側で入力→ペーストで頑張りました。

★参考
MacでWindows XP & IE6の環境を構築するまでの壮大なYak Shaving
http://blog.howtelevision.co.jp/entry/2014/10/31/182314

デスクトップキャプチャ AG-デスクトップレコーダー

http://www.gigafree.net/media/recording/agdesktoprecorder.html
今まで別のキャプチャソフト使っていたけれど・・・
Windows10も正式にサポートされているソフトを探した。
音声も問題なく録画でき、書き出しファイルが非常に大きくなっても大丈夫だった。

JavaScript の Date で注意すべきこと

http://qiita.com/labocho/items/5fbaa0491b67221419b4

非推奨のものがあったり、１月が0で返ってきたり、いろいろ罠があるので注意

JS setTimeoutで引数を渡す

http://easyramble.com/javascript-settimeout-callback-args.html

ie7.js (IE6がIE7や8の解釈をしてくれるようになるjs)

ie7.js
https://code.google.com/archive/p/ie7-js/

CSS3(+HTML5)に対応していないIEを対応させてくれるJS。
ie7.jsでIE7基準に、ie9.jsだとIE9基準になるので素敵。

• 素敵

1. お手軽に透過PNGが使えるようになる。
2. お手軽に position:fixed, margin:autoのバグが直る。
3. :hoverがaタグ以外にも効くようになる。
4. 疑似要素、疑似クラスがほとんど使えるようになる。
5. 割といろんなサイトに使われている（いた）ので安心感がある。

• デメリット

1. このJSを取り上げてるブログがだいたい2011年とか2012年とかなので、少し悲しくなる。
2. 機能が多いJSなので、ちょっと重くなる。

★参考

ie9.jsを使うと出来ること、出来なくなること。 – Toro_Unit

http://torounit.com/blog/2011/06/07/793/

スマホ対応のjQueryのカラーピッカープラグイン

プラグインDL（GitHub）
https://github.com/rjfranco/excolor

使い方（基本）
http://taitan916.info/blog/?p=2358

古いIE環境 MS純正の方法２つ

http://allabout.co.jp/gm/gc/435388/
仮想環境イメージ

http://allabout.co.jp/gm/gc/379347/
ツール

複数サイズアイコン作成

http://ao-system.net/alphaicon/index.php
いろいろなアイコン作成サイトがあるが、ここは、自分で作成した複数画像を合成したアイコンが作成できる。自分できれいに画像作ってそのままアイコン化したいときに。

印刷用CSSメモ

随時更新する予定

http://www.kotalog.net/archives/3105
考え方的なこと。基礎。

http://blog.asial.co.jp/1280
基本的なpage_breakなど

http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1218588927
知恵袋。幅の計算とかちょっと参考になる。

http://web-tan.forum.impressrd.jp/e/2015/07/28/20508
デバッグ方法（Chrome開発者モードでエミュレートできる）

参考サイト：Quizlet

https://quizlet.com/
こういうサービスをつくっていきたい、という１つの参考まで。

新規のイラストレーターをさがす

http://illustrators.jp/
「イラストレーター通信」
基本ここから探せば、どんなテイストの人でもみつかる＆きちんとフリーランスで活動している人が登録している。

推奨アーカイバー Explzh

http://www.ponsoftware.com/
圧縮・解凍ソフトいろいろありますが、これを推奨します。

理由は、
・7-zip形式に対応
　DLLダウンロードが必要ですが、zipよりかなり圧縮効率がいいです。
・Macのファイルが文字化けしない
　Windows標準で文字化けするファイルが、このソフトだと文字化けしません。
・フォルダの中に同じフォルダ作成されるのを回避してくれる。
・連続圧縮・連続解凍などができる。
などなど。

モリサワのWebフォント TypeSquare

http://typesquare.com/
教科書体などもあり、費用も明確なので、顧客提案などの参考に。
MORISAWA PASSPORT契約していると、その範囲内でも使えます。

PowerPoint 図形の合成や型抜き

https://www.microsoft.com/ja-jp/office/2010/business/training/tips/powerpoint21.aspx
意外と知られていませんが、PowerPointで図形の合成などができます。

Flash flvplayback 思った位置にシークできない場合のエンコード設定

Flashで動画再生する機会は減ってきていますが・・・以下TIPS。

Flashでflvplaybackコンポーネントを使用して動画を再生し、指定の位置にシークしようとしたとき、うまくシークできないことがあります。
具体的は、13秒へシークするように指定しているのに、10秒の位置に飛んでしまう、といった現象。
この現象について、動画のエンコードの問題の可能性があります。

基本的に、動画ファイルについて「キーフレーム」を設定した位置にしかシークできません。
「基本的に」と書いたのは、最近のブラウザに実装された動画プレイヤーだとこの問題は起きないようにプレイヤーが仕様を吸収しています。「動画の技術仕様の基本」という意味では、そのとおりで、flvplaybackはこれに忠実に動作します。

つまり、キーフレームが5秒ごと　0秒、5秒、10秒、15秒 の位置に設定されていると、13秒の位置にシークしたいのに、10秒あるいは15秒などずれた位置に飛ぶことになります。

以下、TMPGEncによるエンコード設定方法

この動画は、12fpsです。

これがTMPGEncのデフォルト設定。

GOPの標準フレーム数が「250」となっています。

これは、実際は動画の内容によって最適化されますが、画面に動きがなければ、最大250フレームごとにキーフレームを打つということになります。つまり、最大で20秒ちょっとの間隔があきます。

改善設定例

標準フレーム数を12にしました。フレームレートと同じなので、最大でも1秒間隔でキーフレームが入ります。

これだけ見ると、「標準フレーム数を小さくしておけばいいじゃん」と思いますが・・・
データ量が圧倒的にふえるため、同じビットレートだと、格段に画質落ちます。
動画の内容によりますが、ビットレートを2倍（つまりデータ容量もほぼ2倍）にしても、まだ元の設定のほうが画質がいい、というくらい変わります。

よって、データ容量とのバランスで調整する必要があり。


最後に、私もこの設定「GOP」について完全には理解していないが、なんとなく、こういうこと
http://www.xucker.jpn.org/keyword/gop.html

HTML5 audio in iPad TIPS

HTML5 audioタグをJavaScriptから制御するときの注意

• duration プロパティが Infinity になる。
  解決策不明。iOS8、iOS9とも同じ。
• currentTime プロパティに 0 をセットするとスクリプト停止する。
  0.01なら問題なし。発生はiOS8のみ。

Adobe AcrobatなしでPDF作成 CutePDF

http://www.cutepdf.com/
タイトルの通り。
AdobePDFと同じように「プリンタ」として認識されます。
インストール時、いろいろ余計なソフトをインストールしようとしてくるので、ちゃんと拒否ること。

HTMLモーダル画面作成 fancybox

http://fancyapps.com/fancybox/
モーダル画面を生成するjQueryプラグインです。
同様のものは多数ありますが、いろいろ試して
・分かりやすく応用がききやすい
・安定している
・IE8など古いブラウザも動作する
という理由でよく使っています。

商用利用は有償ですが、Multi Domain License を買っているので、制限なく使って問題ありません。

Flash flvplaybackでの画質向上

http://67.org/uk/2009/06/flv_flvplayback_smoothing.html

Flashで動画をリサイズ再生すると、非常に荒れる現象の改善方法。
リサイズしなくても荒れるので常に適用しておいたほうがいい。

ローカルでWEBサーバーをたてる 04WebServer

http://www.soft3304.net/04WebServer/
サーバーにあげないとうまく動かないスクリプトを動かす、程度ならこれが簡単。


https://www.apachefriends.org/jp/index.html
なお、サーバーサイドのプログラムやDBなどをきちんと動かすならXamppが王道だが、けっこう面倒

コーディング用で日本語も含まれるフォント Myrica M

コーディング用フォントいろいろありますが、私は、Myrica M に落ち着いて、秀丸、FlashのASパネル、DreamWeaverなどテキスト編集する環境は、ほぼこれにしています。

http://myrica.estable.jp/

理由としては、
・コーディング用で、文字の視認性が高い。1とlとか0とOとか区別つく。
・日本語がきちんと含まれている。←これが意外と少ない。

ブラウザでの確認にシークレットウインドウを使おう

Webサーバー上での動作確認をする案件の場合、けっこうキャッシュが残ったり、それ消すのに時間がかかったり面倒ですよね？

そんなときは、Chromeの場合「シークレットウインドウ」、IEの場合「InPrivateブラウズ」を使いましょう。

Chrome シークレットモードの起動：CTRL+SHIFT+N

IE InPrivateブラウズの起動：CTRL+SHIFT+P

これらは、キャッシュなどを残さないためのモードですが、通常ウインドウとシークレットウインドウは完全に切り離されているので、起動した瞬間、キャッシュがない状態で起動します。

キャッシュを消すより手軽で便利。

ちなみに、シークレットウインドウのウインドウをすべて閉じないとクリアされませんので、注意！（シークレットモードのウインドウが１つでも残っているとキャッシュやセッション情報が引き継がれてクリア状態になりません。）

コピーツール FastCopy

http://ipmsg.org/tools/fastcopy.html
コピーが速い、というのが売りだが、Win8以降はOS純正もかなり進化しているのでどれだけ差があるかは分からないけど、細かいファイルが大量にある場合は、確かに早い。

主な便利機能
・中断/再開できる（Win純正でもできるようになったけど）
・速度制限がかけられる
・バッチ処理ができる
・コピー時にフィルタがかけられる
　・ファイル名でフィルタかけて拡張子 *.swf だけコピーする
　・日付でフィルタかけて、今日更新された差分だけコピーする　など。