はてなブックマーク

制作部フロントエンドエンジニアの金森です。 この記事は Vue.js Advent Calendar 2016 の6日目です。 2014、2015 ときて 2016 はついに埋まりましたね！ 少しでもサンプルソースが増えれば、と Vue.js + Vueify + Chart.js で書いてみました。 書いたもの オプションを全部使うような例が書ければよかったんですが、最終的にはライフサイクルフック 1 から created と mounted の2つしか使っていません。 棒グラフと線グラフが描かれた canvas が1つと button が2つのシンプルな構成です。 グラフの下に設置した button と canvas が連動します。 ソースは GitHub 2 に、成果物は GitHub Pages 3 に置きました。 Vueify の導入Vue.js のデフォルト配信方法が変わったの

こんにちは。制作部の平尾です。 私は2〜3年前くらいまでFlashがメインでお仕事していたのですが、最近はスマホのお仕事が多いので、新しく生まれ変わったAnimateはまったく触っていませんでした。久しぶりにAnimateを使って、HTML5+JacvaScriptのアニメーションを作ってみたらいい感じだったので、簡単にサンプルを使ってご紹介したいと思います。 サンプルの完成イメージはこんな感じです。このアニメーションをAnimateで作成して、HTML5 Canvasにポチっとしてみようと思います。 ※注：この画像↑はgifです。 1. Animateでアニメーションをつくるシンボル内でON/OFFの顔を切り替えていて、さらにステージ上でもアニメーションさせる二重構造になっています。今回はサンプルなので、簡単にモーションプリセットでアニメーションさせてみました。 2. パブリッシュ →

こんにちは、メディアシステム開発部の竹谷です。 私のチームではAWS CodeDeployを使っているのですが、デプロイ結果をSlackに流せないかなと思って調べてみました。 CodeDeployは、デプロイのステータスをAWS SNSに流すことができるので、CodeDeploy→SNS→Lambda→Slackといった流れで実現してみました。 SNSの設定まずは、CodeDeployのステータスを流すSNS topicを新規作成します。 CodeDeployの設定トリガーの作成から、デプロイステータスをSNSに送る設定を行います。 作成したSNS topicを指定します。 Lambda functionの作成次にLambda functionの作成ですが、Lambdaを実行するIAM Roleをあらかじめ作っておきます。 最低限AWSLambdaExecuteが必要です。 Lambda

みなさん、機械学習やってますか？ お久しぶりです。mediba広告システム開発部の原です。 前回はChrome Extensionを活用して広告のプレビューとかに活用しよう！って記事を書きました。 広告のプレビューをchrome-extensionで解決する その後、部署が広告システム開発部に移りましての再登板。今回は機械学習について記事を書いていきます。 アドテク分野でも活用できますしね。 今回の記事では機械学習でどんなことが出来るのか、という紹介ができればな、贅沢を言えば、読んだ皆さんに「よし、じゃあやってみようかな」と思っていただくことに主眼をおいているので、技術的な目新しさとかは考慮していません。 こんなことが出来るんだ、見ているみなさんに気づいていただければ成功かな、と思っています。 開発環境最初に環境の話です。 本記事の作成・検証環境は以下のとおりです。 Mac OS X 10

こんにちは。メディアシステム開発部の森竹です。 新規メディアやauスマートパスのサーバーサイド開発を担当しています。 今回は先日Stable版がリリースされたDocker for Macを使い、Ruby on Railsアプリケーション開発環境を構築してみます。 Dockerとは？Docker社が提供するコンテナ化プラットフォームのソフトウェアです。 以前はDocker Toolboxを使用していましたが、VirtualBoxが必要、環境設定が必要、Docker Machineを使う必要があるなど、使うまでの道のりが長い印象がありました。 それに比べDocker for MacではVirtualBoxが不要、環境設定が不要、インストールすればすぐ使えるのが魅力です。 前提OS X El Capitan(10.11.6)にDocker for Macをインストールします。 バージョンは下記の

こんにちは。広告システム開発部の瀬川です。 medibaの開発プロジェクトでは スクラムを採用するチームをよく目にします。 私も開発メンバーとしてスクラムに参加してきましたが、 利用するツールに迷っていた時期がありました。 今回はそんな時期に出会った、 『オープンソースのスクラムツール「Taiga」をAmazon EC2で使えるようにするまで』 をご紹介させていただきます。 なぜTaiga？今まで使ったWebツールの詳細については控えさせていただきますが みなさんはスクラムツールを使ってきて、 こんな思いを抱いたことありませんでしたか？ ツール利用料がなんとなく高い気がする。。設定項目が多すぎる。。画面が味気ない。。私は上記のような不満を多少なりとも感じていました。 一見、スクラムを実行するのに上記項目は無関係に思われるかもしれませんが、 「使いたくなるツール」は きっとスクラムを継続する

