投稿

2015の投稿を表示しています

Swift2で二地点の緯度・経度からその距離を計算するには?

二地点の緯度・経度からその距離を計算する(日本は山だらけ〜) のJava版をSwift2に移植しました。数学は分かりません。理論も分かりません。でもSwiftとJavaは分かるので移植はできるのです(^^); オリジナルがMITライセンスなので、このコードもリスペクトを込めてMITライセンスとします。 // // GeoUtil.swift // import Foundation /** * 二地点の緯度・経度からその距離を計算する(日本は山だらけ〜) - http://yamadarake.jp/trdi/report000001.html */ @objc(GeoUtil) class GeoUtil: NSObject { static let BESSEL_A: Double = 6377397.155; static let BESSEL_E2: Double = 0.00667436061028297; static let BESSEL_MNUM: Double = 6334832.10663254; static let GRS80_A: Double = 6378137.000; static let GRS80_E2: Double = 0.00669438002301188; static let GRS80_MNUM: Double = 6335439.32708317; static let WGS84_A: Double = 6378137.000; static let WGS84_E2: Double = 0.00669437999019758; static let WGS84_MNUM: Double = 6335439.32729246; static let BESSEL: Int = 0; static let GRS80: Int = 1; static let WGS84: Int = 2; static func deg2rad(deg: Double) -> Double { return deg

iOS9で位置情報を使う定期バックグラウンド処理をする場合のバッテリー消費を抑えるには?

iOSでのバックグラウンド処理の制限 iOSでのバックグラウンド処理は非常に制限されているが、いくつか方法はある。しかし、「定期的にバックグラウンド処理をする」という条件になるとかなり限られる。 どのような方法を選択できるかはアプリのタイプや目的によるが、アプリによらず選択できるであろう方法は少なくとも2つある。 Background fetch iOSがアプリの利用頻度などから「非定期に」バックグラウンド処理を動作させるので使えない。 Remote Notifications サーバーからのNotificationが届くタイミングでバックグラウンド処理を起動する方法だが、サーバーサイドの実装が必要な上、Notificationが届くタイミングはまちまちで、最悪の場合は届かないこともあるので、苦労の割に確実性に欠ける。 AndroidのAlarmManagerの代替は無いのか? 調べた限り、iOSではAndroidでいうところのAlarmManagerのようなバックグランド処理はできない。 iOSで言うところの「バックグラウンド」とは、タスクマネージャーにプロセスが残っている状態のこと である。つまり、ユーザーがタスクマネージャーからアプリを終了させたらバックグラウンド処理はできない。 位置情報の更新を利用した定期バックグラウンド処理を採用 幸い今回開発中のアプリは位置情報を利用するタイプのアプリなので、「Location updates」のcapabilityを利用して定期的にバックグラウンド処理をさせることができた。 位置情報の更新によるバッテリー消費を抑えるために考えた2つのこと(失敗) しかし、ここで気になるのは、バックグラウンドで位置情報を更新し続けることによるバッテリーの消費がどれだけのものなのかということ。 そこで、このあたりを参考にした。 Energy Efficiency Guide for iOS Apps: Reduce Location Accuracy and Duration 一番始めに考えたのは、iOS9から導入された requestLocation() を利用することだった。タイマーで必要な時だけrequestLocation()を使って位置情報を取得すればバッテリーの

SwiftでCordova(ionic)のpluginを開発するには?

イメージ
Swiftでcordovaのプラグインを開発することはできるのだろうか? このあたりを見ると開発できそうだ。 Chris Dell - Software Developer :: Writing an iOS Cordova plugin in pure Swift How to write Cordova plugin in Swift? - Stack Overflow やってみよう。 今回はChrisさんのコードを参考に、HTMLからネイティブに小文字のメッセージを送って大文字変換されたメッセージを受信するというサンプルを作る。これが完成形。 ビルドシステムはionicを使うが、プラグイン部分の開発はcordovaでも通用するはず。 まずはblankプロジェクトを作ろう。 $ ionic start CDVEchoPlugin blank CDVEchoPlugin/www/index.htmlをこのように編集する。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>CDVEchoPlugin</title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above <link href="

これがAngularJSの$apply()や$digest()が低速な理由のひとつか?

