mediba制作部 メディアクリエイティブグループ所属、フロントエンジニアの土方です。 Webページの制作および成果物の監修を担当しております。 jQueryでAjaxリクエストした際のレスポンスヘッダーについて、getAllResponseHeaders()で取得しようとした時、同一ドメインでは取得でき、クロスドメインの場合には取得できないヘッダーがあります。 今回、この件について紹介させていただきます。 ヘッダーの相違 仮に http://www.example.jp/index.html からAjaxリクエストするものとします。（※jQuery1.8以降の場合のコードです。） 同一ドメインの場合 リクエスト $.ajax({ type: 'HEAD', url: '', cache: false, }).done(function(data, status, xhr) { console.log(xhr.getAllResponseHeaders()); }).fail(function(data, status, xhr){ console.log('error!'); }); 結果 Date: Tue, 27 Oct 2015 05:53:29 GMT Last-Modified: Mon, 17 Jun 2013 10:28:48 GMT Server: Apache/2.2.29 ETag: "2744725-39-4df570fdaf800" Content-Type: text/html Connection: Keep-Alive Accept-Ranges: bytes Keep-Alive: timeout=5, max=19 Content-Length: 57 クロスドメインの場合 リクエスト $.ajax({ type: 'HEAD', url: 'http://api.example.jp/', cache: false, }).done(function(data, status, xhr) { console.log(xhr.getAllResponseHeaders()); }).fail(function(data, status, xhr){ console.log('error!'); }); 結果 Last-Modified: Mon, 26 Oct 2015 04:04:22 GMT Content-Type: text/html Cache-Control: max-age=86400 Expires: Wed, 28 Oct 2015 05:44:37 GMT DATE Server ETag Connection Accept-Ranges Keep-Alive Content-Length クロスドメインの場合には、上記ヘッダーを取得できていないことがわかります。 環境 下記環境について、取得できるヘッダーが制限されることを確認しました。 Xperia Z2 (Android4.4.2 標準ブラウザ) Xperia Z3 (Android5.0.2 標準ブラウザ) Infobar C01 (Android2.3.5 標準ブラウザ) Android版Chrome 46.0.2490.76 iPhone6 (iOS8.1.3 Safari) iPhone版Chrome 46.0.2490.73 Mac版GoogleChrome 46.0.2490.71 Mac版Safari 8.0.8(10600.8.9) Mac版Firefox 41.0.2 記事投稿時点（2015年11月6日）において、事実上全ての環境と考えて差し支えないでしょう。 Ajaxリクエストし、レスポンスヘッダーを取得する場合にはクロスドメインであるかどうかを意識する必要があります。 備考 Javascriptでレスポンスヘッダーを取得する場合とは？ 例えばこんな理由が考えられます。 閲覧日時によって表示やアニメーションなどの効果を切り替える 掲示板などで投稿からの経過時間を計算する などの用途で、Javascriptで時刻を取り扱いたいことがあります。 Javascriptはクライアント側で動作するので new Date(); とするとクライアントに設定されている時刻を取得するため、 クライアントの時刻が狂っている 場合には狂った時刻を取得してしまいます。 サーバー時刻であればクライアントの時刻設定に依らないため、これを取得することで正確に近い時刻を使用することができるわけです。 NTPサーバーが提供しているjson（Ex. NICTのjson ）から時刻を取得できれば話が早いのですが、一般に公開されているNTPサーバーは負荷に耐えられる保証はありませんし、なにより商業利用はできません。 また予算や工期の都合で、自前でNTPサーバーを用意することが困難な場合があります。 NTPサーバーが使えないのであれば、レスポンスヘッダーからDATEヘッダーを取得すればサーバー時刻を使用できる ということになります。 このような場合、クロスドメインなサーバーへAjaxリクエストしてもgetAllResponseHeaders()でDATEヘッダーの値を取得することは出来ません。 同一ドメインなサーバーへアクセスして取得する必要があります。 ソースコードについて （※）古いVer.では下記。 $.ajax({ type: 'HEAD', url: '', cache: false, success: function (data, status, xhr) { console.log(xhr.getAllResponseHeaders()); }, error: function(data, status, xhr){ console.log('error!'); }, });

