はてブクライアントを作った

Rails, React/Redux構成で習作として何かWebアプリケーションを作ろうと思い、GW終わりから3日ぐらいでWebアプリケーションを作った。 こちら: https://tic40-emperor.herokuapp.com *HerokuのFreeプランなので、サーバがsleep中だと表示にかなり時間がかか…

CircleCI 2.0からHerokuにRailsアプリを自動デプロイする

Herokuのアカウント作成 Heroku 適当なRailsアプリケーションをGitHubに作成 GitHubに適当なリポジトリを作成してclone $ git clone git@github.com:{account}/{repository}.git railsアプリケーションを作成する $ cd {repository} $ rails new . $ vi app/…

Web基礎知識をおさらいする

基礎中の基礎。いつでも体系的に口頭で説明できるように自戒を込めて。 HTTPってなに? Hypertext Transfer Protocol.RFC2616で規定された、TCP/IPをベースとしたネットワークプロトコル。 TCP/IPってなに? ネットワークプロトコル。以下のように4層の階層…

カイゼンジャーニーを読んだ

カイゼン・ジャーニー たった1人からはじめて、「越境」するチームをつくるまで作者: 市谷聡啓,新井剛出版社/メーカー: 翔泳社発売日: 2018/02/15メディア: Kindle版この商品を含むブログを見る 読みました。以下は自分用のまとめ。 状況の見える化 タスクマ…

GitHub個人/組織アカウントのリポジトリを一括cloneする

準備 curl、jqが必要なので未インストールならインストールをする macOSでbrew経由の場合 $ brew install jq curl 実行方法 リポジトリのクローンを保存するディレクトリへ移動し、以下のコマンドを叩く。 個人アカウントの場合 $ curl https://api.github.c…

CentOS 7 + PHP7 + mysql 5.7 環境をdocker化する

構成 |- docker-compose.yml |- Dockerfile docker-compose.yml version: '3' services: web: build: . ports: - "8080:8080" volumes: - .:/repo depends_on: - db tty: true privileged: true db: image: mysql:5.7 command: mysqld --character-set-serve…

js勉強会用資料

ちょっとした勉強会用に書いたやつ 太古のコード See the Pen jzNaoa by tic40 (@ccpzjoh) on CodePen. 特徴 DOMの状態管理がない DOMを手作業で直接更新 DOMの状態を毎回把握しないといけない データバインディング See the Pen dmbJPy by tic40 (@ccpzjoh)…

Hugoにgoogle analyticsを設定する

config.toml に以下を追加 googleAnalytics = "{your tracking code}" Hugoはgoogle analytics用のテンプレートをすでに用意している。 テンプレートファイルに以下の一行を追加だけで良い。 {{ template "_internal/google_analytics_async.html" . }} これ…

dockerコンテナで起動したPHPビルトインサーバにアクセスできない

適当にdocker コンテナを走らせる。-p で8080ポートを指定。 $ docker run -it --name {container-name} -d -p 8080:8080 {image-name} docker コンテナ内でphpファイルを作成し、php ビルトインサーバを以下のように動かした。 $ echo " index.php $ php -S…

Hugoでポートフォリオサイトを作る

経歴書、毎回pdf出力して送ったりするの本当にだるいので、もうgithubにあげとこう— tic40 (@tic40) 2018年2月24日 github pagesを使って自身の経歴を公開するポートフォリオサイトを作ろうと思い立った。 今回、Hugoという静的サイトジェネレータを使って構…

brewfileでMacのソフトウェアインストールを自動化する

3年ぶりにmacを買い替えた。 macbook air 11inch(2014) -> macbook pro 13inch(2017) 13インチなのにサイズがほとんど11インチairと同じだ。ディスプレイもきれいになって、最高という感じ。 せっかくなので、今まであまり使ったことがなかったHomebrewを使…

Slack基本使い方まとめ

概要 Slackをちゃんと業務で使うために、基本機能まとめる。 get.slack.help 基本 メンバー種別/権限 大きく4つの種別が存在する。 オーナー 管理者 メンバー ゲスト 詳細はこちら Slack メンバーの種別と権限 – Slack チームとワークスペース チームとは、S…

エンジニア転職面接で最低限聞いておくべきチェックリスト

Webアプリケーションエンジニア目線で確認しておくべきことのチェックリスト。忘れがちなので書き出してみた。 チェックリスト 会社のメインプロダクトは? 開発手法は? プロジェクトマネジメントツールは? ソースコード管理は? CI/CDにはどう行っている…

Docker チュートリアル

現状 Dockerは聞いたことあるけど実際に使ったことはない。 ゴール チュートリアルを通してDockerでweb serverを立ち上げてみる Dockerとは Docker - Wikipedia コンテナ型の仮想化環境を提供するオープンソースソフトウェアである[3]。VMware製品などの完全…

32bit CentOSへGo言語をインストールする

Go

Go を動かす必要があったのでインストールした際の覚書 環境 CentOS release 6.5 (Final) 32bit ダウンロード 以下から32bit linuxの最新版を探す Downloads - The Go Programming Language 1.9.2 が最新版だったので、これをダウンロードする。 $ wget http…

