フロントエンド

SCSSのMapsによるz-indexの管理

Twitter Bootstrapの影響で、最近になってLESSだったファイルをいくつかSCSSに書き直している。なかでも便利だなと思ったのが、連装配列っぽいデータ型のMaps。 An Introduction to Sass Maps: Usage and Examples - Tuts+ Web Design Tutorial Mapsの実際の使用例は上記のサイトが参考になるとおもう。どれも便利な使い方なのでこれを見るとちょっとLESSに戻るのが厳しいかなという感じになってしまった。@eachとかもLESSと比べるとわかりやすい記述になるし。 中でもとりわけいいな...

Laravel+Nginxでpublicの下のアクセス優先順位をかえる

Laravel+Nginxで、htmlよりphpを優先したいケースがあったのでメモ。 (スマートじゃないかもしれない) 環境 Laravel homestead(2016/5/30時点の最新) Ubuntu 14.04 Laravel 5.1 nginx/1.9.14 PHP 7.0.5-2+deb.sury.org~trusty+1 (cli) ( NTS ) リクエスト処理順 Nginxの '/etc/nginx/nginx.conf' 内、 server>root に規定されたディレクトリ=webのルートになり、実在するファイルをチェック。あればそのままそれを表示。 "/"で指定された場合の、優先順位はserver>indexの記...

Oracle Application Container Cloud Service を使ってみた

説明 Application Container Cloud Service は、Java アプリケーション、Node.js アプリケーション、PHP アプリケーションをデプロイし、稼働する軽量かつスケーラブルな実行環境を提供するクラウド・サービスです。 参考: オラクル公式マニュアル 次は上記マニュアルからの抜粋した図です。この図が示すようにアプリケーションの実行環境は、Docker を基盤として各言語のランタイム環境がプロビジョニングされます。また、プロビジョニングされたインスタンスをスケーリングする事も...

はじめてのChef Server環境構築 (Linux/オフライン環境)

はじめに Chefなるものについて右も左も分からない状態からお勉強しつつ、Chef Serverの環境構築してみたので、備忘録としてまとめます。 実環境としては外部のネットワークには繋げられない閉じた環境(オフライン)で実施しなければならないケースも多いと思いますが、世にあるドキュメントでは外部のWebにつながる環境が前提となっている記述が多く、Chefのドキュメントもその辺りが結構不親切な気がします。当記事は外部ネットワークに直接は繋がらない環境で実施した作業をベースに...

Docker Swarmチュートリアルやってみた(overlayネットワーク)

参考 Get started with multi-host networking 構成図 手順 Consulサーバ作成 仮想ホスト「mh-keystore」作成 仮想ホスト「mh-keystore」作成 docker-machine create -d virtualbox mh-keystore 「mh-keystore」上にconsulサーバコンテナ作成 docker $(docker-machine config mh-keystore) run -d \ -p "8500:8500" \ -h "consul" \ progrium/consul -server -bootstrap 8500portで待ち受け 仮想ホスト「mhs-demo0」作成 docker-machine create \ -d virtualbox \ --s...

Spark on Dockerで分散型機械学習を始める - Part1: インストール

日経BPのITインフラテクノロジーAWARD 2015が発表されました。2015年にブレークすると予想されるクラウドやビッグデータの製品やサービスを選出しています。グランプリにDocker、準グランプリにApache Sparkが選ばれました。Sparkは2014年に入り盛り上がってきています。インメモリで高速に分散処理ができるため、機械学習のような繰り返し処理に向いています。MLibの機械学習ライブラリもあるので分散型機械学習フレームワークとして注目を集めています。そんなDockerとSparkを使い手...

機械学習の学習用に画像情報抽出とラベル付けが自動でできる前処理アプリをRailsで作ってみた

はじめに 機械学習とは非常に便利なもので、データさえそろっていれば、医療用のMRIデータから癌(がん)の発見ができたり、株価の予測ができたりと、応用範囲は多岐に渡ります。 しかし、ここでひとつ問題があります。 そうです。 「データさえそろっていれば」です。 そして、声を大にして言いたいところです。 「まずデータがそろっていない!」 結局のところ、機械学習の数学やプログラミングができるようになったとしても、このデータを作り出す力が身につかない限り、現場のデー...

