あざらし備忘録。

音ゲー好きなウェッブエンジニアがいろいろ思った事やった事を書いていくブログです

React+Reduxでreact-dropzoneを用いてファイルアップロードを行うサンプルを作ってみた[JavaScript][ES6]

今回はフロント側だけでファイルアップロードのサンプルを作ってみた。

あとはサーバーにファイルの情報を送れば良いだけなのでいつも通りな方向に持っていけそう。

遊んでみたリポジトリはこちら。

github.com

ファイルアップロード用のライブラリとしてはreact-dropzoneを使ってみた。

github.com

パッと検索した限りだとこのライブラリと、あともう一つ名前のよく似たreact-dropzone-componentが目についたけど、今回はreact-dropzoneの方を選択。

github.com

理由はシンプルそうだったから。

後者の方はリッチな感じに仕上がっていたけどその分外部ライブラリに依存していたり、導入がちょっと面倒そう&メンテとか考えた時にうーんという感じになったので見送り。

実際今回使った方は1ファイルでできてる程度にはシンプルだったので中身はだいぶ見やすかった。

まぁまぁスムーズに行けそうな感じがつかめたので、趣味プロダクトにちょっと突っ込んでみて見ようかなーと思う。

以下、READMEの転載。

react-redux-file-upload-example

React+Redux環境に react-dropzone を入れてみてフロント側のファイルアップロードをして遊んでみるテスト

react-dropzone

https://github.com/okonet/react-dropzone

install

npm install --save react-dropzone

usage

import Dropzone from 'react-dropzone'

// ...

<Dropzone
  onDrop={func}
  onDropAccepted={func}
  onDropRejected={func}
  accept="image/gif,image/jpeg,image/png,image/jpg" >
    <div>
      ファイルを指定またはドラッグ&ドロップ
      <p>形式: gif/png/jpeg/jpg</p>
    </div>
</Dropzone>

ファイル選択後に実行するコールバックに関してはonDropプロパティで指定できる。

ファイル形式の制限もacceptプロパティを使ってカンマ区切りで行える。

ファイル形式の制限に選択したファイルが全て則っていた場合はonDropAcceptedプロパティにて指定されたコールバックを実行し、則っていないファイルが一つでもあった場合にはonDropRejectedプロパティにて指定されたコールバックが実行される。

今回は指定してないが以下のような設定も可能

  • 複数ファイルの選択を許可するか(multiple: デフォルトtrue)
  • ウィンドウをクリックした時にアップロードファイルを選択する画面を表示するかどうか(disableClick: デフォルトfalse)
  • プレビューを表示するかどうか(disablePreview: デフォルトfalse)

デザインに関しても外から好きに渡せるので、カスタマイズしてあげれば良さそう

  • style 基本のstyle
  • activeStyle acceptedな時のstyle
  • rejectStyle rejectedな時のstyle

の三種類のstyleを渡せるようになっている。

styleを基本として、accepted/rejectedなstyleがマージされて適用されるイメージ。

本体のソースもとても小さいものなので一通り見ると良さそう

https://github.com/okonet/react-dropzone/blob/master/src/index.js

所感

一通りいじってみたけど特段苦労はしなかった感じ。

あとは今回はサーバーと繋いで実際にファイルのやり取りを行うところまでいけてないのでそのあたりで躓かなければスムーズっぽい。

サーバーとのやり取りのところも公式のREADMEにSuperAgentを用いたサンプルが出ているので割と楽には出来そうな感じはある。

React+Redux+ES6で動くSPAをMocha+power-assert+Karmaで小さな構成でテストできるようにしてみた[JavaScript][テスト][入門]

練習として作ってみた。

github.com

f:id:shiro_goma:20160214164617p:plain

redux-test-exampleとか言ってるけどもろReactも込み想定でのexampleです。

今までJS周りのテストはまともに触ったことがなくて、かつ周辺ツールも触ったことがなかったのでその辺りも軽く触れてみてまとめてみた。

