はてなブックマーク

なにをしたのか Docker Composeという、複数のDockerコンテナを管理する機能を使ったサンプルです。目指しているのは、「実用的かつ最小のサンプル（と思っているもの）」です。 nginxコンテナでstaticなファイル（html/js)を配信し、APIのアクセスは後ろにいるnode.jsのアプリケーションコンテナにフォワードして、SPAのWebサービスを構築しています。 基本的に、以下のページを参考に書いています。 DockerでのNodeアプリ構築で学んだこと | POSTD リポジトリはこちら。 docker-compose-test 環境 Docker 1.12.1 docker-compose 1.8.0 node.js 4.6.0 nginx 1.11.4 動かす Docker for macがインストールされていることを前提として。 内容 Dockerとは Dock

株式会社FOLIOのフロントエンドエンジニアをしています、諸見里です。 この記事はFOLIOアドベントカレンダー7日目の記事です。昨日の記事はバズらせてサーバーを落とすことで有名な弊社CDOの超心に刺さってイヤでも印象に残るプレゼンの方法でした。それほどバズらずサーバーは落ちなかったようです。 会社のアドベントカレンダーということで、今回はFOLIOのBFF(Backend For Frontend)でのflowtypeの活用と、アーキテクチャについて書きます。 BFF & Microservices FOLIOのシステムは、Scalaを中心としたマイクロサービスで構成されています。そして、それらのサービスをクライアント向けに束ねるために、Node.jsで書かれたBFF(Backend For Frontend)を置いています。例えばWebアプリ用のBFFなら、各サービスからデータを集めて

Ruby on Rails始めました。 概要 Ruby on Railsを始めました どうやらsprocketsというのが初学者には曲者らしい。面倒なので、使わないことにした docker-composeでJSビルド用nodeコンテナ、ファイル配信用nginxを置いて、RailsはAPIの提供だけをすることにした 結構大変だった リポジトリはこちら KeitaMoromizato/rails_on_docker 構成 nginxがすべてのリクエストを受ける。静的ファイルはwwwボリュームに格納されたファイルを配信、APIへのリクエストはRailsコンテナへ nodeコンテナがJavaScriptをビルドしてwwwボリュームにエクスポート DBはMySQLを仕様。データはmysql_dataボリュームで永続化 ハマリポイント Gemのインストール先 Rubyのgem（nodeでいうnpm）は

はじめに 某WebメディアをGoogleのPageSpeed Insightsにて解析したところ、「画像にCache-Controlが設定されてないぞ」と怒られました。メディア内の記事には大量の画像が使われていて、それらの画像はS3にアップロードされたものを直接参照しています。 CloudFront使えよと言われて片付けられそうな案件ですが、リリース時からそんな準備万端で始められるような事業ばかりでもないわけです。既存のシステムをCloudFrontで置き換えようと思うと、もちろん画像のURLも変更されます。それに伴いシステムにも改修は入りますし、記事内に埋め込まれた画像のURLを頑張って置換する必要があります。ちょっとそれ時間かかる、ということで暫定的にS3に置いたコンテンツにCache-Controlを付けてみました。 これ書いてるうちに結局CloudFrontに移行したけどまあいいや

はじめに 2017年2月にRails 5.1betaがリリースされました。すでに各所で話題になっている通り、webpackerを用いてモダンJSの環境を構築することが容易になっています。 そこで今回はWebpackerに加え、hypernovaも使ってReactのServerSide RenderingをRails5.1で実現するまでのステップをまとめます。 完成版のリポジトリはこちら KeitaMoromizato/rails5.1-react-app [解説]Webpackとbabel いわゆるモダンJSと呼ばれるもので、抑えておきたいのはWebpackとbabel。 Webpack 近年のJavaScriptでは、npm（Node Package Manager)でライブラリを配布するのが主流になっています。ただnpmは本来node.jsのパッケージとして作られているので、ここで配布