イメージ
昨日書いた記事 「 琴線探査: Dr. GlebのAngularアプリ最適化TIPSまとめ 」 に、try-catchがあるとV8では最適化されないため処理が遅くなると書いた。 今日は自分で書いたアプリをプロファイルしてみた。このように、$apply()や$digest()に相当な時間がかかっていることが分かった。 これは予想通りだったが、驚いたのは$apply()や$digest()でtry-catchを使っているらしいことだ。 「Not optimized: TryCatch Statement」とツールチップが出ている。ひょっとすると、これが$apply()や$digest()が低速な理由のひとつなのかもしれない。 だとすると、かなり根本的なレベルで高速化できていないことになる…内部的にtry-catchを使わないようにできないのかなぁ(´・ω・`)

Dr. GlebのAngularアプリ最適化TIPSまとめ

Dr. Glebのブログ記事 Improving Angular web app performance example. | Better world by better software を簡単にまとめておこうと思う。 try-catchはできるだけ使わない V8ではtry-catchを使った処理は最適化されないので、特にループ処理ではできるだけ使わないようにする。Primesの例ではtry-catchを無くしただけで全体の処理は2倍以上、メソッド単体では200倍近く高速化している。 追記15.08.26 :$apply()や$digest()でtry-catchが使われていることが判明(ノ∀`) 琴線探査: これがAngularJSの$apply()や$digest()が低速な理由のひとつか? ダイジェストサイクルをできるだけ速くする $scope.$apply()した時のあれ。ダイジェストサイクルはフレームレートと同じで、長くなるほどUIが固まってしまうことになる。短くする方法は色々ある。 バインドさせる変数をできるだけ少なくする ng-modelとか$scope.valueとか。バインドさせる変数の数だけダイジェストサイクルは遅くなる。 filterはできるだけ使わない filterはダイジェストサイクルを遅くさせる。「{{ "index" | lowercase }}」的な無駄なフィルターはもってのほか。 one-time-bindingを使う サーバーから持ってくるデータは大抵の場合は大量だ。これをページにレンダリングするために2wayバインディングを使ってしまうとダイジェストサイクルが大幅に遅くなる。 そこでAngular1.3から導入されたone-time-bindingを使う。これを使えば、始めだけはバインディングするのでダイジェストサイクルに影響するが、その後は影響が無くなる。 例えば「{{name}}」としている所を「{{::name}}」とするだけでone-time-bindingになる。 AngularJS: Developer Guide: Expressions React的なレンダリング方法に変更する 特にtableの中身などの反復

AngularMaterial VS Polymer - UI部分だけそれぞれで実装・比較して分かったこと

あるWEBアプリを AngularMaterial を使って実装しているが、最近 Polymer が1.0になったので、実験的にUI部分をPolymerで実装し直して比較してみることにした。 ここに分かったことをまとめておこうと思う。 UIコンポーネントの数 AngularMaterialの方がベーシックに使えるものが多い。最近では FAB Speed Dial などのコンポーネントが増え、益々充実してきている。 Polymerにもgoogle-mapなどのコンポーネント が増えてはいる。 UIの動作速度 Polymerの方が速い。Polymerはアニメーションに WebAnimation を使用しているが、AngularMaterialはngAnimateに依存しているからだと思われ。 レイアウトのしやすさ Polymerの方が分かりやすい。 Polymerではvertical, horizontal とするところを、 AngularMaterialではrow、column となっている。 レイアウト処理の軽さ Polymerの方が軽いのではないかと思われる。Polymerではレイアウト関連の指定は「class="layout horizontal"」のように全てCSSのclassだが、AngularMaterialでは「layout="row"」のようにタグのアトリビュートで行われるので内部でカスタムタグの処理をしているだろうから。 ライブラリとしての扱いやすさ AngularMaterialの方が扱いやすい。ngAnimate、ngAria、ngMaterialの各モジュールとCSSをひとつ読み込むだけでたくさんのUIコンポーネントを使うことができる。逆に言えばムダが多い。bowerのコンポーネントの数で言えば3つだ。 一方、PolymerはHTML importの仕組みによって必要なコンポーネントを必要なだけ組み込めるようになっているのでムダが少ないが、小さいファイルをたくさん読み込む必要がある。例えばFAB一つ使うだけでもbowerのコンポーネントは3つでは済まない。 起動速度 AngularMaterialの方が速い。参考までに、今回のアプリでは1

CSSのtranslate3dをパースして数字の配列にするには?

CSSのtranslate3dは例えば translate3d(5, -10, 0) のような文字列になっているが、このままでは計算するのに使いにくい。 そこで、これをパースして数字の配列にするにはどうすればいいだろう。例えば、このような正規表現を使うというのはどうでしょう? /** * CSSのtranslate3d文字列を数字の配列に変換して返す */ function parseTranslate3d(string) { var array = string.replace('translate3d', '').match(/-?[\d\.]+/g); for (var i = 0; i < array.length; i++) { array[i] = Number(array[i]); } return array; }

ionicでcrosswalkのビルド後のapkがarmv7とx86に分かれた件