小さく始めた感じがあるのでもっと良いツールが〜、とかはありそうだけど今回は一旦見ずに「とりあえずReact+Redux+ES6で動くSPAをテストできるようにするぞ!その他も学べたらいいな!」くらいの温度感でさらっとやってみました。

以下GitHubのREADME転載。

使ったもの

  • React
  • Redux
  • ES6
  • Mocha
  • power-assert
  • Karma

ついでに使ったもの

  • browserify
  • babelify
  • babel-preset-es2015
  • babel-preset-react
  • browser-sync
  • watchify

requirements

npmが使える環境

install

make install

これでとりあえず環境は揃うはず

build

make build

React+ES6なやーつをbrowserifyとbabelifyを用いてビルドする。

設定値として.babelrcに記述されている内容が用いられる

public/bundle.jsにビルドされた内容が書き込まれる

tests

今回は勉強用にMocha単体で動かすテストとKarma経由で動かすテストを用意してみた。

まぁでもReactだのReduxだのをテストしていくんだったらKarma経由になるのかな?

Mocha Test

make tests

compilerとしてpower-assert化+ES5化+React化するような設定をはさみつつMochaでテスト実行する。

--watchオプションを入れているのでファイルの変更を検知して勝手にテストが回ってくれる。

Karma Test

make browser-tests

Karma経由でテストが実行される。

karma.conf.jsが設定値として読み込まれる。

この中で * テスト対象のファイルの設定 * Mochaで動かすようにする設定 * Browserifyを噛ませてビルドする設定 * ビルド時にBabelifyを使うようにする設定 * プラグインとしてpower-assert化+ES5化+React化する設定 * ...etc

などなどをよしなにしている。

変更検知の設定も入れているのでこちらもmake tests同様ファイルの変更を検知して勝手にテストが回ってくれる。

ブラウザの指定としてChrome決め打ちで今回は雑に設定したので、Chromeが使える環境じゃないと動かない。

ちゃんとするならデフォルトは指定せずにコマンド実行時にオプションで渡すのかな?

動作サーバー構築

make server PORT=xxxx (default: 3000)

watchifyを使ってファイルの変更を検知してよしなに自動ビルドしつつ、browser-syncを使ってpublicディレクトリ下にサーバーを立てている。

PORTのデフォルトは3000番のようだけど変えたい場合もあったので--portオプションを通すようにした。

雑に&つなぎで実行してるけどもう少し上手くやれるかな。Foremanでもこしらえればよいかな?

メモ

今回ので学んだなんとなくの所感。

Mocha

JavaScriptのテスティングフレームワーク

power-assert

assertにすべての情熱を注いでassertが落ちたときにわかりやすい情報を表示してくれるテストツール

「とりあえずassertだけ使えばOK」っていうスタンスにもってけて学習コストも少なくなって素晴らしい!

Karma

複数の実際のブラウザでテストが行えるテストランナーツール

「実際のブラウザだと正しく動きませんでしたー!ババーン!」みたいな自体になりにくくなる

KarmaでMochaなど諸々を包んでよしなに状態で実際のブラウザでのテストを走らせられるようにできる。

Browserify

モジュール感の依存解決やファイルの結合を行うためのビルドツール

Nods.jsのモジュールをブラウザでも、といったことがもともとの内容だったけど最近は専らビルドツール側としてメリットからの登用が多い様子。(始めたばかりなので歴史はあまりわかっていない)

「いっぱいjsのファイルがあるけども、とりあえずバンっとビルドして一纏めにしてあげるよ!あとは出来上がった1ファイルをhtmlで読み込んであげるだけだよ!楽ちんでしょ!」みたいなノリの需要と思っているw

Babelify

Browserifyするときによしなにバベって上げる君。

※ バベる・・・「ES6で書かれていたりReactで書かれていたりするのをよしなに普通の環境で動くようにしてあげる」的な意味と思っている

babel-preset-es2015

「ES6で書かれているのをよしなに普通の環境で動くようにしてあげる」君

babel-preset-react

「Reactで書かれているのをよしなに普通の環境で動くようにしてあげる」君

browser-sync

「変更を検知してブラウザ更新もよしなにしてくれる」君