まえがき mediba メディアシステム開発部 ポイント開発Gの佐藤禎章と申します。スマートフォン向けのネイティブアプリを構築/運用しています。 今回のエントリでは Apache Cordova の上で Vue.js を利用して Amazon AWS の機能を呼び出してみます。 利用するプロダクトの紹介 Apache Cordova http://cordova.apache.org/ もともと Adobe のプロダクトで、 PhoneGap と言われていました。 Apache に寄贈されて名前が変わりました。 アプリの構築を HTML + CSS + JavaScript で実現してしまおう、というぶっ飛んだ発想ですが、[アプリの中にブラウザを含めてしまい、その中で HTML / JavaScript / CSS を動かす]という手法で実現しています。なので、ブラウザで出来ることは大概、出来ます。 また、マルチプラットフォーム対応も特徴で、 iOS / Android / WindowsPhone / Firefox OS / Blackberry などなど、様々なプラットフォーム向けにネイティブアプリとしてビルドできます。 ネイティブアプリ特有の機能(カメラやGPSなど)については、プラットフォームごとにプラグインという形で実装することで、その差異を吸収しています。 ガチガチのゲームであったりスマートフォンの細かい機能を操作したりするような用途には向きませんが、カバーできる範囲は想像以上に広いです。 Vue.js http://jp.vuejs.org/ JavaScript の MVVM フレームワークです。つい先日、 1.0 がリリースされました。 MVVM とは Model - View - ViewModel という考え方で、 Model はデータそのもの、 View は見た目の定義。 ViewModel のところが、 Model と View の双方を結びつけて管理してくれる、みたいな仕組みです。 Model ←→ ViewModel ←→ View View の側で状態が変わってもちゃんと Model に反映してくれるし、 Model の側で状態が変わっても View の側にちゃんと反映してくれるので、動きを見てて面白いです。 今回、見た目の定義と非同期でのデータ更新に利用します。 AWS SDK https://aws.amazon.com/jp/sdk-for-browser/ みんな大好き Amazon AWS のサービスをプログラム言語から弄るためのキットです。 今回は AWS SDK for JavaScript を使用し、 Cognito と S3 を利用します。 本来ブラウザから動かすものですが、 Cordova でもちゃんと動くのかどうか。 準備 npm が実行できる環境を用意して下さい。 Mac であれば brew install node で npm の環境もまとめて導入できます。 Cordovaのインストール 下記のようにして、 npm から cordova をインストールして下さい。 $ npm install -g cordova これで cordova コマンドツールが利用可能になります。 このコマンドツールを利用して、アプリケーションの骨格作成からビルドまで行います。 アプリのスケルトン作成 まず、ベースを作ります。パッケージ名などもこの時に指定します。 $ cordova create cordovatest jp.mediba.ysato.cordovatest CordovaTest cordova create [ディレクトリ名] [パッケージ名] [アプリケーション名] という指定の仕方です。 指定したディレクトリの下に、こんな感じでファイルが生成されます。 続いて、プラットフォームを追加します。 ここで追加したプラットフォーム分、アプリケーションがビルドされることになります。 $ cordova platform add ios $ cordova platform add android 追加できるプラットフォームについては、下記を参照下さい。 Firefox OS とか Blackberry とかも対象に出来ます。 https://cordova.apache.org/docs/en/4.0.0/guide/support/index.html アプリを実行 実行する時は、コマンドラインから下記のようにします。 $ cordova run cordova run だけで引数を指定しないと、有効になっている全てのプラットフォームにて動かそうとしてくれます。先の例であれば、 Android と iOS ですね。 $ cordova run android などと指定すれば、そのプラットフォームの分だけ、ビルド/実行してくれます。 cordova create しただけの状態でターゲットを iOS として run すると、こんなサンプルが動きます。 ようこそ、 Cordova の世界へ。 JS外部ライブラリをCordovaで使う では早速、アプリを作ってみましょう。 但し AWS 関連についてはちょっと置いておいて、ここでは[誕生日を指定したら、今日から30日後までのバイオリズムをグラフで出力する]というアプリを作ってみます。 グラフ出力には ccchart を使用します。データをJSONで羅列するだけで美麗なグラフを描いてくれる、便利なライブラリです。 コード <script src="./js/vue.min.js"></script><ul id="biorythm"><li>誕生日: <input type="date"></li> <li>身体: {{physical}}</li> <li>感情: {{sensitive}}</li> <li>知性: {{intel}}</li> </ul><canvas id="biograph"></canvas><script src="./js/biorythm.js"></script> // 誕生日設定フォーム部分と更新処理 var biorythm = new Vue({ el: '#biorythm', lazy: true, data: { birthday: '1976-03-30', physical: 0, sensitive: 0, intel: 0, }, methods: { // 今日のバイオリズムデータで更新 // 引数 : 誕生日 update: function(){ birthday = biorythm.birthday; var bio_today = new Bio(birthday,new Date()); biorythm.physical = bio_today.physical; biorythm.sensitive = bio_today.sensitive; biorythm.intel = bio_today.intel; update_chart(birthday); } } }) // DOM変更を検知 biorythm.$watch('birthday', function(value, mutation){ biorythm.update(); }); // ccchart のグラフ定義 // data: に描画する要素を配列で指定する // ccchart.init(キャンバスID, 定義データ) で実際にグラフを描画する var chartdata6 = { "config": { "width": 320, "height": 240, "xScaleFont": "100 6px 'Arial'", "yScaleFont": "100 6px 'Arial'", "hanreiFont": "100 6px 'Arial'", "colorSet": ["#F00","#0F0","#00F"], }, "data": [[],[],[],[]] }; // ccchart グラフデータ(今日から30日後まで)の更新 // 引数 : 誕生日 function update_chart(birthday){ chartdata6.data[0].length=0; chartdata6.data[0].push("日"); chartdata6.data[1].length=0; chartdata6.data[1].push("身体"); chartdata6.data[2].length=0; chartdata6.data[2].push("感情"); chartdata6.data[3].length=0; chartdata6.data[3].push("知性"); for(var i=0;i<30;i++){ var today = new Date(); var dateChart = new Date(today.getTime() + i * 1000*60*60*24) ; var dateChartBio = new Bio(birthday,dateChart.getTime()); chartdata6.data[0].push(dateChart.getDate()); chartdata6.data[1].push(dateChartBio.physical); chartdata6.data[2].push(dateChartBio.sensitive); chartdata6.data[3].push(dateChartBio.intel); } ccchart.init('biograph', chartdata6); } // バイオリズム計算 // 引数 : 誕生日 , 基準日 function Bio(birthday,basedate){ dateDiff = (new Date(basedate) - new Date(birthday)) / 1000/60/60/24; dateDiff = Math.floor(dateDiff); var bioNumer = 2 * Math.PI * dateDiff; this.physical = Math.round( Math.sin( bioNumer / 23 ) * 10000) / 10000; this.sensitive = Math.round( Math.sin( bioNumer / 28 ) * 10000) / 10000; this.intel = Math.round( Math.sin( bioNumer / 33 ) * 10000) / 10000; } // 更新処理を一回走らせてグラフを書かせる biorythm.update(); 結果 DOM 操作やイベントハンドリングまでやる Vue.js や、 Canvas 描画ゴリゴリやる ccchart も、 Cordova の中で問題なく動きました。本当に何の問題も起きなかったので、逆に驚きました。 全く同じファイルを Google Chrome などで表示しても、やっぱりちゃんと実行できます。凄いものですねえ…. Vue.js について 今回 Vue.js には、下記の役割を担ってもらいました。 誕生日を指定するフォームの値を監視し、変更されるたびにイベントを発行する 第一引数に監視する要素、第二引数がコールバックになるので無名関数で処理を書く、みたいな使いかたになります。 vm.$watch('datakey', function(value, mutation){ // codes }); vm という Vue オブジェクトにおいて vm.$watch で datakey を監視させます。 変更が発生すると、 value に値が入り、 mutation には変更に関する情報(method, args, result, inserted, removed)が入ります。 今回は Vue.js の中に書いたメソッドを呼び、更新処理を走らせています。 誕生日の変更によって再計算される[身体][精神][知性]のバイオリズム値を画面に反映する <div id="vm">{{parts}} <script type="text/javascript"> var vm = new Vue({ data: { parts: 0, } } </script> こんな風に定義してあげると、Vue.js が HTML 側の {{parts}} と JavaScript 側の vm.parts を結びつけてくれます。 こうすると、 JavaScript側で vm.parts = 1 などとして値を変更した時に、 HTML 側を自動で書き換えてくれるわけです。 フォームに関してはちょっと特殊で、 <input> などと v-model というディレクティブを使用する必要があります。 ccchart について 解説するような所はあんまりないのですが、 ccchart でグラフを書くためにすることは、ざっくりと下記になります。簡単。 HTML 内にグラフを描画する canvas を用意する グラフの内容とデータを定義した JSON を用意する 描画処理を呼び出す http://ccchart.com/ にはグラフの種類や実際の書き方などについて、サンプルコードと実行例が豊富に並んでいます。 株価情報みたいなチャートを出したりリアルタイムに情報ソースをポーリングしたりと様々なことが出来ますので、まずはサイトの方を覗いてみてください。 AWS SDK for JavaScriptを使う 事前の注意 iOSに限った話なのですが、 ATS(Application Transport Security) という機能がiOS に加わり、その副作用として http アクセスが全部 https に差し替えられるため、 AWS の API アクセスも全て https に差し替わる *.amazonaws.com の証明書がSHA-1なので、セキュリティレベル低いとアクセスをブロックされる という事象が発生します。結果、 iOS 上の Cordova から AWS SDK for JavaScript を使用出来ない状態になります。 https://mobile.awsblog.com/post/Tx2QM69ZE6BGTYX/Preparing-Your-Apps-for-iOS-9 http://dev.classmethod.jp/smartphone/iphone/ios-9-intro-ats/ 回避方法は、 Cordova が生成した iOS 向けビルド用のソース一式の中にある、 info.plist を編集し、当該ドメインのATSを無効にすること。 但し、 Apple が用意したセキュリティの仕組みを迂回する、セキュリティレベルを下げることになるため、よく理解した上で使用して下さい。 NSAppTransportSecurity NSExceptionDomains amazonaws.com NSThirdPartyExceptionMinimumTLSVersion TLSv1.0 NSThirdPartyExceptionRequiresForwardSecrecy NSIncludesSubdomains 前準備 Cordova から外部のリソースにアクセスする際は、 Content-Security-Policy にてアクセス先の指定を行う必要があります。ホワイトリスト形式ですね。 Cordova が生成してくれた HTML には基本的なポリシが既に記載されていますが、外部サーバのリソースなどを利用したい場合は、随時許可を書いてあげる必要があります。 Amazon AWS へのアクセスを許可する場合は、下記のようになります。 <meta content="connect-src https://*.amazonaws.com/"> JQuery などをCDNから読み込むようにする、外部のデータをリソースとして使用する、等の場合にも、 Content-Security-Policy は通るようにしておいてあげないといけません。 Content-Security-Policy の詳細については、下記サイトを参照下さい。 http://content-security-policy.com/ コード <div id="s3list_vue"> <ul><li> </ul></div> <script src="./js/awssample.js"></script> var loginCognito = function(){ AWS.config.region = 'us-east-1'; AWS.config.credentials = new AWS.CognitoIdentityCredentials({ IdentityPoolId: 'us-east-1:xxxx' }); } var getS3Buckets = function(){ var filelist = []; var s3bucketname = 'BUCKETNAME'; var s3 = new AWS.S3({region: 'ap-northeast-1', maxRetries: 15}); s3.listObjects({Bucket: s3bucketname}, function(error, data) { if (error) { console.log("S3 Error : " + error); } else { var targetNode = document.getElementById('s3list'); for(var i = 0 ; i < data.Contents.length ; i++){ var params = {Bucket: s3bucketname, Key: data.Contents[i].Key}; s3list_vue.s3list_vue_parts.push({ url: s3.getSignedUrl('getObject', params) , filename: data.Contents[i].Key , }); } } }); } var s3list_vue = new Vue({ el: '#s3list_vue', template: '{{filename}}', replace: true, data: { s3list_vue_parts: [], }, methods: { onClick: function (getter) { var ref = cordova.InAppBrowser.open(getter, '_blank', 'location=yes'); } } }) loginCognito(); getS3Buckets(); 結果 S3の方に、こんなふうにファイルを設置しておきます。 S3 バケットリスト 画像を InAppBrowser で表示 解説 AWS周り 見ての通りですが、 loginCognito() で AWS の Cognito にログインしています。何のためかというと、S3へアクセスするための Credential を取得するためです。 Cognito 自体の解説については本家の https://aws.amazon.com/jp/cognito/ などから手繰れますが、 Cognito 認証の結果に応じて様々なロールを割り付けられるため、 AWS の各種コンポーネントへのアクセス許可を出すときに便利です。 コレが無かった頃は AccessToken / SecretToken の対で制御してましたね。 で、取得した Credential を使用して、 getS3Buckets() で S3 バケットの中身を取得、表示しています。 listObjects() のコールバックで結果を取得して、 Vue で定義しているモデルに一つ一つ push するだけ。 表示の更新は Vue に任せています。双方向バインディングばんざい。 InAppBrowser また、ファイル名をタップした時に開いているのは、 InAppBrowser という、 Cordova が用意したアプリ内ブラウザです。 Cordova の中でも開けるのですが、先に説明した Content-Security-Policy の制限を受けますので、そういう制限を無くしたい場合は InAppBrowser を使うことが多いようです。 Vue の v-on ディレクティブでタップ時に onClick() メソッドを呼ぶよう定義し、その中で cordova.InAppBrowser.open() にて InAppBrowser を呼び出しています。 open() の第二引数によって、下記のように挙動が変わります。 _self - URL がホワイトリストにある場合は Cordova の WebView で、そうでなければ InAppBrowser で開く (デフォルト) _blank - 常に InAppBrowser で開く _system - 常にシステムの Web ブラウザで開く まとめ スマートフォンでのクロスプラットフォーム開発を検討する際に必ず目にする Cordova ですが、「えー、 JavaScript で制御するとか凄い面倒そう、 JQuery とか DOM とか分かってないとダメなんでしょー」と、食わず嫌いをしておりました。 でも実際にやってみると、 Vue.js というフレームワークの強力さも相まって、すごく簡単にやりたい事を書けるようになってきていることを知りました。食わず嫌いよくない。 もちろんネイティブに比べたら出来ることは限られますが、それでも[一回書いたらどっちでも動く]事を考えると、案件次第では採用するメリットは相当ありそうだぞ、と思っています。 みなさんも、選定の選択肢に1つ、 Cordova 、如何でしょう？