最新版のionicでは、crosswalkのビルド後のapkがarmv7とx86に分かれるようになった。 これによって、armv7とx86両対応のために40MB以上になっていたアプリサイズが20MB程度まで軽量化された。 喜ばしい事ではあるけれど、リリース時にとても混乱してしまった。 リリーススクリプトを書いているのだけど、これまでは一つのapkにサインすればよかったものが二つのapkにサインする必要がでてきて、スクリプトがまともに動かなくなってしまったからだ。 しかし、このことに気づいた後は特に問題は無かった。 Google Playでは、すでに一つのリリースで複数のapkをアップロードできるようになっているので全く心配は無い。

ionicで最新版のcrosswalkをインストールする方法

イメージ
ionicで最新版のcrosswalkをインストールする方法について。 Crosswalkのstableな最新版は ここでチェック できる。 現在「14.43.343.17」が最新版だが、「ionic browser ls」すると ionicでは14.x系はcanaryになっていることがわかる。 ここに最新版を追加するにはionicのbrowser.jsというスクリプトを編集する。 $ sudo vi /usr/local/lib/node_modules/ionic/node_modules/ionic-app-lib/lib/browser.js Browser.crosswalkVersions = [ ・・・・ { version: '12.41.296.5', publish_date: '2015-03-05 13:19' }, { //独自に追加 version: '14.43.343.17', publish_date: '2015-06-30 14:12' }, { version: '13.42.319.6', publish_date: '2015-04-14 14:24', beta: true }, { version: '14.42.334.0', publish_date: '2015-04-13 09:16', canary: true } ]; 再度「ionic browser ls」すると 「14.43.343.17」が追加されていることがわかる。 あとは $ ionic browser add crosswalk@14.43.343.17 とすれば最新版をインストールできる。

Angular2.x系が出るまで1.x系でES6やTypeScriptと共存させる方法についてのビデオ

イメージ
Angular2.x系が出るまで1.x系でES6やTypeScriptと共存させるにはどうしたらよいのか? この疑問に、このビデオ「Getting Ready for Angular 2.0」がある程度答えてくれていたのでメモ。 55:34あたりからThe question is…「But What Do We Do Now?」と始まる。そう。そこが聞きたかった! ES6って何となく全く違う言語のような気がしていて、一体どんな風に書くの?と思っていた。 しかし、よくよく考えてみるとES6はES5の機能を受け継いでいるので、ES6で書いてもAngular1.x系は動くのである。というか、「ES5でES6の拡張機能が使えるようになったと考えた方がいい」ということに気づかされた。 例えば、これがおなじみの1.x系でのコントローラーの書き方だ。 そして、ES6と共存させて書くとこうなる。 より現実的には、このようにクラスをファイルに分けることになるだろう。 これを使う場合はこうなる。 その他、ディレクティブやNew Routerについてもメンションされている。 これらをヒントに、これからES6というかTypeScriptで書く実験をしてみたいと思う。 ES6はつい先日正式版になったばかりだ。ではES6を使い始めるのは一体いつか?それは今でしょう。 Thanks, Yuri Takhteyev!

ionicでインストールするcrosswalkを選択できない件

追記15.07.11 :最新版のionic(1.6.1)では「ionic browser add crosswalk@バージョン」で指定通りインストールできるようになった。この記事も合わせて読むとionicの更新に依存することなくcrosswalkの最新版をインストールできるようになる。 琴線探査: ionicで最新版のcrosswalkをインストールする方法 ---- 最近ionicのCLIが1.5.0にバージョンアップしたのだが、その後platform/androidを削除してcrosswalkを再インストールしたら、localStorageに保存したはずの値がアプリの再起動時に保存前の状態に戻っているという動作になってしまった。 ChromeのDevToolsでは、crosswalkのバージョンは42.0.2311.135となっている。以前のバージョンが何だったのかは覚えていないが、このバグが出る前は確か41系だったような気がする。 「ionic browser ls」でインストールできるcrosswalkを見ると、crosswalk-liteが増えていたりするので多分アップデートされたと思う。 幸いなことに、 ionicはcrosswalkのインストール時にバージョンを指定できる ので、stableで一番古いものをインストールして実行し、再びDevToolsでバージョンを確認すると…全く変わっていない! 何かおかしい。ネットで調べると、どうやらcrosswalk-liteもインストールできないという話。 cordova - How to build android with Crosswalk lite using ionic-cli? - Stack Overflow このページを参考に、「ionic browser add」で何をやっているのかソースを見てみることにした。場所としてはここ。 /usr/local/lib/node_modules/ionic/node_modules/ionic-app-lib/lib/browser.js 問題の場所はこの11行目だとわかった。 cordova 5.0.xがインストールされていると「Browser.installCordovaCrosswalk(appDi

ionic(cordova)のカスタムプラグイン開発のワークフローを構築する

イメージ
カスタムプラグイン開発のワークフローが必要だ! ionic(cordova)のカスタムプラグインを開発するのはそれほど難しいことではない。しかし当然の事ながら、プラグインの開発は試行錯誤を重ねる必要がある。そのための円滑なワークフローを構築するのにかなり苦労したので、まとめておきたいと思う。 ここでは、ionic側からカスタムプラグインを叩いてネイティブのノーティフィケーションを表示するサンプルを作ろうと思う。とりあえずAndroid用を開発することにする。 ionicプロジェクトの作成 まず、ionicプロジェクトを作り、CordovaLib-debug.aarを作るため一度ビルドする。 AndroidStudioプロジェクトの作成 AndroidStudioで~/Documents/git/customplugin-androidに、パッケージ名ex.customplugin、Blank Activityを選択してプロジェクトを作る。 そして、このようなレイアウトを作る。 CordovaLib-debug.aarを組み込む。これはAndroidStudioでCordova関連クラスをimportするのに必要。 File>New>New module>Import .JAR or .ARR Packege>Next。 File Name: ~/Documents/git/customplugin/platforms/android/CordovaLib/build/outputs/aar/CordovaLib-debug.aar からのFinish。 左のツリーでGradle Scripts>build.gradle(Module app)を開き、dependency部にCordovaLib-debugの記述を追加。 ここでCordova関連クラスをimportできるようにするために一度ビルド。Build>Rebuild Project。 ノーティフィケーションアイコンの作成 適当なサイズのアイコン画像(512x512程度、アルファ付き、塗りは白、アイコン内のパディングは極力少なく)を用意する。 その画像をこちらにアップロードしてDownload Zip。 Android Ass

コンテンツのレーティング(IARC)が理由でアプリが不承認(リジェクト)される件 @ Google Play

イメージ
Google Playにて、コンテンツのレーティング(IARC)が理由でアプリが不承認(リジェクト)された!不承認を通知するメールにはこんな文言が… 不承認の理由: Google Play コンテンツ レーティング ポリシーへの違反。 提出したアプリの性質からして、どう考えてもリジェクトされる理由が分からなかった。こんなことは初めてだ。しかし、しばらくすると自動的に承認された(^^); 原因は、「IARC認定」(Certificate ID)が得られる前にアプリを提出したことだと分かった。 IARCのコンテンツレーティング認定アンケートなど、アプリの掲載情報を入力すると提出可能になる。 しかし、実際問題としてはアンケートに答えるだけではダメで、IARCからCertificate IDのメールが来て、Google Play Developer Consoleが次のような状態にならなければ承認されないようだ。 12:37に行ったアンケートにはIARC認定のCertificate IDが無い。15:35のはある。 焦ってググったが、この件についての記事が見つからなかったので書いておくことにした。 同様の状態にハマった方は、焦らず、しばらく待ちましょう(^^); Google Playには、Certificate IDが得られるまで提出ができないようなバリデーションを行っていただきたい。

脱jQueryするにはdocument.querySelector()もあるけど状況どう?

AngularJS内蔵のjqLiteを使うことにしたが、DOMElementを取得するのにdocument.getElementById()というのは使いにくい場合もある。 ところで、jQueryライクなものとしてdocument.querySelector()もあるけど、状況はどうなのか?と。 Can I use... Support tables for HTML5, CSS3, etc な〜んだ。全然大丈夫じゃん!なら、もはやjQueryも必須ではないし、getElementById()も要らないじゃん!と思ったが… document.querySelector - Web API インターフェイス | MDN 【訳注: 上記ではクラスセレクタを用いた検索を例示していますが、この様な単発のクラス名の場合は getElementsByClassName() メソッドを用いた方が高速な動作となります。また、ID セレクタ ( # ) を対象とする検索も可能ですが、その場合は getElementById() メソッドを用いた方が高速です。対象セレクタが流動的で有る場合や、または隣接セレクタなどによるコンビネーションセレクタでの複雑な検索の場合に於いて、querySelector() や querySelectorAll() は真価を発揮します。】 ということなので、要らないということは無いようだ。 つまり、複雑なクエリ条件の場合はquerySelector()、単純な場合はgetElementById()とかgetElementsByClassName()と使い分けをした方が良いと。

angular.element()のjQueryを読み込んだ場合とそうでない場合(jqLite)の動作の違い

できるだけページを軽量化するためにjQueryを読み込まないようにしようと思った。しかし、jQueryは便利なので捨てがたいなと思っていた。そんな時、angular.element()というメソッドがあることに気がついた。 AngularJS: API: angular.element AngularJSは内部でjqLiteというjQueryのサブセット版を持っていて、angular.element()はそれを使ってjQueryのオブジェクトを返してくれるらしい。 ただ実際に使ってみると、jQueryを読み込んだ場合とそうでない場合で動作が違うのでハマった。 jQueryを読み込んでいる場合はこのように#targetを取得できるが、そうでない場合、つまりjqLiteのみの場合は取得できない。 var $elm = angular.element('#target'); 要するにjQueryを読み込んでいる場合は次と等価だ。 var $elm = $('#target'); 一方、jqLiteのみの場合はこのようにする。 var elm = document.getElementById('target'); var $elm = angular.element(elm); Wraps a raw DOM element or HTML string as a jQuery element. というのはそういう意味だったのか!とやっと分かった(^^);

ionicプロジェクトのsplash.pngを自動でリサイズしながら9-patchする「make-9patched-splash-ionic」

先日、nodejsで9-patch画像を自動生成する方法について書いた。 琴線探査: nodejsで9-patch画像を自動生成する「FourSide1px9patcher」 その後、このコードを使いやすいようにnodeモジュール化した。 junkoro/four-sides-1px-9patcher ここからが本番。ionicプロジェクトでsplash.pngを自動的にリサイズしつつ9-patchするコードを書くときがキタ(・∀・)!! すでにnodeモジュール化して公開済み。 junkoro/make-9patched-splash-ionic インストール方法やコード内容についてはgithubに譲るとして、ここでは開発時に困ったことについて書いておきたいと思う。 9-patchについては開発済みだったので何の問題も無かったが、画像のリサイズが困った。node-canvasでもリサイズはできるのだが、リサイズ後の画像のクオリティーがとても使えたものではないのだ(´・ω・`) この問題はブラウザ上のJSでも同じで、以前に研究したことがあった。 琴線探査: HTML5 Canvasで画像のリサイズするならコレ!「JS-Image-Resizer」 というわけで、再びこの「JS-Image-Resizer」を使わせていただくことにした。結果は上々だ。 ただ、「JS-Image-Resizer」はブラウザ用のJSコードなので、node用に多少変更する必要があった。と言っても、「modules.exports」行の追加とエラーになる部分(WebWorker部)をコメントするくらいだったが。 これでこの件にコメントすることができるようになった。 Bad splashscreen ratio with Android using CLI new feature - ionic - Ionic この件は自分も困っていたが、他にも多くの人が困っているようなので、このコードが助けになればと思う。

nodejsで9-patch画像を自動生成する「FourSide1px9patcher」

イメージ
追記15.05.05 :使いやすいようにnodeモジュール化した。 junkoro/four-sides-1px-9patcher 9-patchツールの現状 〜 開発意図 前から9-patchを作るのは面倒だし問題だと思っていた。そこで改めて現状を調べてみたが、やはり9-patchを作るには ・Android SDKのdraw9patch ・Android Asset Studio - Simple Nine-patch Generator ・Eclipseプラグイン「 Draw 9-patch Tool 」 ・Fireworksなど汎用の画像編集ソフトを使う という感じ。nodejsで、特にgulpで9-patchを自動化できるツールが無いか探したが、これくらい。 gulp-9-patch このツールはスケーリングしたり非9-patch化する機能しかなく、画像を9-patch仕様に加工することはできない。 開発要件 やはり独自開発するしかないか…もう我慢ならん!こんな ('A`)マンドクセ-ことイチイチやってられるかっての! ただ、なぜこのような状況なのかは理解できる。9-patchは柔軟性が高く、画像によってパッチすべき場所は変わる。これが自動化ツールが存在しない理由なのだろう。 しかし、画像を作る側が9-patchしやすい条件を作ればどうだろう?たとえばこんな画像で、単純に4辺の周辺1ピクセルを画面にあわせて伸ばすように9-patchすることを考える。 画像はionicのデフォルトスプラッシュスクリーン用の画像 この条件を満たすケースは意外と多いのではないかと。自分的には自動化するためにデザインを犠牲にする覚悟である(^^); このようなことをしてくれるCLIツールを、後々ionicなどgulpやgruntをビルドシステムとして使っているようなものに組み込むことを考えて、nodejsで開発する。 nodejsでの画像処理をどうする? 〜 技術調査 調べると、みんなよくimagemagickとかを使ってやっているようだが、できればコマンドラインツールに依存するような形にしたくない。 というわけで、前から名前だけは知っていたけれど、よく調べたことがなかったこれを使ってみよう。

迫り来る電子の声と人形に宿った凄まじい情念 〜 映画「ボーカロイドオペラ葵上with文楽人形」@アミューあつぎ映画.comシネマ

イメージ
映画「 ボーカロイドオペラ葵上with文楽人形 」 を地元の映画館「 アミューあつぎ映画.comシネマ 」に見に行ってきた。 動機 一つの理由は、アミューあつぎ映画.comシネマの副支配人でおられる杉本穂高さんのこの記事を見たから。 「ボーカロイド™ オペラ 葵上 with 文楽人形」人ならざるものの魂の躍動 | 杉本穂高 もう一つの理由は、なぜか分からないけれど以前からアンドロイド的なものが気になっているから。 古くはbjörkの「all is full of love」。 近年では、冨田勲×初音ミク「イーハトーヴ交響曲」とか、オリエント工業のラブドール展とか、平田オリザ・石黒浩のアンドロイド演劇。 これらの作品には根源的に共通する何かがあるはずだと思うのだけど、いまだにそれが一体何なのか分からないので、今度こそハッキリさせよう!と。 「葵上」とは? まず、「葵上」とはどう読むのか?「あおいのうえ」と読むらしい。そしてその「葵上」とは一体何なのか?源氏物語をベースにした能の演目だそうだ。 葵上 - Wikipedia 第一印象 この映画は普通の映画ではない。演劇を撮った映画というか…しかし、決してドキュメンタリーでもないし…初めて見るタイプの映画なので、正直どう評価していいのか分からなかったが、とにかく、電子の声と人形が凄い念をもって迫ってきた!という感じだった。 単純ではないプロット パンフとサントラCDを買って帰ってきて、「あれは何だったんだろう…」と考えているうちに、源氏物語にも能にも文楽にも造詣が無いのと、約30分という短さもあって、全然話しについていけてなかった自分に気がついた。 要するに話はこうだ…と、まとめようとしたが、やっぱりこれは簡単にまとめられるような話じゃない。 そこで、表面的な「事実」だけ挙げていくとこうだ。 ボカロPのヒカル(光源氏)はボカロのミドリ(六条御息所・ろくじょうのみやすどころ)に曲を書いていた。その曲を聴き、あこがれて歌手になった生身のアオイ(葵上)はボカロPのパートナーとなった。その後のある日、生身の歌手が憑かれたようにあばれまくる! という感じ。 ボカロPが生身の歌手を得てボカロを捨ててしまったので、ボカロがジェラスして生身の歌手に

PCブラウザでネットワーク接続の有無を検知するには?

PCブラウザでネットワーク接続の有無を検知するにはどうしたらいいだろう? 一応「navigator.onLine」というAPIはある。 window.navigator.onLine - Web API インターフェイス | MDN ブラウザのサポート具合を調べてみると、全てのブラウザというわけにはいかないが、まあまあサポートされていることがわかる。 Can I use... Support tables for HTML5, CSS3, etc しかし、このAPIには色々と問題があることがすぐに分かった。 javascript - How to detect online/offline event cross-browser? - Stack Overflow … Chrome and Safari will detect when you go "offline" automatically - meaning that "online" events and properties will fire automatically when you unplug your network cable. Firefox (Mozilla), Opera, and IE take a different approach, and consider you "online" unless you explicitly pick "Offline Mode" in the browser - even if you don't have a working network connection. … 要するに、ChromeやSafariならネットワーク接続が切れた時点で自動的にオフラインイベントが来るが、FirefoxやOpera、IEはブラウザ側に「オフラインモード」という機能があるので、navigator.onLineの値は実際のネットワーク接続に有無ではなく「オフラインモードかどうか」の値になってしまう、という話。 つまり、全くもって役に立たない! ではどうするか? StackOverflowでも議論されているが、要するに「

「いずれ米国がこの人種差別主義を解決できると信じている」と他人事の黒人初の大統領

日経14.12.09夕 オバマ氏「人種差別根深い」黒人射殺不起訴 続く抗議デモ 心情に理解示す 【ワシントン=吉野直也】オバマ米大統領は8日放映の米テレビ番組のインタビューで「米社会で人種差別主義は根が深い」と表明… 2008年大統領選で「一つの米国」を掲げて黒人初の大統領になったオバマ氏はこれまで黒人側の立場を鮮明にするのを避けてきた… 「米国は過去50年間で公民権問題を前進させてきた。いずれ米国がこの人種差別主義を解決できると信じている」… 「オバマ氏が大統領になって人種間の対立が悪化した」と回答した人が53%と過半を超えた… 「米社会で人種差別主義は根が深い」?そんなことなら自分でも言える。 「一つの米国」を掲げて黒人初の大統領になったのに、米国民の53%はオバマ大統領になってから人種間の対立が悪化したと答えているそうだ。 「Yes, we can!」はどうした?鳩ちゃんの「Trust me」もしょーもなかったけど、「Yes, we can!」もしょーもないな。 しまいには、「いずれ米国がこの人種差別主義を解決できると信じている」だって。「いずれ」ね。どんだけ他人事なのか。 当初はすばらしい大統領が出てきたなーと思っていたけれど、すでに終わってるよ(´-`) しかし、この大統領の時代があと2年以上は続くわけでして。。。

米国は日本を最重要パートナーとして再認識し始めている

日経14.11.27朝 米国民「日本が最重要」 「アジアのパートナー」中国を逆転 外務省調査 外務省が米国民を対象に今夏実施した日本に関する世論調査で、「アジアで最も重要なパートナー」に日本をあげた「一般国民」が46%に上り、2年ぶりに中国(26%)を逆転して首位となった。 有識者を対象とした調査でも日本を選んだ人が58%と、中国の24%を大きく上回った。 一般国民と有識者でいずれも日本が首位になったのは5年ぶりだ。中国が東シナ海や南シナ海で挑発的な海洋進出を続けていることなどが影響したと見られる… 「日米両国がアジア太平洋の平和と安全のために緊密に協力すべきか」という質問には、一般国民の91%、有識者の97%が同調した。 日米安全保障条約は「維持すべきだ」と答えた一般国民が81%(昨年67%)、有識者は85%(同77%)… 日本国民として名誉なことだ。中国の本性が米国民にもバレてきているのだろう。 さらに、米国人のほとんどが日米がアジア太平洋の平和と安全のために協力すべきだと考えているということも確認できた。 ただ一方で、日米安全保障条約の維持に関しては「協力」のパーセンテージより10ポイントほど低くなっている。 つまり、「協力はすべきだが、米国が一方的に日本を守るということに抵抗がある」という人がそれくらいはいるということなのではないだろうか。

本当に悩ましい地下水バイパスといわき漁業の復興のバランス

イメージ
日経 14.11.12 いわき 遠い「大漁」 試験操業1年、残る出荷制限 安全性PRへ奮闘 …漁を自粛した福島県いわき市の漁業組合が昨年10月に試験操業を始めて1年余り。放射性物質の基準値を下回る魚種は増えているが、県漁連は約150の全魚種の安全性が確認されるまでは本格操業を再開しない方針だ… 今月9日、いわき市の小名浜港で、原発事故後初の地元漁協による「魚まつり」が開かれた…約1時間で完売… 「風評被害に苦しんでいると思うので、地元産を応援したい」… 「水揚げ量が少なく、とても商売になるレベルではない」… 「サブドレン」と呼ばれる井戸から、地下水をくみ上げ浄化後に海に流す… 「新たな風評被害を招きかねない」と反対意見が相次いだ… 震災1年後くらいの時期にいわきの漁港に行ったことがある。その時は本当に廃墟のようだった。それが束の間とはいえ、このように賑わっていることはとても喜ばしい。 日経記事より 福島第1原発近くの地下水は問題ないことを確認しつつ海に流すべきだと思う。そうしなければその分の水が原発に流れ込み、高濃度の汚染水となって海に流れ込むことになりかねないと思うから。 しかし、地元の漁師さんたちはこれに反対している。新たな風評被害を招きかねないとお考えだからだ。 この苦悩は過去の報道でも知っていたけれど、それでも流すほかないだろうと今でも考えている。万が一地下水が高濃度の汚染水になって海に流れ込むことになったら、より厳しい状況になり、本格操業はさらに遅れることになってしまうから。 さりとて漁師さんたちの気持ちもわかる。地下水を流すことにすると、風評被害が増えることは考えられても減ることは考えられないし、漁業者にとっての問題は何も解決しない。 ひとつの一時的な対処は「補償」という形の金なのだろうけれど、それだけで解決できる問題だろうか。生き甲斐とか張り合いとか、そういった人生に関わる問題も絡んでくるのではないだろうか。 本当に悩ましい。

「頑張る・努力する」は評価としてはゼロだし、当然のことだけど、簡単なことでもない

日経14.11.14朝 サッカー人として 三浦知良 全力でやるしかない …僕自身のことをいえば今季は4分間しか出場していない厳しさのなかにいる… 「出場できなくても毎日頑張りました」。これは自分を納得させる限りのもので、評価の上ではゼロだ。頑張る。努力する。それは当たり前のこと。ただし普通のことを普通に毎日やるのも、やっぱり難しい。「当たり前のこと」だけど簡単なことでもないんだ… サッカーに本当の"苦労"はないと思っている。全部プラスになることだから… サッカー様々ですよ。だったら、サッカーに失礼のないようにやっていくしかないです。全力で… 「頑張る・努力する」は当然のことで、評価としてはゼロだと。しかし、簡単なことでもない、と。 何も言うことはない。 ただ、それでも「サッカー様々ですよ。」というキングカズは、とても素敵な人だと思う。

ツイートボタンをリロードする(ページが読み込まれた後に動的に再作成する)には?

ツイートボタンはこのページで自由にカスタマイズして作成できる。 Twitter Buttons | About 作成したコードをページに埋め込むと、そのページをブラウザでロードしたときに表示されるのは知っての通り。 基本的にツイートするアドレスや内容などはページをロードする時に決まっている必要があるが、ページをロードした後でそれらを変更するにはどうしたらいいだろうか? ブログやホームページなどの静的なサイトで問題になることはあまりないだろうが、AngularJSなどで構築したシングルページアプリケーションでは大いに問題になり得る。 まず、ツイートボタンを表示するホルダーをこのように作成する。 <!-- ツイートボタンホルダー --> <div id="tweetButtonHolder"> </div> <!-- ツイートボタン作成サイト https://about.twitter.com/resources/buttons#tweet でコピーしたscriptタグ --> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> このscriptタグは window.twttr を生成する。このオブジェクトは様々なツイートボタンを作ることができる。 Scripting: Factory Functions | Twitter Developers なので、このtwttrオブジェクトを使ってツイートボタンホルダーの場所にツイートボタンを作

macでsmb(samba)共有サーバーに別名で接続(別アカウント名で接続)する方法

macでsmb(samba)共有サーバーに別のアカウント名で接続したくなった。 接続を解除してもパスワードを保存してしまったために自動的に再接続してしまい、別アカウント名で接続できなくなってしまった(´・ω・`) どうすれば別名で接続できるのか? Finder>移動>サーバーへ接続>サーバアドレス に下記のように入力する。 smb://アカウント名@ホスト名 ノリでやってみたら、たまたまできちゃった(・∀・) 知らなかったわ〜

AngularJSのコードをminify対応にするためのベストプラクティス

AngularJSはDependency Injectionをするので書き方によってはminifyした時にコードが破損してしまう場合がある。 例えばこのようなコードは破損する。 var app = angular.module('app', []); app.controller('AppCtrl', function ($scope, $location, $interval, $timeout) { } ベストプラクティスはこれ。(だと思う) var app = angular.module('app', []); app.controller('AppCtrl', ['$scope', '$location', '$interval', '$timeout', function ($scope, $location, $interval, $timeout) { } 面倒でもfunctionの引数の定義の通りをfunctionの前に記述する。 このことはAngularJS公式チュートリアルの「A Note on Minification」に書いてあった。 AngularJS: Tutorial: 5 - XHRs & Dependency Injection こちらにも同じ議論がある。 javascript - Angularjs minify best practice - Stack Overflow

キーボードの記号フォント「Keyboard-JP」(n-yujiさん作)をWEBサイトで使う方法

イメージ
先日、このような記事を見た。 keyboard-font·キーボードを表現した記号フォント MOONGIFT 元々はn-yujiさんの作品だ。 n-yuji/keyboard-font ボタンアイコンのツールチップなどでのキーボードショートの説明に使うのにちょうどいいなと思ってWEBサイトで使ってみようとしたが、正常に表示できるようになるまでに意外と苦労したのでログを残しておこうと思う。 まずは デモ(Keyboard-JP Web Example) 。こんな感じの表示になる。 苦労した最大のポイントは「リガチャー」の変換がうまくできなかったこと。 「リガチャー」というのは「合字」のことで、例えば上の例だと「POWER」とテキストで指定した場合に電源マークに変換されるようなことを言う。 最終的なフォント指定のCSSはこれ。ポイントは「font-feature-settings」と「text-rendering」プロパティー。 HTMLはこんな感じ。HTML内では左の列と右の列で同じ文字列を入れているが、ブラウザでの表示は異なることがポイント。 その他にどのような文字を使えるかは、n-yujiさんのオリジナルパッケージ内のPDFを見るとわかる。 ほとんどの文字はリガチャーによって変換されるが、一部の文字、例えばMacのコマンドキーマークは右に「U+2318」と記述されている。HTMLでこれを指定するには「&#x2318;」と指定する。 最後に、IEで表示するためにはWOFFファイルが必要だ。OTFファイルを下記のソフトでWOFFに変換する。 WOFFコンバータ - 武蔵ソフト 上のフォント指定のCSS(Keyboard-JP-Regular.css)にはすでにWOFFファイルの記述もしてあるのでIEでも動作を確認できる。 プロジェクト全体はここでダウンロードできる。 junkoro/Keyboard-JP_WebExample