指定したポートにローカルサーバーと立ててくれて、そこで動作確認をできる

ファイルを更新してブラウザを見たらもう反映されてる!みたいな感じ

また、いろいろなタブだったりブラウザだったりを起動して立てたサーバーにアクセスしてても全てよしなにブラウザ更新をかけてくれる

おまけにbrowser-sync用の管理画面も立ててくれていて、そこで現在の接続数だったり、通信速度の制限をかけてどうなるかを見たり、といったことができる。

localhost:3000 にて画面が表示されるので動作を確認して、localhost:3001で管理画面を表示していろいろいじってみたり、といった使い方ができる。

ただ、今回触った感じだとパット見「変更を検知した時にビルドをしてブラウザ更新までよしなにしてくれる」みたいなとこまではできなさそうだったので、次にメモするWatchifyの方向からサポートした。

Watchify

「変更を検知した時にビルドをしてくれる」君

変更を検知してBrowserifyを走らせられる感じ。

これがあればまぁ開発時は手動ビルドすることはないんじゃないかなと思った。

デプロイの時とかは明示的にBrowserifyでビルドしてぽん起きデプロイとかになるのかな?

browser-syncの時に書いたように今回はWatchify+browser-syncで「変更を検知した時にビルドをしてブラウザ更新までよしなにしてくれる」機構を作った。

けどこれbrowser-syncの方でよしなにできそうだな〜できないのかな〜なんて思いつつw

所感

とりあえず今まで全然わかってなかったライブラリ周りに触れて実際に動かせてなんとなくはわかったので良かった!

Herokuで超絶簡単に15秒で管理画面を作る[Heroku][Adminium]

明けましておめでとうございます(遅い)

一発目なので軽めのTipsから。

年末から完全趣味のサービスを動かしてます。

my-chunithm.net

「Herokuで動かしている趣味サービスの管理画面欲しいけど面倒だな〜どうしようかな〜」とか思って色々探していたらすごい楽ちんに適当な管理画面が出来たのでメモとして。

全然他の記事等が見つからなかったので(特に日本語は皆無)w

elements.heroku.com

https://s3.amazonaws.com/assets.heroku.com/addons.heroku.com/screenshots/57/medium.png?1448987936

手順なんてほとんどなく、普通に先ほどのURLをクリックして、HerokuのAdd-onとして登録したらもう普通に使えちゃいます。

「管理画面をアプリケーション側で用意するのもなぁ〜」みたいに思った方には是非おすすめです。

基本はHerokuらしく無料で使えます。

  • 基本的なCRUD機能
  • 関連テーブルの任意のカラム表示
  • データインポート機能
  • データエクスポート機能
  • 各種ソート・絞込
  • データのグラフ描画
    • Time Chart
    • Pie Chart
  • データの統計情報表示
  • 各種検索機能
  • etc...

などなど、基本的な機能はぱぱっと揃ってとてもいい感じです。

アプリに全く手を入れずに瞬時に管理画面が手に入るのはとても良いですね。

趣味アプリだと特にこれくらいの簡単な管理画面でも事足りるので、大満足です!

ただし料金設定は結構強めで、無料だと Admin Userは一人のみ、管理画面対象にするテーブルは5テーブルまで という感じになってます。5テーブル...ウッ...

今回の僕の用途だと5テーブル内に収まっているので良いのですが結構引っかかるパターンも出てきそうですね。

次のプランの$10/monthだとテーブル数が無制限になるのでだいぶ良くなりそうです。

まずはお試しで触って見る分には申し分ないAdd-onだと感じたので是非遊んでみてください!

新卒1~2年目として過ごした2015年エンジニア業を振り返るぞい[振り返り][お疲れ様でした]

早いもので2015年も終わってしまう...w

今年は(今年も?)結構色々あったかなと思うので、忘れないようにざっと振り返ってみる。

つらつらと書いただけなのでまとまりとか学びとかないけどまぁブログだし良いよね!w

みだし

新年早々突然任されたリーダー業

新年明けましておめでとう空気もまだ残っていた1月始め、突然とあるプロジェクトのリードエンジニアを任されるなどしたw