はじめまして。mediba インフラストラクチャー部所属の沼沢と申します。 2015/10/06 〜 2015/10/09 に行われた AWS 最大のグローバルカンファレンス、 re:Invent 2015 に参加してきました。 そこで発表された新サービスや、新機能の紹介をしつつ、弊社でどう活用できるか、どのようなことが期待できるかなどを綴りたいと思います。 公式やブログなど、色んな所で既に紹介されているので今更感ありますが、お付き合いいただければと思います。 Day1 Amazon QuickSight クラウドベースの BI ツールということで新たに登場しました。 データソースを指定するだけで、データの可視化が可能になります。 AWS の BI 対応は以前から噂されていましたが、満を持して登場したというところでしょうか。 多彩なデータソースアクセス Redshift や RDS はもちろん、Kinesis など AWS の各サービスに対応 その他、コネクター経由でサードパーティも指定可能 データを直感的に可視化 SPICE という高速なAWS独自エンジンを採用 S uper-fast, P arallel, I n-memory C alculation E ngine SSD の3倍 の速度性能 フルマネージドで管理不要、スケールも自動 簡単に、低コストでの利用 サードパーティの BI ツールとの連携も可能 Tableau など RDS for Amazon Aurora が東京リージョンで利用可能に これは多くのユーザが待ち望んでいたのではないでしょうか。 基調講演の中では特に語られませんでしたが、今回のイベントに合わせてローンチされたようです。 東京リージョンに来たら移行しようと考えていた方々は、要チェックです。 パフォーマンスは最大で MySQL の5倍の性能で、MySQL 5.6 との完全互換があり、ダウンタイム無しでの移行が可能です。 また、容量は自動で拡張するため、空き容量を監視する必要がありません。 ★ mediba 的観点 AWS で商用稼働しているサービスの中には、RDS for MySQL を利用しているサービスがあります。 昨年の re:Invent で Aurora が発表されてから、RDS for MySQL で稼働しているシステムは Aurora へ移行したいと考えていたため、東京リージョンのローンチは心待ちにしていました。 例えば、弊社が AWS 上に構築/運用しているサービスの中に、RDS for MySQL を利用しているサービスがあり、そのサービス内のとある機能で、結構ハードにレプリカを参照する部分があります。 その機能に関連した訴求のために Push 配信を行うことがあり、その際には参照先のレプリカが高負荷になりがちなため、少し控えめに Push 配信をしているという現状があります。 RDS for MySQL ではレプリカを5個までしか配置できませんが、Aurora では 15 個のレプリカを配置することができるため、Aurora に移行することで、単純に参照性能の向上が見込まれるため、訴求の強化も期待できます。 上記のように、弊社で構築/運用しているサービスにおいて、Aurora へ移行することで改善が見込まれるケースが多々あると考えています。 ただし、Aurora に移行するにはいくつかの注意点があります。 Aurora では InnoDB のみがサポートされているため、MySQL 上で MyISAM を使用している場合は事前に InnoDB に変換する必要がある 現時点で Aurora で選択できるインスタンスファミリーは r3（メモリ最適化）のみで、タイプは large からとなっており、MySQL の同タイプと比べると若干お高いので、コスト面も注意が必要 Aurora を利用するということは、AWSにロックインされるので、そこに関しての考慮も必要 etc.. 今後、導入が実現した際には、ブログで書けたらと思います。 RDS for MariaDB RDS の DB エンジンの選択肢がまた1つ増えました。 今まで MariaDB が無いから移行を決断できなかったアプリケーションやサービスなど、RDS の MariaDB 対応によって、移行を進める企業は多いのではないでしょうか。 AWS Database Migration Service 主に、オンプレミスの DB を AWS に移行することを想定して作られたサービスです。 移行後も同期をとり続けることが可能とのことなので、移行元の DB を運用したまま徐々に切り替えるなどの方法で、ダウンタイムを最小限に移行することが可能だと思われます。 同一の DB エンジン間(MySQL → MySQL等)はもちろん、 AWS Schema Conversion Tool を利用することで、異なるDBエンジンへの移行も実行可能。 AWS Schema Conversion Tool では、DB スキーマやストアドプロシージャ等の移行の手助けをしてくれるそうです。 ★ mediba 的観点 弊社では、オンプレミスで稼働しているサービスもいくつか存在し、それらをクラウドに移行するかどうかはまだ検討段階です。 今後、オンプレミスで稼働中のサーバ群が EOSL を迎えるタイミング等で、AWS への移行が行われることになった場合には、稼働中の DB の移行をする時に非常に手助けになるのではないかと思います。 特に Aurora への移行という要件は少なからずありそうなので、その場合は非常に有用なサービスになります。 Amazon Kinesis Firehose Kinesis Stream に渡したストリーミングデータを、S3, Redshift に直接ロードするためのサービス。 Kinesis に渡したストリーミングデータは、そのデータを操作するワーカーが必要ですが、「S3／Redshiftにロードする」という単純な処理について、ワーカーを用意する必要がなくなったというイメージでしょうか。 これに伴い、従来の「Amazon Kinesis」は「 Amazon Kinesis Stream 」に名称が変更になりました。 ★ mediba 的観点 特に大量のデータが流れる広告事業のサービスにて有用なサービスだと考えられます。 例えば、ユーザの行動履歴のトラッキングをする場合に、トラッキングリクエストの受け口に利用することで、サーバーレスで大量のトラッキングリクエストを受けることができ、更にはコーディングレスで S3 or Redshift にダイレクトで保存が可能になるため、構築/運用の手間が減少し、更にビジネスロジックへ集中することができる＝広告商品をより良いものへ昇華させることが期待できます。 Amazon Import/Export Snowball 物理の箱に大容量のデータを格納し、物理的にAWSのDCへの移行を実現するサービス。 “超BigData(数百PB)の移行をより簡単により早くするには？"を考えた結果、作成されたとのことです。 ※画像は Amazon Web Services ブログ より引用 1つあたり50TB 複数台同時利用でPBクラスのデータをおよそ1週間で転送可能 暗号化、改ざんを防止をして安全にデータを出荷し、出荷状況などのステータスを監視でき、非常にセキュアである 従来の1/5のコスト データ変換も自動的にできる（レガシーからオブジェクトなど） 東京リージョンは現時点で予定なし（必要だという声が多ければ実現するかも） AWS WAF 言わずと知れた、WAF（Web Application Firewall）が AWS で登場。 これによって、EC2 に登録しているアプリケーションをより堅牢にガードすることができます。 従量課金制で、お支払いは使った分だけです。 AWS Config Rules 昨年の re:Invent で、AWS の構成（リソース）を管理するサービスとして AWS Config が発表され、構成変更の履歴の管理などができるようになりました。 その AWS Config の新たな機能として発表されたのが、 AWS Config Rules です。 この機能では、AWS の構成変更について、ルールを策定することで、そのルールに沿った構成変更に限定することができます。 例えば EC2インスタンスに適切にタグが付与されていること EIPがアタッチされていること などをルールとすることで、構成変更の抜け漏れを防ぐと同時に、余計な設定をすることを防ぐことにも役立てることができるでしょう。 ★ mediba 的観点 現在、AWS で商用稼働しているサービスは多々ありますが、それらの構成変更には制限がありません。いくらルールを策定しても、権限を持っている IAM ユーザであれば、悪意の有無に関わらず、意図しない構成に変更ができてしまいます。 どう構成を組んだら良いか・おかしな構成になっていないかなどを、システム的に制御できるようになると、より一層、安定して安心な運用が可能になります。 Config Rules の利用で、安心・安全な運用の手助けになることを期待しています。 AWS Inspector 自動化されたセキュリティ診断サービスです。 一般的な脆弱性はもちろん、ネットワークやOS、アプリケーションレベルにおいても、それぞれの観点のセキュリティベストプラクティスをもとに、診断を実施してくれるサービスだそうです。 また、APIを利用することで、開発プロセスに組み込んで自動化することも可能です。 Day2 Amazon API Gateway が東京リージョンで利用可能に こちらも Aurora と同様、基調講演の中では特に語られませんでしたが、今回のイベントに合わせてローンチされました。 これで、東京リージョンでの API 構築が格段に楽なものになります。 ★ mediba 的観点 現在オンプレミスで稼働しているものの中には、アプリ向けに API を提供しているサービスがあります。 オンプレミスではサーバーをスケールするのは容易ではありませんが、API リクエストの受け口として API Gateway を挟み、スロットル機能を活用することで、オンプレミス側の API サーバのバーストを防止でき、安定した API 運用が実現できそうです。 Amazon Kinesis Analytics Kinesis Streams に格納されたストリーミングデータを SQL を利用して簡単に分析することができる、いわゆるストリーミング SQL データベースのサービスです。 EC2 の新インスタンスが追加に x1 インスタンスファミリー 最大 2TB のメモリ、100以上のvCPU t2.nano インスタンス 512MB のメモリ、1vCPU 他の t2 シリーズと同様、バースト機能あり Amazon EC2 Container Registry (Amazon ECR) Docker のコンテナイメージを管理するレジストリのフルマネージドなサービスです。 これにより、高可用性を備えたフルマネージドな Docker レジストリの利用が可能になります。 AWS Lambda の各種アップデート Python 2.7が利用可能に バージョニングとエイリアス機能の追加 VPC Support（まもなく利用可能に） VPC内のリソースへ、インターネットを経由せずにアクセス可能に タイムアウト時間の延長 60 秒 → 300 秒に延長 スケジュール実行が可能に cron 形式で指定 最短のインターバルは5分 Mobile Hub Cognito, SNS, MobileAnalytics, S3, CloudFront など、AWS のモバイル関連サービスにおける実装について、ウィザード形式で選択していくことでベースとなるコードを生成してくれるサービスです。 AWS IoT IoT（Internet of Things）の分野において、センサーなどのデータを収集、処理、分析、結果に応じたアクションを実行するためのサービスです。 以下のような機能群で構成されています。 Device Gateway MQTT, HTTPを用いてセキュアに通信するためのサービス Rules デバイスからのメッセージをルールに基づいて様々なアプリケーションに引き渡すためのサービス Shadow デバイスに対してもコミュニケーションを容易にするためのサービス デバイスが電源Offや故障、オフラインになってしまった場合などに、復旧までデータを蓄積/保持し、復旧したら最新情報を送ることができる Device SDK AWS IoTのための各種SDK（C, JavaScript, Arduino）も同時にリリース まとめ 上記以外にも細々した発表がありましたが、主要なものをご紹介しました。 現時点では、弊社では活用方法のイメージが湧かないものもありましたが、今回発表されたサービスは今後さらに機能追加やブラッシュアップが行われ、非常に強力なものになっていくことでしょう。 今後も AWS から目が離せません。