こんにちは。制作部の苅部です。 今回WebStormというIDEついてご紹介したいと思います。 私自身これまでエディタとしてSublime Textを使っていてIDEを触ったことがなかったのですが、実務の中でWebStormを試す機会があったので、備忘録も兼ねて便利な機能をまとめてみたいと思います。 私のように選ばずに一つのエディタを使い続けてきた方に向けて、WebStormの実際に使ってみないと分からない部分を簡単にご紹介できたらと思います。 IDEと聞くと敷居が高く感じるかもしれませんが、使いこなすと手放せなくなると思います。 エディタやIDE選択の一助となれば幸いです。 WebStormとは チェコ共和国のプラハに本社を置くJetBrainsというソフトウェア会社が開発しているIDE(統合開発環境)です。 同社が開発しているIntelliJ PlatformをベースにWeb開発に機能

こんにちは！ mediba 制作部 メディアクリエイティブグループでデザイナーをしている高柳です。 最近、Webサイトやスマートフォンアプリの開発・改善を行うときのUIデザインツールとして、PhotoshopやillustratorよりSketchを使うことが多くなってきているようです。 参考データ 2015 Subtraction.com Design Tools Survey 私も使い始めているのですが、便利機能が多くて使い易いのが魅力です。 今回は、そんなSketchについてご紹介したいと思います。 その１：デバイスに合わせたアートボード iPhone6を選択すると上の図の通り、アートボードが作成されます。 iPadやAndroid用アイコンを選択した場合は、それぞれ選択したデバイスに合ったサイズのアートボードが作成されます。 また、種類が多いためかAndroid画面サイズのアートボ

こんにちは、インフラストラクチャー部の沼沢です。 AWS の DNS フェイルオーバーの設定についての記事はたくさん出回っていますが、今回は Sorry ページに特化した設定をご紹介します。 以前、社内で AWS 上にシステム構築していた際に、例えば「急激なアクセス増で AutoScaling が間に合わないなどでユーザのリクエストに対して正常に応答できない状態に陥ってしまった時に “画面が真っ白な状態が続くこと” だけは避けたい」という要望を受け、最終手段的な位置付けで構築した Sorry ページ表示の仕組みについてご紹介させていただきます。 特段目新しい技術や情報ではありませんが、AWS にてサーバレスで高可用性な Sorry ページを構築する方法の参考になればと思います。 DNSフェイルオーバーとは？そもそも、DNS フェイルオーバーとはなんなのかを軽くご説明させていただきます。 ※

はじめにmediba制作部 メディアクリエイティブグループの今野です。 初回投稿なので、カンタンにグループ紹介からさせていただきます。 当グループは20名強のメンバーがいて、サービスごとにチーム編成されており、デザインとフロントエンドを担当しております。 普段の業務で培ったノウハウや、また、業務以外で、UI/UX、Webの最新技術も研究などもしているので、今後そのネタも記事にしていく予定です。お楽しみに！ 次から本題です。 backdrop-filterとは先日iOS9.0がリリースされました。 iOS9.0では、様々な機能がブラウザに実装されたのですが、追加機能のうちのbackdrop-filterプロパティをさっそく試してみました。 backdrop-filterは、背景にfilterが使えるようにするプロパティです。 filterは、色相・明度・彩度や、ぼかし、セピアなどPhotos

こんにちは。制作部フロントエンジニアの苅部です。 GoogleからCloud Vision APIの提供が始まっていたので、スマートフォンのカメラから利用できるモック画面を作って、APIの画像認識精度を試してみました。 簡単ではありますが、HerokuでのNode.js利用のおさらいと、実際にいくつかの画像を送信した結果を共有できたらと思います。 (Cloud Vision APIは2/18日に公開ベータになっています） Cloud Vision APIとはGoogleフォトやSafeSearchで採用されている、Googleの機械学習の画像認識APIです。 画像を載せてAPIコールすることで以下の情報の取得が可能です。 物体検知OCR有害コンテンツ検知顔検知ロゴ検知ランドマーク検知HerokuでのNode.js利用までの流れAPIKEY取得からAPIコールおよび画面実装までの流れをご説明