webpackでjQueryの多重ロードを回避する方法

最適解だと確信が持てないので、あえてQiitaに晒してパブリックコメントを募りたい。 今回はMaterialize-CSSとjQuery Validation Pluginで発生したけど、似たシチュエーションは多そう。 Qiita内だとこの辺の記事とか。 結構困ったwebpackのお話 【Typescript】DefenitelyTypedはjQuery objectをbootstrapで拡張しない? stack overflowだとこの記事がまさに。 Managing jQuery plugin dependency in webpack TL; DR 序 jQuery2系を内包するMaterialize-CSSを使いつつ、 jQuery1系を推...

Spring Boot 1.5の主な変更点

今回は、Spring Boot 1.5.RC1の主な変更点を、リリースノートベースで紹介したいと思います。(1.5の正式リリースは今のところ2017/1/25に設定されており、まだまだ変更が入ると思いますが。。。) Note: 2017/01/15 「OAuth 2 Resource Filter」を追加。(RC1リリース後にリリースノートが修正されたため) Upgrading from Spring Boot 1.4 Spring Boot 1.4からSpring 1.5に移行する際に、影響がでる可能性がある主な変更点は以下の通りです。 Deprecations from Spring Boot 1.4 「S...

Drupal 向け Behat の拡張その2 カスタムステップの作成(後編)

前回、Drupal 向け Behat の拡張その1 複数ステップの実行とカスタムステップの作成(前編)という記事を書きました。その記事では、シナリオのステップを複数実行とパラメータを持たないカスタムステップの作成をしました。今回は、ステップにパラメータがあるカスタムステップの作成を行います。 パラメータがあるカスタムステップの作成 正規表現を使用しないステップ 作成するテストシナリオは下記になります。 Feature 名 テストフィーチャー3 シナリオ名 カスタムステップの作成...

10時間で個人アプリを開発しないと死んでしまう場合の対処法

(ニジボックス アドベントカレンダー2016 22日目の記事です) ある日のこと あくま:「10時間で、個人でアプリを企画して開発せよ」 あくま:「ちゃんと役に立つアプリでよろ。「Hello World」出すだけとかすぐ死んでもらうからな」 なんともまぁ困りました。 でも大丈夫。こんな状況に陥った場合の対処法を書いていきます。 この記事でカバーしている範囲 個人でアプリ開発する際の案出し〜機能定義〜調査〜実装の進め方 個人でアプリを完成させるまでに意識したいこと 開発プラッ...

必要なアイコンだけSVGで用意して使う

動機 Webでよく使うアイコンはせいぜい数種類なのに、Font AwesomeやMaterial Design Iconsなどの「どんどん増えていくWebフォント」を使うのはどうなんだろうと思い、ためしにReactを使ってSVGのアイコンセットのようなものを作ってみました。 結果、アイコンが表示されるまでのラグもなく、タイプ数も若干減らせそうでいい感じです。 デモ jsfiddleにデモを準備しました。(デモは仕方なくJavaScript1.7です) アイコンはMaterial Design IconsのSVGを使っています。 実用的な使い方...

SignalRによる双方向通信

ASP.NET MVCでサーバーとブラウザ間での双方向通信を実現する SignalR を試してみました。 SignalRとは こちらのページにSignalRについて書かれているのでご一読ください。 http://www.atmarkit.co.jp/ait/articles/1303/19/news099_2.html サーバーやブラウザ側がWebSocketに対応していればWebSocketを使うのですが、そうでなければロングポーリング(いわゆるComet?)等、他の方法での双方向通信に自動的に切り替えてくれるライブラリだそうです。 NuGetする VisualStudio上のNuGet...

Dockerを知らなくてもDockerコンテナでHadoop環境を構築する