CTOの山田です。 毎度管理画面に運用向けの集計画面を作るの面倒だなと思って、少し前にre:dashを導入しましたのでご紹介致します。 re:dashとは データベースを可視化するためのpython製オープンソース。データソースはMySQL、PostgreSQLからGoogle BigQuery、Redshiftまで幅広くサポート。githubは こちら Redshiftの パートナー としてオープンソースで唯一(私が見た限りでは)認定されています。 環境構築 AWS上に構築されるのであればAMIが用意されています。 東京リージョンのAMIはap-northeast-1: ami-fae373fa です。 データソースの追加 データソースの追加はサーバで行います。OSはubuntuのためログインユーザはubuntuになります。 ssh ubuntu@ manage.pyでデータソースを追加していきます。mysqlでの例です。 cd /opt/redash/current sudo -u redash bin/run ./manage.py ds new -n <data> -t mysql -o '{"user" : "user name", "passwd" : "password", "host" : "host name", "db" : "db name"}' redshiftはもちろんPostgreSQLで行います。 sudo -u redash bin/run ./manage.py ds new -n redshift -t pg 登録はlistコマンドで確認できます。 sudo -u redash bin/run ./manage.py ds list -------------------- Id: 1 Name: rds Type: mysql Options: {"user" : "mediba", "passwd" : "xxxxxx", "host" : "xxxx.mediba.jp", "db" : "mediba"} -------------------- Queryの追加 今回は開発環境のデータを使って実施しました。 機能はシンプルなので直感的で使いやすいです。 re:dashにログイン  メニューのQueries>New QueryからQuery作成画面を開きます Query作成画面 右カラムにはテーブル一覧が表示されています テキストエリアにSQLを記述 “Execute"でSQLを実行 実行結果が下部に表示されます 結果をグラフで表示させたい場合は「New Visualization」から新規登録します グラフは「Visualization Type」から選択でき、緯度経度があればmapも使えそうです 　今回は棒グラフを作成しました 登録したQueryを定期実行させる Refresh Scheduleから実行タイミングを登録します 定期間隔での実行か時間帯指定での実行か選択出来ます ダッシュボードの作成 メニューの「New DashBoard」からダッシュボードの作成画面を開きます タイトル横の+ボタンから「Add Widget」を開き、登録済みQueryを選択します 運用的にはカテゴリ毎にダッシュボードを作り整理するのがいいでしょう。 こんな感じになります。 まとめ サービス運用でデータを集計してグラフィカルに見たい要望が結構あると思いますが、re:dashを活用すれば開発工数を掛けずに実現できます。 queryで登録したデータはCSVとしても吐き出せます。