なかなか激動のスタートだった気がするw

正直全くそういったたぐいの動きを今までの人生でしたことはなかったので、不安や戸惑いでいっぱいだったけど、「まぁ自分なりに頭を使って動いていい感じに着地できるように頑張ってみます。都度色々相談とか質問とかさせてくださいw」と先輩に伝えた記憶がある。

この経験はやっぱりめちゃくちゃためになって、主に全体を見る力、また全体を繋ぎ合わせるために動く力がパワーアップした気がする。

営業サイドの人だったり、パートナー企業の人だったり、あとは社内の他部署の人とのやりとりだったり、プロジェクトを進めていくうえで必要になってくる開発以外のタスクも色々触れる事が出来て、あんまり馴染みがなかったけど今ではその辺りも足の運びがだいぶ軽くなった気がする。

(プロジェクトにアサインされていたエンジニアは僕含めで2人だったのでもちろん開発力もグッともう一歩伸びたと思うw)

この時使っていたのは言語はPHPフレームワークはSymfony2。新卒で入社して7月頃からSymfony2を使い始めていたので、1年半程大変にお世話になりました。

Symfony2、本当いいフレームワークだと思いますw

1月から諸々見積もりだったり準備段階を始めて、本格的に開発を始めたのが2月頃から。そして7月にリリース完了して、今のところ特段大きな事故もなくあまり世話のかからないシステムとして動いてくれている。

とりあえずはプロジェクトは成功、ということですごくホッともしたし、自信もちょっと着いたと思う:)

とはいえでファーストリリースめがけてある程度は取捨選択を行ってきたので、その「捨てた」部分の継続的な回収をしていきたいところ。

新卒氏の配属

4月になって、上で書いたプロジェクトを進めている中、新卒氏が僕のいる部署にも入ってきた。エンジニアは一人。

そしてその新卒氏は僕のプロジェクトへ配属&僕が指導係(?)となった。

わかってはいたけれど、やはり実際に配属されてくると「あー2年目だなぁw」という実感も湧いてきたw

そんな新卒氏、僕は大卒、彼は院卒で、年齢的には1個下になるので若干変な感覚はあったけれど、まぁなるべくそこは気にしないようにw

新卒氏とのコミュニケーションで気をつけていたこと

とにかく質問・相談しやすい環境を作ること、話す垣根をなるべく低くすることを意識してみた。

聞いてくれたら腹落ちするまで付き合う。「今忙しいから後で」みたいなコミュニケーションは取らない。

夕会など軽いコミュニケーションの場を設けてそこでヒアリングしてみたり。

やっぱり教える側から一方的にぶつけても響かないし、身につかないと思うので、一度自分事として考えてみて、興味を持った上で話し合いに進むのが効率よい吸収の仕方かなぁと思うので、その「自分事として考えたけどなるほどわからん」となってからの初動を早くしてあげたいという意図で、「とにかく質問・相談しやすい環境を作ること」は大事にしてたし、今もしている。

(僕自身、あんまりおしゃべりなタイプの人間ではないのでそういう関係値を作れているか若干不安だけど!w少なくとも話しづらい雰囲気をまとった先輩にみられてはいないんじゃないかな!w)

また、意思を伝えてもらうことも大事だと考えているので、「どうだと思う?」のような自分で考えてもらうようなことも意識的にやっていたと思う。

例えば設計だったり実装だったりの相談をする時、「自分でメリット・デメリットを考えた結果、こうしたら良いんじゃないか、と思って選択しました」みたいなのをちゃんと伝えてくれて、それが他者の目から見ても良さそうに見えるならそれは正解だと思うので、そういったコミュニケーションが取れるようになってほしいな、と思って。

正直新卒氏は、こういった「自分から質問する」だったり「自分で考えて選択して実行する」みたいな「自分駆動」の動きが苦手な所があるように感じました。

だけど、こういったコミュニケーションを取っていったことで段々と「自分で考えてる」感じが見て取れるようになってきて、発言に説得力が出てきました最近。良かった良かった。