Vue.js にGoogle Analyticsのイベントトラッキングを設定する

やりたいこと Vue.jsで、ボタンクリックイベントのトラッキングをしたい。 方法 vue-analytics を使うと簡単にいけた github.com 実装方法は公式に書いてある通りなんだけど、一応下記の要領で実装した。 Setting app.js import Vue from 'vue' import VueAn…

2017年に読んだ本たち

2017年に読了した本*1 増補改訂版Java言語で学ぶデザインパターン入門作者: 結城浩出版社/メーカー: ソフトバンククリエイティブ発売日: 2004/06/19メディア: 大型本購入: 51人 クリック: 762回この商品を含むブログ (397件) を見る 古典。今更感はあるが、…

error while loading shared libraries: libfontconfig.so.1

環境 CentOS release 6.5 事象 karmaでPhantomJSを起動しようとするとエラーでこけた。エラーは以下。 ERROR [launcher]: Cannot start PhantomJS xx/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs: error while loading shared libraries: li…

vue-cliのwebpack productionビルド時にconsoleログ出力を削除したい

vue-cliでwebpackでproductionビルドを行う際に、以下のように UglifyJsPluginにcompress.drop_console オプションを追加するとconsole.log, console.errorなどのconsole.xのコードを削除できる build/webpack.prod.conf.js new webpack.optimize.UglifyJsPl…

moment.jsでマシン依存しないサーバ時間を扱いたい

moment.jsを扱っていて、クライアントサイドアプリケーションでマシン依存しない時間を扱いたい場合の方法。 サーバからタイムスタンプを予め取得し、マシン時間との差分を保持しておく。 以降はその差分を計算することで正確な現在時刻を求める。 // timest…

nodejsで簡単なAPIモックサーバを作る

フロントエンド開発をしていて、API実装前にさらっと動きを確認したいときなど、モックAPIがあると便利。 json-serverを使っていたけど、意外と細かいところに手が届かなかった*1の自分用に前でモックAPIのテンプレートを作った。 REST API(express) CORSの…

error: [vuex] vuex requires a promise polyfill in this browser

現象 Vuexで構築したアプリケーションをIE11で動かすとエラーになった。 error: [vuex] vuex requires a promise polyfill in this browser promise がIEだと使えないようだ。 解決 babel-polyfill を入れる babeljs.io npm install --save-dev babel-polyfi…

stylefmtでcssプロパティをアルファベット順に並び替える方法

stylelint-order プラグインとしてインストールすることで可能。 stylelint-order をインストール $ npm install stylelint-order --save-de .stylelintrc.json に以下のようにplugins と rules を追加する { "plugins": [ "stylelint-order" ], "rules": { …

WebRTC(SkyWay)でコネクションを成立後にローカルビデオのon/offを動的に切り替えたい

やりたいこと WebRTCでコネクションを作ったあとに、自分のビデオ、マイク音声on/offをシームレスに切り替えるようにしたい。 Skypeとかにあるビデオ、音声ミュート機能と同じやつ。 例えば、今ちょっと自分の画面を相手に見せたくないよ、でもコネクション…

都内から格安で富士急ハイランドへ行く

先日初めて富士急ハイランドに行ってきた。 得Qパックという、高速バス往復+フリーパスのチケットが安かった。 bus.fujikyu.co.jp 渋谷から往復して7900円(渋谷以外にも乗り場はある)。フリーパスは正規の値段だと、それだけで5700円なのでかなりお得だ。 都…

vue-cliの開発サーバをhttps化する

vue-cliを使って開発をしていて、開発サーバをhttps化する必要がでてきたため、vue-cliに組み込まれているdev-serverをhttps化することにした。 ソースを見るとなんてことはない、nodejsのexpressを使ってサーバを起動しているだけなので、expressのhttps化…

Vagrantを再起動したら既存のVMが消えた

現象 Mac上で起動しているVagrantのVM内で作業していたところ、バッテリー切れでMacが強制シャットダウンした。 その後、起動して、 Vagrant up でVagrant を起動したところ、作業していたVMではなく、新規VMが立ち上がるようになってしまった。 作業途中の…

vue-cliで作成したアプリケーションをサブディレクトリ上に展開する

vue-cli github.com やりたいこと vue-cliで作成したアプリケーションをサブディレクトリ /test-dir/ に展開したい。 問題 デフォルトの設定でプロダクションビルドし、 $ npm run build webサーバから {vue-cli-project}/dist/ を参照するようにしたが、こ…

Atomでリモートのファイルを直接編集する

先日社内のデザイナの作業を見てたら、ローカルでファイルを編集して、それをVMにFTPでアップロードしていたので、 VM上で直接編集したら?っていう話になった。 VimやEで始まる黒い画面はさすがにデザイナにはおすすめできないので、Atomあたり使ってるなら…

API blueprintでAPIドキュメントを書く

API

APIを作った際にはAPIドキュメントを必ず書かなくてはならない。 API blueprintでさくっと書くのがおすすめ。 デモ https://tic40.github.io/api-blueprint/public/v1.html ソースコード github.com 書き方 まずAPI blueprint 記法でAPIドキュメントを書く。…