Twitter Facebook github

Category “Tech”

変更すべき php.ini の設定項目

リファレンス用にまとめてみました。随時追記・編集していきます。

前提

PHP 7の php.iniをベースにしていますが、ほとんどの設定はPHP 5系と共通です。

Read More »

Let’s Encrypt の証明書を更新した

(関連記事: Let’s Encryptをnginxで使ってみる

SSLの更新時期を思い出した

ウソです忘れてました。忘れてたところ、こんなメールが先週届いていました。

これはありがたい・・・本当にエラーになってから思い出すところでした。

本体のアップデート

3ヶ月ぶりなので、まずはLet’s Encrypt本体をアップデートしておきます。

Read More »

DropBoxの写真を整理するスクリプトを書いた

FacebookやTwitterでgistに上げたものを公開したら思ったより反響があって驚きました。

DropBoxにはiPhone等を接続したとき、自動で写真をインポートしてアップロードする機能があります。
iPhoneを同期する際、すぐに写真はDropBoxにバックアップされますし、iPhoneからは写真を削除できるのでとても便利に使っていました。

でも普通に使い続けていると、どんどんファイルが肥大化してしまって、Finderで開くのさえ時間がかかるようになってきます・・・。

そんな肥大化した写真フォルダを、こんな感じに年月でフォルダ分けしてくれるスクリプトを書きました。

Read More »

Python開発環境構築メモ

完全に自分用。Macにpython関係の環境構築したときのメモです。

バージョン管理マネージャを入れる

pyenvを使う

Read More »

WebPack-Dev-ServerからBrowsersyncに乗り換えた

前々回に モダンなフロントエンド開発環境をつくる という記事を書きましたが、その中で使った WebPack-Dev-Server を捨てたのでその背景と、Step-by-Stepの導入フローを書いてみます。

WebPack-Dev-Server を捨てた理由

大きく次の問題がありました。

  • Scssで@importされているファイルを変更しても、正しくビルドされない
    • TypeScriptのimportは問題ない
  • ビルド時にマップファイルが生成されず、バグが発生したときにそのまま調査に入れない
  • ビルド結果がインメモリでサーブされるため、ビルドされたソースを確認するには別途 webpack コマンドを打たなくてはいけない

特に1番目のものがクリティカルで、CSSを適用する段階では毎回webpackコマンドを打って実際にビルドしなくてはならず、使い物にならなかったためです。

この3つの問題をすべて解決できるのが WebPack + Browsersync です。

Browsersyncとは何か

Browsersyncはファイル変更を監視し、自動でブラウザリロードを行ってくれるツールです。

タスクランナーと合わせてLive Reloadの機能を提供してくれるnpmモジュールは他にもありますが、Browsersyncの特徴の一つはそれらに依存せず、単体で動作する点が挙げられるでしょう。例えばgulpであればgulp-webserver、前回のwebpackであればDev-Serverなどがありますが、これらと違い完全に独立したモジュールとなっています。

また大きな特徴として、複数環境でのデバッグ容易性向上に関する機能が多く含まれているという点です。

例えばFireFoxとChromeで同じページを開いておきながら、片方のブラウザでページ内をクリックしたとき、もう片方のブラウザでも同じ箇所へのクリックイベントを実行することが可能です。スクロールも同期することが可能なので、複数のブラウザを開いていても常に同じ箇所を表示していることになり、同時デバッグやブラウザ間の表示比較などがとても容易に実現できるはずです。(今回はこの機能については触れていません。)

Read More »

TypeScriptのインターフェースに「I」のプリフィクスを付けるのはよくないのか

タイトル長くてすみません。
最近TypeScriptの勉強をしていて、様々な文章を読ませていただいています。

その一つが次のものなのですが、納得できなかったところがあったので自分なりにまとめてみます。

“TypeScript早わかりチートシート【1.5.3対応】 (2015/08/03)”
http://www.buildinsider.net/language/quicktypescript/01

上の解説では、TypeScript 1.5の文法解説などが分かりやすく書かれており、とても参考にさせていただきました。

“I”は使うべきではない?

インターフェースの宣言には、通常のクラスではないことを示すために、接頭辞に”I”を追加することが多々あります。例えば、”User”クラスはインターフェースとして”IUser”インターフェースを実装している、といったようにです。

先に挙げたページの、インターフェースについての解説で著者は次のように述べています。

命名規則として、先頭にIを付けていた時期もありましたが、現在ではマイクロソフトのガイドライン上で、Iは付けないこと、と改められています。

これを読んだとき、どうしても納得できませんでした。
「Iをつけること」ならまだしも「つけないこと」をガイドラインで明文化されているというのは、自分の中で全くもって同意できなかったからです。

Read More »

モダンなフロントエンド開発環境をつくる

最近、趣味で作りたいWebアプリがあって、結構クライアント側が要になりそうなので、思い切って勢いで Deep Dive してみた話。かなり長いです。

モダンって言ってるけど、TypeScriptが苦手ならES2015+ES7も全然アリだと思う。前回の記事で触れてるから、TypeScriptの代わりに書き換えればうまく載るはず。というか人口的にはTypeScriptよりES2015使う人のが当然多いだろうけど、今回はTypeScript使ってみたかったんです・・・。

背景

わたしは今までフロンドエンド開発っていうと、CSS3+HTML5で特別な開発環境も使わず、気合いで頑張って作ってきた勢です。

一応、フリーランスでバックもフロントもまとめて依頼されたり、趣味で書いたり、プログラミングスクールで先生やってた頃はフロントも教えていたんですが、とても苦手でした。特にデザインとか全くセンス無いし、デザインも決まってないようなサイトをまるっと任されたりするとすごくストレスで辛かったのを覚えています。

最近はバックエンドやインフラにフォーカスした仕事をしていて、ほぼほぼフロントを書くこともなくなったのですが、数年前より便利なツールや面白そうなライブラリがいろいろ増えていて、せっかく書くならとことんモダンに!ということでやってみました。

今回のゴール

ここで作る環境の最終的なコードはgithubにあります。
https://github.com/syamn/sakuio-blog-160314

  • node.js と npm をインストール
  • JavaScript には TypeScript を使う
  • CSS には Scss (Sass) を使う
  • ビューライブラリには RectJS を使う
  • WebPackだけでビルド (GruntやGulpは使わない)
  • WebPack-Dev-Serverで自動リフレッシュを試してみる

ネットで情報を探すと、TypeScriptやScssのトランスパイルには未だにGulpが主流で(Gruntは減ってきましたね)、せっかくWebPackを導入してもGulpと組み合わせて使うみたいな記事を多く見かけます。

せっかくWebPackを導入したのなら、WebPackだけで完結させましょう〜!

Read More »

WebPackでES6とES7をトランスパイルする

最近趣味の開発範疇でフロント側の勉強をしています。
ビルドツールにWebPackを採用したのですが、ちょっとハマったことがあったので備忘録です。

やりたいこと

  • JSもCSSも画像もオールインワンに使えるWebPackを使ってビルドしたい
  • フロント側のJSもES6とES7の構文を取り入れて書きたい

Read More »

キャッシュしないCloudFrontを設置する

タイトルの通りです。

キャッシュしないCloudFrontなんて何に使うの?って感じなんですが、最近 AWS WAF がリリースされたりして、ELBのように前段に挟むだけでも意味があると思っています。

動的コンテンツが多いと恩恵は受けにくいのですが、それでも静的なファイルのみを指定してキャッシュを配信したり、DDoS対策したり…これから新たにウェブサービスのアーキテクティングする際はとりあえず間に噛ませておく、というのが良いと感じています。

Read More »

Amazon WorkDocs(旧Zocalo)を使ってみる

前回は Amazon WorkSpaces をレポしましたが、今回は同様のエンタプライズアプリケーションである Amazon WorkSpaces をレポします!

このサービスは昔、Amazon Zocalo という名前の文書管理サービスとして存在していましたが、いつの間にか WorkDocs という名前に生まれ変わっていました。
Zocaloがプレビューとして提供されていた頃から使ってみたいと思っていたのですが、結局ずっと機会がなく放置していたサービスです。

Amazon WorkDocsとは

ユーザー単位で利用可能なクラウドストレージサービスで、企業向けのDropBoxやGoogleDriveと言えば分かりやすいでしょうか。ファイルならなんでもアップロードすることができ、一般的な形式のファイルはウェブ上でプレビューも可能で、例えば社内の稟議書など書類への承認機能やフィードバックの機能がビルトインされており、企業にとってより便利に利用できるようになっています。

Read More »