「こういうケースは大丈夫?」みたいな投げかけをちょっと他の人にされると意思がぐらついて行動がちぐはぐになるケースが結構見られたのだけど、最近は「あーそれも考えたんですけど〇〇だなぁと思って」みたいな返しも増えてきて、頼もしくなってきました。引き続き期待してます!!1

エンジニアインターンシップへサポーターとして参加

弊社、毎年8月あたりに3週間程の割と長い開発インターンシップがあるのですが、それのサポーターをさせてもらってました。

このインターンシップは僕も学生の時に参加させてもらっていて、かなり人生を変えてくれたインターンです。

大学3年までほぼプログラミングをまともにやってこなかった勢の僕が、運良く参加させてもらえて、開発の楽しさを身を持って味あわせてくれて、本当になんとなく「SIerかな〜」なんて仕事を考えていたのをゴリゴリ開発する方に完全シフトさせてくれた、本当に思い出深いインターンですw

今回サポーターとして学生さんたちのパワーあふれる姿を見て、すごく懐かしくなったし、「ものづくり」の楽しさを再認識させて貰えました。ありがとう!

ギョームのプログラミングももちろん楽しい。けどこういった純粋なものづくりって最近あんまり出来ていないなーと考えさせられ。

あの時からきっかけにちょっとずつ趣味プログラミングの時間を増やすようにしました。

毎日コミット活動

インターンで再認識したものづくりの楽しさから、趣味プログラミングの時間を増やしていこうと思っていた僕に拍車をかけたのが以前ブログも書いたコレでした。

shiro-goma.hatenablog.com

毎日本当にちょっとでも良いからプログラミングする習慣をつける。そんな活動を始めました。

これを始められて、かつ継続できているのは本当に新卒氏のおかげ!ありがとう!!

f:id:shiro_goma:20151231012028p:plain

現在継続85日。頑張るぞい

毎日コミット活動で出来たこと

振り返りの一つとして。

自分のスタイル的なところの変化で言うと、

  • プログラミングの習慣
  • 基本的にpublicにして公開するクセ

この辺りが板についてきました。

新しく学べたことでいうと、この9-12月は全くわからなかったjs界隈に主に触れ始められました。

振り返ると片手間ながらそこそこ実りがあって良かった!という気持ち。

まだjs界隈のテスト書けてなくて糞なので、そのあたりも今後この活動を通じて吸収していきたい気持ち。

是非続けてやっていきたい:)

PHPカンファレンス2015登壇

とてもとても思い出深く残った体験。本当にありがとうございました!

以前ブログにも書きました。

shiro-goma.hatenablog.com

上記記事にもある通り、PHPカンファレンスは「大学3年の時に初めて行ったカンファレンス」だったんですよね。

インターンしかり、カンファレンス登壇しかり、2015年は大学3年の時の思い出深いイベントの再出現、みたいなところがあって、その頃よりちょっとステップアップした自分を実感することもできて、なんだか不思議な気持ちですw

Railsプロダクトへのアサイン

先に書いたリーダー業が一段落した後、僕のいる部署で開発が行われているプロダクトが若干進捗がよろしくないということで、部署内異動ががが。

そのプロダクトがRailsプロダクトで、この3ヶ月ほどはRailsも書いてた人生だった。

今までRubyは割と好みで使っていましたが、Railsは初めてだったので新鮮でした。

RailsとSymfony2と、割と対極的な2大フレームワークを触ることが出来て、両者のメリットデメリットを噛み締めながら開発出来たのはすごく良い経験w

本当に良さのポイントが各々違って面白いw

年明け3月くらいまではRailsを書くかなと思うけど、だいぶ業務ドメインしかりRailsしかりわかっては来て、スピードが乗ってきた感じもあるので年明け後も引き続き頑張って行きたい所存。

おわり

良い一年でした!!

良いお年を :)

Advent Calendarのお供にどうぞ

超小さな小ネタをw(手抜きではない!手抜きではないぞ!!)

twitter.com

片っ端から世に広がるAdvent Calendarをつぶやきまくりにまくってくれるアカウント!!!w

もしかしたらある程度選別能力もあるのかもだけどw

