フロントエンド

ConoHa + DokkuでプライベートPaaS構築

今まではHerokuのFreeプランでWebアプリやHubotを運用していました. しかし,6月からの新料金では,24時間稼動が出来なくなりました. Hubotは研究室やアルバイト先で使っているので,死活問題です. Herokuの新しいプライシングがついに公開。Freeは1日6時間以上Sleepする必要あり - SideCI Blog - SideCIの継続的インテグレーションブログ Herokuの新料金はお得なのか - フレクトのHeroku Lab そこで,Hobbyプランに移行するのではなく,VPSを借りてプライベートPaaSを構築すること...

プログラミング未経験者がRuby on Railsチュートリアル(英語Ver.)1周目を完了したので内容をまとめてみる。

1周目を進めていく上で方針としたこと 3周やることを前提に、わからない部分はメモだけ残してあまり深入りしない コードはコピペせず全てタイプする(※HTMLやCSS等も含めて全部) 1周目はテストを書かない(※2周目、3周目からは書いていきます) 前提知識(チュートリアルに取り組む前にやったこと) HTML/CSS/JavaScriptの基礎インプット(※Treehouseという学習サイトを利用) Git/Unixの基礎インプット(※Treehouseという学習サイトを利用) 簡単なRailsを用いたTo-doアプリ作成(※T...

Elastic beanstalk on Docker on Elastic beanstalk (前半)

Elastic Beanstalk はAWSのサービスを簡単にセットアップできるサービスで、インスタンスをいろいろなプラットフォームを動かすことができます。 今回はElastic BeanstalkでセットアップしたDockerのイメージ上で、Ruby on Railsを動かすために自分がやってみた方法をご紹介します。 間に合わなさそうなので長くなりそうなので、今回はElastic beanstalk の設定と Docker設定ファイルの取得までです。 まず、ローカルでRailsのプロジェクトを用意します。 Rubyは2.2を使います。 Elast...

PHP界隈で一番ナウい(けど遅い)という噂のLaravelをサクッと触ってなんとなく理解する

RubyにはRailsというRubyのフレームワークといえばコレ!みたいなものがあるんですが、残念ながらPHP界隈にはRailsに該当するようなフレームワークはありません。 そんな中、個人的に一番ナウいと思っているPHPフレームワークLaravelに触れるべく、サンプルアプリを通してその使いやすさを実感してみようと思います! 開発環境構築 ナウいフレームワークだけあって、Laravelはcomposerで入れる、また、vagrantも標準で準備されています。最高!最高!ふぅうううーーーーーー!! $ com...

Material Components for the web - Getting started を試してみた

市毛です。 Material Design Lite(MDL)の後継版であるMaterial Components for the web(MDC-Web)が発表されたので、まずは Getting started を試してみました。 MDC-Web CSS はじめにベースとなるHTMLを見てみます。 CDNからMDC-WebのCSSを取得して下記のようにマークアップします。 デモ index.html <!DOCTYPE html> <html class="mdc-typography"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,ini...

Erlang チーム開発 rebar3でOTPアプリの雛型を作る

前回KVSを開発したので、いよいよチーム開発にむけてOTPの雛型アプリを作成します。 Erlang本やErlangで書かれたプロジェクトのソースを読んでいると、Erlang OTPアプリケーションのディレクトリ構造や設定ファイルには、どうやら一定のルールがあるようです。 社内のErlangエンジニアに聞いてみたところ、仕事では手でディレクトリ構造を構築せず、rebarかrebar3を利用すべきだとアドバイスを頂きました。早速最新版のrebar3でOTPの雛型アプリを構築してみました。(rebarは古く、一...

caffeをubuntu16.04のVirtualBoxにインストールする

0 初めに caffeは今、機械学習の主流のframeworkになっているが、virtualboxにインストールするのはなかなか難しい。virtualboxはGPUをサポートしてないらしい。でも、どうしてもvirtualboxに入れて自由に遊んで見たいからやって見るしかない。 1 対象のOS cent os、ubuntuなどいくつ試したが、Ubuntu 16.04 LTS を選択。ネットを調べるとほとんどが、ubuntuをベースにしている。下記のサイトからダウンロードできる。 http://www.osboxes.org/category/ubuntu/ バージョンがいろいろ...

react, redux周りのパッケージ選定とKPT[2016-06-18現在]

はじめに react, redux周りのnpmパッケージはまさに春秋戦国じだいがごとくパッケージが乱立し、訳がわからない状態になっています。 1か月後には全然違うKPTになってるかもしれませんが、現時点をログっておいて、1か月後に差分見たい。 [2016-06-18 追記]実際めっちゃ変わった。ウケる。 あくまで個人的な KPTですので悪しからず。 でもコメントは歓迎です。いろんな人とこの辺の構成の話したい^^ 前提 サーバーサイドレンダリングは不要 クローラーの対象になる必要がない画面な...

音声ファイルを動画ファイルに変換するだけのWebサービスとCLIツールを作りました

はじめに TwitterやYoutubeに音声のみを投稿したいニーズがそこそこあると思うのですが、音声ファイルを静止画付きの動画ファイルに簡単に変換できるサービスがなさそうだったので作ってみました。 (後から知りましたが、MP3TUBEというサービスがありました でもこのサービス、デカデカと「MP3TUBE」と書かれた画像で動画ファイル化されてしまうっぽいので、今回作ったものはもう少し柔軟で便利なものになってると思います) 作ったもの Webサービス http://audio2video.me/ こんな...

ASP.NET Web API事始め[VB.Net]

Visual Studio 2013でASP.Net Web APIを始めました。 が、すでに終わることが決まっているようです。 開発言語は都合によりVB.Netです。よいこはC#を使いましょう。 名前(用語)は大事だよー Microsoftは同じものに違う名前を付けたり、違うものに同じ名前を付けたり、そんなことがしょっちゅうなので、まずは整理したいと思います。 ASP.NET .Net Frameworkを使用してASPアプリを作るためのフレームワーク。 2016年時点の最新バージョンは4.6。 ASP.NET Core .Net Frameworkからプラ...

WindowsでANGLEをビルド

WindowsでANGLEをビルドするための方法について記載します。正確には、Visual Studio 2013のソリューションファイルを作成するための手順です。ビルド手順は、こちらのページに記載されていますが、これを行うためにはdepot_toolsが必要です。しかし、depot_toolsの紹介記事の多くがLinuxやOS X用の記事のため、Windows用のやり方をまとめておきます。 ANGLEとは? ANGLEとは、OpenGl ESのDirectX実装です。ANGLEを使うことで、OpenGL ESを用いたWindowsのネイテイブアプリケーション...

EC-CUBE3でもWebFont使ってみる?Google Fonts導入方法。[Noto Sans Japanese]

EC-CUBE運営サイト「ネットショップの壷」でWebFontのことが記事になってました。 せっかくですので、この「Noto Sans Japanese」をEC-CUBE3のフロントに適用させてみましょう。 EC-CUBE3のCSSファイル フロント側のCSSはこの↓フォルダの中にあります。 /html/template/default/css/ デフォルト状態で、フロント側のCSSファイルは以下の4つが上から順に読まれます。 bootstrap.custom.min.css (リセットと、主にグリッドレイアウトとボタン用) style.css (主に各パーツの表示再現用) s...

Laravel Homesteadを利用してLaravelを利用するための準備をする

Laravelの勉強をするために環境を構築した。 Laravelの公式パッケージでLaravel Homesteadというものが提供されているらしいので、それを利用することにした。 本記事をまとめている途中に情報収集していて気付いたのだが、公式サイトに詳しく載っていた…。 基本的にそっちをみた方がよい気がするので、このページに来た人用にリンクを貼っておきます。 公式:https://readouble.com/laravel/5.1/ja/homestead.html ※上記ページでは、Ubuntuのバージョンは14.04となっているが、最新の...

Build Kafka Cluster with SASL(Kerberos)

This is a for-beginner tutorial for those who already understand how Kafka works and the basic functionality of Kerberos. Purpose Setup a simple pipeline for stream processing within the VMs. Integrate Kafka with Kerberos' SASL authentication. Console pipeline to check if our setup works. The versions of components in this post will be: Ubuntu: 16.04.1 Kafka: 0.10.1.0 with scala 2.11 Kerberos: 5 Prepare the Servers We are going to have 3 Ubuntu s...

Locomotive V3 (LocomotiveCMS) Wagonインストール編

LocomotiveCMSの新しいバージョンLocomotive V3がリリースされたのでさっそくインストールしてみました。ローカルでサイトを開発するツールであるWagonと、そのサイトをディプロイするサーバー上のRailsアプリであるEngineの関係に変わりはありません。インストールも前バージョンの手順とほとんど変わらず、WagonのインストールはQuick startそのままですが、ところどころ補足します。EngineについてはEngineインストール編をご参照下さい。 Mac OS X El Capitan/Ruby 2.2.1p85にて確...

VMware Fusion 上の FreeBSD でシリアルコンソールを使う

OS起動メッセージをテキストとしてコピーしたり、シングルユーザモードでの操作時にコピー&ペーストする場合は、シリアルコンソールが使えると便利です。 VMware Fusion 上の FreeBSD でシリルコンソールを使う手順を書きます。 以下の手順は VMware Fusion Professional 8.5.0、FreeBSD 9.3-RELEASE で確認しています。 VMware で仮想マシンのシリアルポートを有効にする (telnet) VMware Fusion の仮想マシン設定でシリアルポートの追加はできますが、ここで作成したシリアルポ...

Angular2 Http

Angular2 & TypeScriptを勉強して分からなかったところや自分用メモをまとめていきます。 バージョン:alpha39とかその辺り Angular2のビルトインライブラリにはHttpが含まれないため自分でインジェクトする必要がある。 app.ts import {HTTP_PROVIDERS} from 'angular2/http'; ... bootstrap(MyAppComponent, [... HTTP_PROVIDERS]); 公式マニュアルにはHTTP_BINDINGS HTTP_PROVIDERSの2通り記載がある。 Httpの説明ではHTTP_PROVIDERSを使っているのでこっちを使う事にする。...

【写真で解説】自作デバイス(ESP8266)をmyThingsにつなぐまで!

myThings…名前は聞いたことあるし、スマートフォンのアプリを入れてみたのだけど、自作ハードウエアをつなぐのってなんだかIDCFクラウド使わなきゃいけないぽいし、やったことないって方にお勧めの記事です!(自分も初体験でしたw) いろいろ迷ったところをなるべく写真を使って解説しています。 おそらくこの写真の通りやってみればうまくいくはずです。ぜひmyThingsを活用してみませんか! myThingsってなに? ホームページを見ていただくとわかるのですが、いろいろなチャンネル...

Sassの@eachを使ってタブ実装をするCSS思いついた

CSSとHTMLでやるこういうタブの実装 選択されているものを.activeなどのクラスをつけて色を変えるような実装についての思いつき。 いつもやる感じのやつ 普通にBootstrapを習ったやり方をするとこんな具合 <ul id="list1"> <li>AAAA</li> <li class="active">BBBB</li> <li>CCCC</li> </ul> #list1{ li{ cursor: pointer; display: inline-block; border: 1px gray solid; border-bottom: 0px; pa...

「第12回 オフラインリアルタイムどう書く」の課題をPHPで書いてみた

0.きっかけ qiitaを見ていてたまたま見かけて興味を持ったので。 なんで第12回かというと、特に意味はありません。たまたまです。 第12回 オフラインリアルタイムどう書く 実行環境にFuelPHPを使用していますが、 アルゴリズムの部分はFuelPHPと切り離して書いたので、namespaceの一文削れば他でも使えるはずです。 FuelPHPはあくまで実行環境として利用した程度です。 まあついで程度で。 1. サイコロを表すDiceクラスの実装 課題の部分です。 自分の場合、下記のように書きました。...