この記事の対象 Dockerを使ったことがない。もしくは、触ってみたけどよくわからない Webアプリの開発中に「MySQLを起動しわすれていた」とか「nodeのバージョン違った」で悩まされている人 背景 Dockerの事例は増えてきたけど、なかなか手を出しづらい人も多いんじゃないだろうか。 個人的に、ここ数ヶ月でいろいろとDockerの構成を試しているので、それをふまえて開発環境でのDockerの使い方を解説しようというのがこの記事の目的。 Dockerでnginx＋node.jsのSPA構成を試す React SSR＋WordPress REST APIをDocker Composeで試す RailsのToDoアプリチュートリアル（on Docker） productionでのDocker活用となると、触る機会も限られてくるし、気軽に試せるものじゃない。そこで今回は、Dockerのポータ

概要 WordPress REST API Pluginを使ってWordPressをバックエンドのAPIサーバーとして使い、フロントに置いたnode.jsサーバーでReactのServer Side Rendering（SSR）を試すサンプルです。 リポジトリはここ KeitaMoromizato/wordpress-react-ssr WordPressはプラグインで拡張ができるように作られていますが、バージョンアップが面倒だったり、セキュリティがあれだったり、PHPが嫌いだったりと心配事が尽きません。 ならいっそ、WordPressを記事の入稿機能だけをもったバックエンドサーバーとして使って、Viewのレンダリングは別のサーバーを立てましょうというのが割と正しそうな気がします。ちょうどReactのサーバーサイドレンダリングを説明するサンプルも欲しかったことだし。 そんな構成も、Dock