その数なんと12/11 19:00現在で15000ツイート超!w

Qiitaしかまだ確認出来てないけど、ADVENTARの方も見てるのかな?

(追記: とか書いてたらADVENTAR方面のブログも回ってきた。 うぇーい)

とりあえず、このアカウントさえフォローすれば思いっきりAdvent Calendarを満喫できます!!w

もちろんフォローするとうるさいので、フォローせずにまとまって一気に見るとかもありですね。

twitter経由で見れるのは良いですね〜。

思いっきり受動的な楽しみ方ですがいかがでしょうかw

React.js+Redux+Bootstrapで簡単にboilerplateを作ってみた[React][Redux][Bootstrap][ES6]

お勉強の意味合い強めで、React+Redux+Bootstrapを合わせて一つ簡単な雛形のようなアプリケーションを作った。

github.com

JSはこれまでだいぶ疎くて、最近やっと勉強を始めた感じだけど、ES6だと割とすっと入ってくる感じがあってよいですね。

ちょっとずつ書けるようになってきていて楽しい!✌( ◔౪◔)✌

ここまで、ちょっと前にWebpackだったり、Babel、一人React.jsと、少しJS周りを中心に勉強をしてきて、勉強の復習だったりアウトプットの意味合いで一つサンプルアプリケーションを作ってみました。

内容としては簡単なCounterアプリで、基本的にはRedux本家リポジトリ内においてあったexampleを改造して作った感じ。

github.com

機能としては、

  • increment
  • decrement
  • 奇数の時のみincrement
  • 非同期処理で少し遅らせてからincrement

を行えるボタンをReact+Reduxで実装しました。

んで味気ないボタン群をちょっとでも美味しそうにすべく安定のBootstrapを使いました。

また、以下のリポジトリ等を参考にしつつ、簡単だけれど少しexampleのCounterアプリよりもディレクトリ構造を細かく切るようにしてみました。

github.com

.
├── actions
├── components
├── constants
├── containers
├── index.html
├── index.js
├── node_modules
├── package.json
├── reducers
├── server.js
├── store
├── test
└── webpack.config.js

とりあえず今回作ったアプリケーションをひな形として使い始めれば、環境に関してはnpm installで整うし、npm startでサーバー立ち上がってブラウザで動作確認すぐできるし、一旦ディレクトリ構造で悩んだりはせずコードを書いて動くものを作っていくことに専念はできそうなので、とりあえず諸々は気にせずこれを使ってものづくりをしていけそう。

今後破綻する、とか全然ありそうだけどまずは現状初心者なのでコードを書く、という方向に意識を向けられるように下準備をまずやったイメージ。

また、環境周り正直理解しきれていないところもあるので、(server.jsとか自分で書いてないし)引き続き仲良く過ごしながらちょっとずつJSに慣れていって理解を深めていきたい。

とりあえずはReact+Reduxで作っていくときの処理の流れは下の図で見ていたイメージと実装のイメージが今回のサンプルを作ったことでだいぶ一致してきたので、とても大きな収穫だったかなと思います!

最初はfluxの基本的な図を見つつ、reduxの方の図も見始め、みたいな感じで理解を進めた記憶。

https://raw.githubusercontent.com/facebook/flux/master/docs/img/flux-diagram-white-background.png

http://staltz.com/img/flux-unidir-ui-arch.jpg

http://staltz.com/img/redux-unidir-ui-arch.jpg

もし僕のようにこの辺り学んでみたいな〜とか思っている人は雛形のアプリケーションを作ってみるの結構おすすめかも知れないです。

当たり前のようにもうES6が使われているので、そのあたりもまるっと覚えられますw

Redux DevToolsについて

処理中の状態の変化などがわかる、便利そうなツールがあるようです。

github.com

めっちゃ良さそうだなぁ〜良いな〜とか思って入れようかと思っていたのですが、なんと今回試していたバージョンのReact0.14系 のサポートができていないようで、動作しませんでしたw

React 0.14 Support

React 0.14 support is coming in the next branch. Helps us test it to get it sooner

next branchで対応中だから待ってろ、みたいな感じでしたw