はじめに はじめまして、medibaのauスマートパス開発部　松本です。 私たちのグループでは、その名前の通り、auスマートパス向けのサービスを中心に開発を行っており、一部自社サービスの開発なども行っています。 これらのサービス群で使われている技術などについては、おいおい紹介していければと思っています。 現在ではWebとアプリを連動させた企画や訴求が非常に多く、新しいサービスの企画時にも、Webとアプリを最初から用意することが当たり前のようになっています。 弊社では現在、アプリ開発を行っていますが、実は昔、こんな名前でアプリをリリースしたりもしていました。 様々な事情により、１年ほどで中止されてしまった幻のプロジェクトです。 Eclipse3.5からAndroidStudioへ移行 社内でのアプリ開発の需要の高まりもあり、数年ぶりに昔のソースを引っ張りだして、最新の環境で動くようにしてみました。 EclipseのADTにて作成したプロジェクトを、AndroidStudioへ移植を行います。 AndroidStudioのメニューよりファイル→New→ImportProjectを選択、オプションとしてGradle-styleを選択しました。 これだけで、~/AndroidStudioProjects 配下のフォルダに、AndroidStudio用のプロジェクトが出来上がり、Gradle 関連のファイルも自動生成してくれます。 app/build.gradleを編集し、sdkのバージョンを当時のものへ近づけました。 defaultConfig { applicationId "jp.mediba.********" minSdkVersion 4 targetSdkVersion 4 } かなり古いですね。ライブラリなどはインポートされませんでしたので、以下のようにlibsフォルダを作成、配置しました。 左ペインのツリー表示部分を「プロジェクト」に合わせ（こうしないと新規→ディレクトリがでてきません）、app配下にlibsフォルダを作成すれば、後は直接ドラッグ＆ドロップでjarファイルを配置できます。 配置後、プロジェクトペイン上のjarファイルを右クリックし「Add as Library」を選択することで、AndroidStudio側で自動でbuild.gradleファイルに dependencies { compile files('libs/******.jar') compile files('libs/******.jar') } のように記述してくれます。 これで、ビルドが通るようになりました。 AVD Managerから、テスト用デバイスを作成、ターゲットOSを設定し、そのままでは解像度の問題があるためscaleを2dp on device = 1pc onscreenに変更します。 そして起動。無事エミュレータ上でアプリが起動しました。 ５年も前のプロジェクトの移行がこんなに簡単に終わるとは思いませんでした。 Logクラスの活用 いちいちデバッガを起動するまでもない、簡単な動作チェックなどを実施するときは、もっぱらLogクラスで済ませてしまいます。 import android.util.Log; Log.d(“ラベル名:”, it.getStringExtra(“変数名”)); デバッグ用として後から書くのではなく、コーディングの流れの中で書いてしまうと手間が省けます。 記述も簡単ですし、AndroidStudioのlogcatで/dや/vのようにフィルタしておけば、以下のようにまとめて視認するのも楽です。 分岐確認用の文字列まで仕込むようになると、本末転倒になってしまいますが、非常にお手軽なのでおすすめです。