※Reactハンズオン用の資料です Lintとは Lint Lint = 静的解析ツール コードを読み込んで、自動的に評価してくれる バグがありそうな所が見つかる より良い書き方を教えてくれる 複数ファイルで表記の統一ができる ESLint JavaScriptには、歴史的経緯もありLintツールが数多く存在する。 (JSLint、JSHint、ESLint） ここではJS.nextにもしっかりと対応した「ESLint」を使う（他のツールはよく知らない）。 何ができるのか コマンドでチェック 「〇〇 problems」に絶望 エディタでチェック 最近のエディタなら、対応のプラグインがある。 ruleとconfig rule rule = 「この記法に対してアラート出します」 rule：no-console console.xxを使っちゃダメ rule：default-case switch

追記 Re:dashのデータソースとしてGoogle Analyticsが正式に追加されるようです。リリースされた暁には、本記事にあるような面倒な手順を踏む必要はなくなりそう？ re:dashのGoogle Analyticsデータソースを試す 初めに Re:dashはオープンソースで提供されている、ダッシュボードツールです。サーバー構築の手間はかかりますが、超簡単にさまざまなデータソースから、自由にダッシュボードが作れるようになります。 今回は、おなじみGoogle Analyticsの情報を、Re:dashでダッシュボード化する方法を解説します。 追記 twitterを見ていて。 Treasure Dataでは、GAのレポートを突っ込む方法があるようです。 http://blog-jp.treasuredata.com/entry/2016/09/13/163306 Google Bi

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

const compile = require('types-assert/compiler').compile; const assert = require('types-assert/assert').assert; // tsファイルをtypes-assertのオブジェクトに変換 const type = compile('type.ts'); const obj1 = { stringProp: "hoge", numProp: 2 }; // 型が正しい場合はスルー assert(obj1, type.Interface1); const obj2 = { stringProp: "hoge", numProp: "2" }; // 型がおかしいのでError assert(obj2, type.Interface1);

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

概要 Google Spreadsheet + Google Apps ScriptだけでFacebook Messenger botを作ります。 サーバーを立てる必要はありません。しかも運用費用はゼロ円です。 とりあえずコピペで動きます。操作するのはスプレッドシートだけなので、非エンジニアでもできます(たぶん) はじめに Google Spreadsheet/Google Apps Scriptとは Google Spreadsheet(スプレッドシート)は、Google Drive上で使えるExcelみたいなものです。スプレッドシートにはGoogle Apps Script(通称GAS)というものがついていて、JavaScriptでいろいろと自動化できたり何かと便利です。 それに加えて、APIとして解放することで簡易サーバーのような動きもできます。今回はこの機能を利用して、Spread

2016/4/13、FacebookがMessenger Botを発表しました。国内ではすでにLineもbot市場(？)に参入していて、これからbotをベースとしたサービスも続々と増えていくでしょう。Facebook Messenger Botとは何か、そして何が実現できるのか。それを知るためにも、AWS Lambda + Serverlessフレームワークを使ってbotを構築してみました。 巷にはherokuで構築してみましたという例が多いですが、Lambda + Serverlessで構築することで次のメリットがあります 運用コストがほぼゼロ(Lambdaは毎月100万リクエストが無料) サーバーレスなので管理コストがほぼゼロ Serverlessは一種のInfrastructure as Codeなので、メンテが楽 逆にServerlessのアップデートが早すぎて大変(実際に今回詰ま

はじめに あるプロジェクトで仕様書をそれなりのクオリティで書く必要が出てきました。Markdownで書きたいなーとか履歴管理したいなーと思っていたので、GitHubで管理してGitBookとしてドキュメント化することに決めました。 内容 GitBookとは？ 「Markdownで簡単に電子書籍が作れるよ」というものです。GitHubのレポジトリを指定すると勝手にホスティングしてくれる gitbook.com というサービスの他に、OSSでも公開されているので自前の構築も可能です。 gitbook.com を使えばかなり楽が出来ますが、以下の2点が問題点としてありました。 確認した時点で日本語ディレクトリだと正常に動かなかった ほかの人(主にクライアント)に見せるためにprivateで構築してコラボレーターに追加するのが面倒 そこで今回はOSS版のGitBookを活用し、自前で構築しました。

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに Webメディアの執筆作業に継続的インテグレーション(Continuous Integration)、継続的デリバリー(Continuous Delivery)の考えを取り入れ、GitHub/CircleCIを使って効率化をした話です。最初の環境構築さえしてしまえば、非エンジニアでも問題なくこの仕組みに乗ることが出来ています。これらのツールは発想次第でいろいろな使い方ができるということを、メディアの運営者やエンジニアに限らずいろいろな人に知って頂ければ良いのかなと。 背景 この仕組みは私がWebメディアを運営する会社にて、開発と

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 弊社で実施している社内向けJavaScriptの勉強会のコンテンツまとめです(最近はやってないのも上げてる)。対象は独学でJavaScriptを少し触ったことがあるけど企業でやったことはない、くらいのレベルの人です。このコンテンツを作っている筆者も1年くらいしかJavaScriptを触ってないので怪しい所もあると思いますが、社内でのJavaScript教育に困っている方の参考になればと思います。 ちょっと一部古かったりするので、Issueでも立てて下さい。気が向いたら直します。 コンテンツ ES2015(ES6) JavaSc

extension UIImage { class func loadAsyncFromURL(urlString: String, callback: (UIImage?) -> ()) { dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), { let url = NSURL(string: urlString) var err: NSError? let imageData = NSData(contentsOfURL: url!, options: NSDataReadingOptions.DataReadingMappedIfSafe, error: &err) var image: UIImage? if let _data = imageData { image = UII

どのAdventCalendarにしようか迷った挙句AWSにしてみた。 非常にややこしいタイトルですが、Sails.js(node.js)をElastic BeanstalkのAutoScale環境に載せた上で、WebSocketを使用する方法です。 以前投稿した記事でSails.js(node.jsのフレームワーク)を使用したリアルタイムWebを実現しましたが、今回はそのサービスを公開できる環境を整えます。要件としては、 HTTPSで通信すること AutoScaleの設定をしてELB(ロードバランサ)を設定すること の２点です。基本的にそんなに難しくないのですが、これがWebSocketと相性が悪く、素直にやるとうまくいきません。 1.Beanstalk環境を作成 まずはElastic Beanstalkの環境を作成。特に難しいことはやってないので作ったことのある人はスルー推奨。画像のな

# Description: # cron scripts # module.exports = (robot) -> Trello = require("node-trello") t = new Trello(process.env.HUBOT_TRELLO_KEY, process.env.HUBOT_TRELLO_TOKEN) cron = require('cron').CronJob # set cron: Show Done List new cron('0 0 9 * * 1', () -> postDoneCards() , null, true, 'Asia/Tokyo').start() # set cron: Close Done List new cron('0 0 18 * * 1', () -> closeDoneCards() , null, true, '

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

はじめに 2014年12月頃、SlackのHubot Integrationの仕様が変わりまして、Slack上でhubotが動いているURLを設定する必要がなくなりました。このおかげで、RaspberryPi上のhubotも簡単にSlackと連携させることができます。 というわけで、世の中のIoTブームに乗っかってSlackを現実世界とつなげてみましょう。 作ったもの 今回実装したのは、Slackのあるコマンドに反応してRasPiが写真を撮影、自動アップロードするという機能です。 なぜこれを実装したかと言うと、これが欲しかったんです。画像データを自動で飛ばしてくれるホワイトボード。でもお高いですよね。普通はこんなお高いやつを何台も買えないので、ミーティングのときにはiPhoneで写真を撮って、Slackにアップロードして共有しています。 これ、自動化できればお高いホワイトボード買わなくてい

更新：2016/06/23 プログラミング不要で出来るようになってました。 https://seleck.cc/note/seleck_howto/article/55 ※更新 Hubot Integrationが更新されて必要な環境変数等が変わっているので注意。 http://qiita.com/KeitaMoromizato/items/0ee11d795d18a49538d8 前置き Slackはチャットサービスという性質上、フロー型の情報(リアルタイムなコミュニケーション)を操るのは向いていますが、情報をストックするのには向いていません。 ただし幸せなことにSlackはService Integrationの機能が充実しています。ストック型サービスと組み合わせることで、Slackでのコミュニケーションの可能性はさらに広がります。 ということで、hubotを介してTrelloと連携す

追記 スレッド機能、正式リリースされたようです。この記事の役目も終わり。めでたしめでたし。 Slackにスレッド機能を追加してみました。 レポジトリはGithubに置いているので、cloneしてherokuの環境にpushするだけ(とちょっとした環境変数の設定)で動きます。 https://github.com/KeitaMoromizato/slack-thread Slackにスレッド機能を追加するというよく分からない事を言ってるようですが、結構効果的なので試してみてはどうでしょうか。 Slackの問題点 Slackを使っていると、よく次のような問題にぶち当たります。 確認したいこと・共有したいことがあったのに別のトピックによって埋もれてしまう。逆に、別のトピックが走っていたので埋もれてはいけないと思い投稿を躊躇ってしまう。本当によくあります。 解決方法としてはチャネルを細かくわけてコ

何か知らない間にHubot Integrationの設定が変わっていました。せっかくSlack Advent Calendar書いたのに修正しないといけない... Slack側の設定 いつもどおり[Add a Service Integration]からHubotを選択、新しいIntegrationを作成すると... Usernameの入力を求められた。コレって前からあったっけ...?(ここは記憶があやふや) そしてここからがまるっと変わってる。(1)のAPI Tokenはいいとして、(2)のCustomize Name(ボット名)をSlack Integration側で設定するようになってる。(3)のアイコンはまあ昔からあった。 そして設定はまだまだ続く。(4)と(5)は無視でいい。botを仮想ユーザとして扱う(?)ような感じになったので名前を付けるのだろう。たぶん。 重要なのは(6)で

タイトルの通り、Slackにtwitterのつぶやきを投稿する方法を説明しています。これ、自社サービスをお持ちの企業でやると意外と効果的だったり。最後の方にメリットを書いていますのでどうぞ。 前提 herokuにユーザ登録済み herokuコマンドが使える herokuにクレジットカード情報を登録している クレジットカードを登録していないとmonglabのアドオンが使えないので登録必須です。課金は発生しないはずですが、万が一発生した場合も自己責任でお願いします... twitter token取得 Twitter Applicatioin Managementから[Create New App]で各種情報を入力し、[create your twitter application]。 [Keys and Access Tokens]からAPI KeyとAPI Secretを取得します。 あと