他の人からもいろいろとPRが来ているようでした。(nextブランチで対応しているから却下されていましたが)

ということもあり、一旦今回作った雛形には入れないことにしました。

先で紹介したreact-redux-starter-kitではパッチを当てるような形で使えるようにしていましたが、入れるかどうかは開発をし始めてみてから考えようかなと。

今後引き続きこのboilerplateを使って行って、自分でちまちまとアップデートしていきたいな。

今とかテストは一旦全然考えられてないし。

あとはJS界隈どういった構成にしたらいいかとかが本当にデファクトスタンダードのようなものがあるのかないのかよくわからない状態でとても初心者には辛い(ハードルが高い)ので、「今はこうしたらとりあえず良い」みたいなのがまとまってわかるとすごく嬉しい...

今のところコード書くとかよりもそういった「常識」とか「セオリー」みたいなのが全然見えないのが苦戦ポイントかもしれない。

とりあえずまだ立ち回りが鈍いので積極的に使っていって手に馴染ませていくぞ!!!11とりあえずは良い一歩!!!

iMacを購入したのでAnsibleを用いてMacの環境構築を自動化した[Mac][Ansible][環境構築]

先日、割と最近発表があったばかりの新型iMacを購入しました。

iMac - Apple(日本)

物理的に画面がでかい!!!

文字サイズをぐんぐん小さくしていっても全然くっきり見えるので更に画面がでかく見える!!!

作業効率上がる!!捗る!!!

ディスプレイとOSが一体なので異常に省スペースでデスクまわりがすっきり!!!

いや〜さすがに流石にお値段貼りましたが良い買い物ができたかなと思います。

ちなみにAppleローンを活用して買いました。

12回分割まで金利無しなので便利なので「ほしいけど持ち合わせが...」みたいな方はぜひご検討を。

Appleローン分割金利0%キャンペーン - Apple (日本)

はい、宣伝タイムは終了ですw

さて、iMacを買いましたので、汚れの知らないまっさらなMacが手に入りました。

なので以前エントリを書いた、Ansibleを使ってMacの環境構築 をしてみました!

shiro-goma.hatenablog.com

基本的な導入の流れは以前@t_wadaさんが書かれていた記事のとおりです。

t-wada.hatenablog.jp

あれをベースに自分が入れたいアプリをbrew searchbrew casc searchで調べつつ入れたり、みたいな感じですね。

正直本当に記事の通りに進むし特につまる所もなくさくさく環境構築できたので超絶楽ちんでした!

これは使わない手はないのでは!?といった感じ。

やはり良いなぁと感じたところは、

  • ファイルにまとまるので管理しやすい
  • パスワードを求められたりはするものの基本ほぼ自動的にインストールが進むので楽
    • 実際にインストール作業を走らせながら温泉に行ってきましたw
  • プロビジョニングツールらしくrerunもいい感じにできる
  • Ansible自体が普通にHomebrewにもHomebrew Caskにも対応できているので特段めんどくさい準備がない

あたりでしょうか。僕は以前このMacの環境構築をAnsibleで試してみるのを通じてAnsibleに入門してみたのでいろいろ構成やら構文やらについて学びましたが、ぶっちゃけ「とりあえずMacの環境構築が楽にしたい!」という方ならぶっちゃけ学習コスト0で見よう見まねでできると思います。

  • homebrew_packagesにhomebrewで入れたいもの並べる
  • homebrew_cask_packagesにhomebrew-caskで入れたいもの並べる

だけなので本当w

また、今回iMacを購入したので長らく使っていたMacBook Air (11-inch, Mid 2012)も一回クリーンインストールしなおしました。

それによってまたもう1つまっさらなMacが手に入ったので、そちらにも今回作ったプロビジョニング用のファイルを適用して全く同じ環境が超簡単に整いました:)

使用感とても良いので、AnsibleもiMacも(←)、ぜひ試してみてはと思います!

今回作成したプロビジョニング用のファイル郡をGitHubにも置いておいたので、ここからダウンロードすればいつでも自分の環境が手に入ります。わーい。

github.com