この記事はFujitsu extended Advent Calender 2016の20日目の記事です。 やりたいこと ここではDockerに関する操作を一切せずにHadoop環境をDockerコンテナで構築することを目指します。 前半は次のような方が手早くHadoop環境を作るまでの手順を書いています。 Hadoopを使ってみたい Dockerを使えば環境が楽に用意できると聞いた でもDockerを勉強する時間はない そのためにAnsibleを使うことにします。Ansibleを選んだのはDockerのインストールからコンテナの起動、停止までの全体の...

frontrend vol.8 へ行ってみた人の戯言

こんにちは、UNIBAの MJ です。今回は、 サイバーエージェントさま が企画されている Frontrend Vol.8 - 帰ってきたフロントレンド に 参加したので、そのまとめと感想を書きます。 この記事は、絶対ブログ書くマン枠 3枠 のうちの一つです。 他の方の記事もきっと上がると思うので是非読んでください。 有用なリンク集 当日の動画 ストリーム配信もやっていた!僕のまとめ見るより、本人の言葉で解釈した方が圧倒的良い console.lealog(); さまの圧倒的なまとめ 各発表のポイントなど...

React-FlexBox-Gridの使い方

React-FlexBox-Gridはflexgrid.css用のdivを生成するreact componentです。 CSS Modulesという実装方法を取っています。 webpackを使う場合、css-loaderを一緒に使う必要があります。 Component 次の三つのコンポーネントがあります Grid Row Col 使い方はbootstrap3と大体同じです。実装にCSS flexible boxを使っています。 Gridの中にRowを置きます。 Rowの中にColを置きます。 Colにxs={6}のように、幅を設定します。 例 index.jsx const React = require('react') const ReactDOM...

Play Framework 2.5 (Java)で一覧検索・登録のサンプルアプリケーション

概要 PlayframeworkとJavaで一覧検索&CRUDするサンプルアプリケーションをさっくり作成します。 完成予定図 一覧画面 登録画面 環境 Windows10 64bit Java version 1.8.0_92 Eclipse 4.6.0(Neon) Playframework 2.5.8 Ebean 3.0.2 Lombok 1.16.10 ※DBは今回はH2 Databaseでいきます。 ソースコード https://github.com/kunst1080/play-java8-sample ※説明では同じソースを複数回参照します。全体像が知りたいという人は直接上記レポジトリを参照して下さい。 開発 事前準備 Windows/J...

Cake3.0のMigrationsプラグインの導入

Cake3.0のMigrationsプラグインの導入 前提条件 CakePHP 3.0をインストールする 概要 CakeDCからcakephpにGitHubアカウントが移動 cakephp/migrations MigrationsプラグインはPhinxのラッパーに変更 Phinx まだ現在、pre-alphaである(※仕様等変わる可能性がありますのでご注意ください。) 導入方法 1.インストール composerからインストールします。 "require": { "cakephp/migrations": "dev-master" } 2.設定 bootstrap.phpに以下を設定する Plugin::load('Migrations'); 3...

Mac(El Captain)にpython3系インストール

環境 OS X El Capitan(10.11.5) HomeBrewインストール済み pyenvインストール デフォルトでpython2が入っているが、バージョン切り替えを管理したいのでpyenv(rubyでいうrbenv)をインストール $ brew install pyenv パスの設定 $ export PYENV_ROOT="$HOME/.pyenv" $ export PATH="$PYENV_ROOT/bin:$PATH" $ eval "$(pyenv init -)" インストールできるpythonのバージョンを確認 $ pyenv install --list pythonインストール 最新のpython3.5.1をインストール $ pyenv install 3.5.1 エ...

RailsでFoundation for Emails 2.0を使ってレスポンシブなHTMLメールを送る

 この記事はトレタ Advent Calendar 2016の24日目の記事になります。メリークリスマス!  今時のメールは大体HTMLメールなのですが、これが結構な曲者です。HTMLメールはブラウザ以上に互換性が低く、色々な罠があります。  RailsではActionMailerがHTMLメールをサポートしていますが、あまり深いところは助けてくれません。そこでいくつかのツールを合わせて解決して見ます。 HTMLメールの罠 CSSの挙動がブラウザと異なる場合がある メール用のResponsive CSSを用意する必要がある...