はじめに mediba制作部 メディアクリエイティブグループの今野です。 初回投稿なので、カンタンにグループ紹介からさせていただきます。 当グループは20名強のメンバーがいて、サービスごとにチーム編成されており、デザインとフロントエンドを担当しております。 普段の業務で培ったノウハウや、また、業務以外で、UI/UX、Webの最新技術も研究などもしているので、今後そのネタも記事にしていく予定です。お楽しみに！ 次から本題です。 backdrop-filterとは 先日iOS9.0がリリースされました。 iOS9.0では、様々な機能がブラウザに実装されたのですが、追加機能のうちの backdrop-filter プロパティをさっそく試してみました。 backdrop-filter は、背景に filter が使えるようにするプロパティです。 filter は、色相・明度・彩度や、ぼかし、セピアなどPhotoshopでよく使う機能があります。 例えば、以下画像のように、ぼかしである blur() をうまく使えば、すりガラスのような見た目もカンタンに実装できます。 （今までは、通常とぼかした画像を二重にして擬似的に表現しなければならなかったため、ちょっと面倒でした） 実装方法 実装方法はカンタンで、上に被せてるボックスに backdrop-filter を追加するだけ。 以下は、例です。 background-color: rgba(31, 20, 11, 0.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); 現在、 -webkit- のベンダープレフィックスが無いと動作しません。 なお、上記の書き方だと、対応していないブラウザには、画像左側の見え方になりますので、非対応ブラウザでも問題なく見えます。 さらに、iOS9.0から @supports も対応しており、指定プロパティが対応しているかどうかも条件分岐できるようになったため、非対応ブラウザの表現幅が広がりました。 ちなみに、似たような名前で、 ::backdrop 擬似要素というのがありますが、こちらは、 dialog 要素で生成したモダールウィンドウ以外の背景に装飾するための機能です。 今まで、モーダルウィンドウを一から作成するのは、少々面倒でしたが、今後はHTML、CSS、（JavaScript）でカンタンに実装できるので、こちらの機能も今後要チェックです。 各ブラウザ側の対応はこれからですので、早々に使えるわけではありませんが、最新ブラウザだけちょっと違う見え方というのも面白いと思いますので、ぜひ試してみてください。

medibaでCTOをやっております山田です。 はじめに システム開発がほぼ内製になり、新しい技術も積極的に導入し、また手掛けているサービスの規模も大きく、ナレッジも溜まってきましたので、ブログを通じて外部に公開していこうということになりました。 最初の投稿ですので、少しだけmedibaについても記載させて頂きます。 どんなサービスをやっているか？ auスマートパスの各サービス、auヘッドラインやコネタなどのニュースメディア、auWallet、またauドメイン上のweb広告、キャリアメール広告などを展開しています。 auサービス以外にも独自メディア企画も開発中で、au系サービス、非au系サービス、広告事業と幅広く事業を手掛けております。 利用している技術は？ PHP/yii frameworkをメイン言語に据えており、最近ではruby on rails、Scalaでの開発も行なっております。medibaが手掛けている事業、サービスは数多くあるため、一つの技術に絞るのではなく事業やサービスによって最適な技術選択をするようにしております。 最近注力している領域はAWSで、AWSサービスを活用して実装量を少なく手がかからないシステム作りを行っております。 medibaで利用されている技術はこちらも参照して下さい。エンジニアを絶賛募集中です！ http://www.mediba.jp/recruit/career/engineer/ どんなことを書いていくか？ キャリアサービスの裏側にはどういった技術が使われているか、バックエンドだけでなくデザインを含めたフロントエンドの技術情報を可能な限り公開していきたいと思います。 また、ちょっとした技術Tipsや技術調査結果なども合わせて公開していきます。 それでは今後ともよろしくお願いします。