今日のつちや

田舎から元気に技術ネタと雑記を投稿します

技術書典4で「Auth0でつくる認証付きSPA」本を頒布します

こんにちは、@corocn です。

技術書典4の公式でもサークルチェックができるようになったので、改めて告知いたします。

弊サークル「ころころぶっくす」は "Auth0"でつくる認証付きSPA本を頒布します。 techbookfest.org

場所は お06です。入口入ってすぐ右側の壁。Wantedly執筆部さんの隣です。

f:id:corocn:20180401230910p:plain

これは何の本ですか?

  • Auth0っていう認証サービスを使って
  • SPAにログインフォームを組み込んで
  • Googleアカウントでログインして
  • 発行されたトークンでセキュアなAPIサーバーにアクセスする

までを実装してみる本です。 フロントからサーバーサイドまで触るのでちょっと大変かもしれませんが、 とても簡単に組み込めることを体験してください。

Auth0って?

クラウド認証プラットフォームです。

Single Sign On & Token Based Authentication - Auth0

面倒な認証やユーザーを管理してくれます。 OpenID Connectに対応し、JSON Web Token(JWT)を用いた認証の仕組みを提供してくれます。

フロントエンドは何で書くの?

SPA、フロントエンドのアーキテクチャの1つですね。 今回はSPAの作り方を解説する本ではないので、 そのへんをすっ飛ばすためにNuxt.jsを使います。

Nuxt.js - ユニバーサル Vue.js アプリケーション

めっちゃ便利なんでオススメ。 Auth0本だ!と言いながら、Nuxt.jsの良さも伝えたかったよくばりおじさんです。

他サークルでもNuxt本が出てるはずなので要チェック。私も買いに行く。

バックエンドは何で書くの?

サーバーレスが流行っている今日このごろですが、 本書ではRuby on RailsAPIモードを使います。 認証と聞くとDeviseやSorceryを思い浮かべる方も多いと思いますが、今回は使いません。 KnockってGem使います。DBがシンプルになります。最高。

nsarno/knock: Seamless JWT authentication for Rails API

まとめ

ぜひブースに立ち寄ってください! 初参加でどれだけ刷ればいいかも分かってないので、 購入予定の方はサークルチェックして頂けると助かります!

技術書典4に向けて個人名刺兼ステッカーを作った

技術書典で個人名刺を用意しておきたくて作りました。

シールも作りたいなぁと思っていたよくばり者なので、シールベースで名刺サイズ(91x55)にしてみました。 Design&Adobeスキルゼロの私でもなんとか作れたので紹介。

きっかけ

f:id:corocn:20180325202719p:plain:w500

おすすめされたので!

印刷所

印刷所によってテンプレートが異なるので、先に印刷所を決めてます。 今回は教えてもらったアドプリントさんのマルチタイプシールを使ってます。

http://www.adprint.jp/Product/Intro/ss.aspx?Code=SS

コート 77kg ラミネート有(55 X 91mm) で注文しました。

切り抜き1箇所で100枚での注文で、3860円+送料500円 = 4360円です。 2箇所だと4300円+送料になりますね。 全印刷所比較してないんですけど、他のところはもっと高かったですね。

注文から到着までですが、1週間もかからず届きました。

使ったツール

Adobe Illustrator CC

印刷所のテンプレートはAI形式が多いんですよね。 技術書典の表紙作成とクソコラ作るためにフォトショを買ったんですが、 常用しないし、そこそこのお値段なので、1週間トライアルで全てすませちゃいました。

後述の理由により追加発注したんですが、トライアル期間で完結してます。なんかごめん。 次作成が必要なったら課金します。

Vectorizer

Online Image Vectorizer

普段使ってるアイコンがラスター画像しかなくて粗さが心配だったので、 上記ツールでラスター→ベクター変換しました。(よくよく考えたらイラレでできたのでは・・・?)

f:id:corocn:20180325203341p:plain

そこそこ綺麗になったから細かいことはいいや。

気をつけること

入稿前にチェックを読んでおくといいです。

スペルミス等もチェックしておきましょう。

http://www.adprint.jp/dataintro/basic.aspx

やっちまったこと

f:id:corocn:20180325203721p:plain

Engineerだったわ・・・。 醜態を晒す前に見つかってよかった(もう晒したけど)

これが理由で再入稿しました。 ついでに名前の部分も切り取れるようにした。

f:id:corocn:20180325222426p:plain:w200

こんな感じになっとります。

まとめ

普通の名刺より値段がはりますが、個別に作らなくていいのは楽でした。

f:id:corocn:20180325222128p:plain:w300

岐阜市近郊のうまい飯 (2018/03/23 更新)

食べたいもの別、再訪したいうまい飯情報(自分用メモ)です。 お高い店はピックアップしてませんし、車の移動が前提です。インスタ映えよりうまさ重視。

美味しいお店があったら、@corocn までこっそり教えてください。

麻婆豆腐

中華楼 - 岐阜市その他/中華料理 [食べログ]

  • マジ絶品。辛めなので注意。
  • そのへんの台湾料理やの麻婆豆腐とは違って本格的。
  • 担々麺も美味かった。

台湾まぜそば

台湾ラーメン大吉 - 西岐阜/ラーメン [食べログ]

  • 有名店。並ぶ。
  • 台湾ラーメンのほうが有名だけど、台湾まぜそばのほうが美味いと思う。
  • こちらも辛めなので注意。

味噌ラーメン

壱正 岐阜店 (イチマサ) - 岐阜/ラーメン [食べログ]

  • 普通のラーメン屋だけど、みその種類が選べて楽しい。
  • 味もいい。たまに無性に食いたくなる。
  • 店内で待てるし、スペース広くて良い。

もつ鍋

やっぱりラーメン黒野 - 名鉄岐阜/ラーメン [食べログ]

  • ラーメン屋みたいな名前だけど、もつ鍋が有名。
  • 安くて美味い。ドテ煮もおすすめ。
  • 夜しかやってない。

大衆中華

サンコック - 東大垣/中華料理 [食べログ]

  • ファミリー向け中華料理。安定している。
  • セットメニューの組み合わせが豊富。

カレー

カレーの文化屋食堂 - 名鉄岐阜/インドカレー [食べログ]

  • 日本風カレーともインドカレーとも言えない分類のカレー。
  • ガラムガラムガラム(キーマ風)が美味い。ファイナルカレーに近い。
  • 覚醒カシミールは人を選びそう。

ちゃんぽん

大光楼 墨俣店 - 東大垣/ちゃんぽん [食べログ]

  • にんにくたっぷりのベストちゃんぽん(旧:ベトコンちゃんぽん)がオススメ。
  • うまい。量も多い。

カジュアルフレンチ

Restaurant Venus & Mars (レストラン ビーナス&マーズ) - 西岐阜/フレンチ [食べログ]

  • 昼にランチで行くのがオススメ。かしこまらなくていいから楽。
  • キッシュがめちゃめちゃ美味い。追加で課金しても食べるべき。持ち帰りもできる。
  • シェフのおっちゃんが楽しい。

回転寿司

あみもとの里 かがしま - 西岐阜/回転寿司 [食べログ]

  • 穴子が絶品。ネタがでかく、450円で2本ついてくる。神か。
  • 下手に100円寿司いくならこっちのほうが良い。
  • コスパ最強。

とんかつ、味噌カツ

嬉しや - 西岐阜/とんかつ [食べログ]

  • 肉厚のみそかつが美味かった。
  • 豚の角煮もGOOD

洋食全般

キッチン 光陽亭 (KITCHEN Kouyoutei) - 岐阜市その他/洋食 [食べログ]

  • カジュアルイタリアン
  • ハンバーグドリアが美味かった

創作居酒屋

ビストロマルコ - 田神/居酒屋 [食べログ]

  • こじんまりとしたおしゃれな居酒屋。
  • こだわりの日本酒が置いてある。
  • 2人?でやってるので、最初にすべての料理から注文を組み立てなきゃいけないのが難しい。
  • しかしうまい。

ピザ

ダ ジェンナーロ (DA GENNARO) - 田神/ピザ [食べログ]

  • ピザ専門店だけあってピザは激ウマ。
  • オシャレな店なので気軽に行けない。入り口がどこか分からなくて毎回戸惑う。

パスタ

教えて!

そば

更科が有名だけど、そうじゃない、そうじゃないんだ。という気持ち。 美味いんだけどね。

教えて!

焼肉

美味いところはあるけどお高いし、 車走らせて養老まで行ったほうが楽しい。

教えて!

餃子

教えて!

ステーキ

今度21号沿いにいきなりステーキができる。

教えて!

Webpack 4.0.0 の Zero Configuration を試す

Webpack4.0.0が出てました。

github.com

さっそくZero Configurationを試してみます。 ウェブパック詳しくないマンなので、これでいいのか良く分からんですが・・・。

install

webpackとwebpack-cliを入れる

yarn add webpack webpack-cli

mode

modeオプションでdevelopmentとproductionを切り替えることができる

それぞれいい感じに設定してくれるみたい

package.jsonにscriptsを足す

  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },

srcとdist

デフォルトでは src/index.js に置くと、dist/main.jsに吐き出されるようになってる

src/index.jsに以下のように書いて

const test = () => console.log("Hello");
test();

ビルドする

yarn dev

dist/main.js見るとアローがそのまんまだった。 この時点ではbabel-loaderは適用されていないらしい。

バベる

.babelrc が 必要らしい

babelを入れる

yarn add babel-core babel-loader babel-preset-env

.babelrcを作る

{
    "presets": ["env"]
}

--module-bindオプションによって、*.jsはbabel-loaderを使用するよう指定できる

  "scripts": {
    "dev": "webpack --mode development --module-bind js=babel-loader",
    "build": "webpack --mode production --module-bind js=babel-loader"
  },

もっかいビルドする

yarn dev

無事バベれたことを確認。

感想

  • デフォルトでバベって欲しい!
  • 速さは良く分からない!

参考

https://www.valentinog.com/blog/webpack-4-tutorial/

技術書典4で認証付SPAの薄い本を書きます

技術書典4当選しました!! やったー!!

f:id:corocn:20180204205732p:plain

何書くか

個人開発でAuth0を使っていたら、組込が簡単で良かったんで、 Auth0でJWTを使ってSPAとバックエンドを繋ぐ薄い本を書こうと思います。

キーワード的には以下

  • Nuxt.js (Vue.js)
  • Rails API Mode + Knock
  • Auth0
  • Heroku

内容は、フロントエンドもくもく会 - 新年LT大会 で話した内容を細かく解説するような形です。

f:id:corocn:20180204205603p:plain

岐阜住みなので、名古屋でもくもく執筆会やります。 会場はMisocaのセミナールームを借りる予定です。

さあがんばるぞ!

技術書典4で同人誌を出すために「ワンストップ!技術同人誌を作ろう」を読んだ(良かった)

@corocn ですこんにちは。

技術書典4 の申込みが始まってますね。

今年は技術系同人誌を書いてアウトプットすることを目標に掲げたのですが、同人誌を書いたことのない私にとっては、何をやっていいか一切分からない状態です。(出版に関する知識がマジで無い)

そこで出会ったのがこの本

ワンストップ!技術同人誌を書こう - oyakata - BOOTH

コミックマーケット93で頒布されたやつですね。BOOTHで電子版を買いました。 結論から言うと最高だったので、初めて書くぞ!って人は読むと良いと思います。

200ページぐらいあるので、ざっと流し読みして、あーこんなことを気に留めておく必要があるんだーなるほどー!ぐらいのノリで読んで、詰まったときにじっくり中身を読むのが良さそうです。

以下ざっと読んだ感想。

感想

  • 当落関係なく書くつもりでやる。落ちたら委託すればいい。アウトプットに意味がある。
  • 印刷方法にはオフセットとオンデマンドがあるが、初めての人はオンデマンドで出すのが良さそう。
  • サイズはB5が主流。
  • Macヒラギノは商用利用可。
  • 原稿はGithubで管理すると良さそう。
  • 執筆ツールは色々あるが、Re:VIEW が良さげ。
  • 出力はPDF前提でやると、電子書籍で配布するのも捗りそう。
  • 表紙はオマージュ系、イラスト系、フリー素材系に別れそう。
    • たまたまお願いできる人がいたのでイラスト系にする。
    • 頼める人がいなかったらフリー素材にしたと思う。
  • 表紙はKeynoteで作るのが良さそう。
    • Keynoteは最高の作画ツール。
  • 画像は印刷用に300dpi以上で出すが、電子書籍はサイズが大きくなるので、解像度を少し下げる。
  • 確認用の連番としてノンブルというものがある。
  • ページ数は4の倍数にすべし。
  • プリンターはあったほうがいい。
    • 以前会社の人と話してて、「最近プリンターなんて必要なくない?」なんて言ってすいませんでした。要るわ。
  • PDFの入稿は同人誌業界ではマイナーだけど、技術系だと多いみたい。
  • トンボ・塗りたし。 指定の塗りたしを含めた「正しい」PDFの入稿が必要。
  • 横書きの技術書は左綴じ。
  • CMYK形式での変換を行って入稿するのが原則。
  • 直接搬入が一番楽。
  • ポスター作ったほうがいい。キンコーズなどで作れる。
  • 早割を締め切りにする。完成形の出力まで1回通しでやってみておくのが良い。
  • 当時は2万円分ぐらいを両替して持ち込む。必要なものの確認もスケジュールに含める。
  • 個人名刺を作らねばという気持ち。
  • 電子決済の話がないように思えたので、あとで調べておきたい。何が良いんだ?

上記トピックでも足りてないと思うので、スケジュールをはやめに決めたいですね。で、スケジュールを決めるためには印刷所の締め切りを考慮する必要があるので、まずは印刷所を決めようと思います。技術書典との連携が厚いところを選ぶつもりです。

これも大事だよってのがあれば、教えて欲しさ。 あとは会社の人の出版経験があるから、頼らせて貰うつもり。

以上、参考になれば!

追記

https://techbookfest.org/event/tbf04#guide によると

日光企画、ねこのしっぽ利用の場合、印刷所からの直接搬入が可能です。

とのことなので、2択な気がしてる。

2017の振り返り

新卒で就職したコッテコテの古き良き日本大企業から転職を決意して、今日で1000日経過した。

f:id:corocn:20171231152733p:plain http://counting.hatelabo.jp/count/rk959zjrfl(勝手に作られてた)

転職した

これが一番大きなイベントだった。

東京の会社も色々見に行ったけど、人混みが辛くなったのと、色々あって結局地元に落ち着いた。

昔大手の転職サイトに登録したら、やたらと電話がかかってきて死ぬほどダルい思いをしたので、 今回はWantedlyのみで転職活動していた。

たまたま貰ったスカウトメールの会社を見たら、 Twitterでフォローしてた雪うさぎのアイコンの人がいて、興味を持った(Twitter初期からフォローしていたけど、一切面識が無かった)

採用プロセスがかなりユニークで、トントン拍子で入社することになった。 そしてMisocaというクラウド請求書の会社にいる。かなり働きやすい会社だと思う。社員も人格者が多い。

勉強した

残業ゼロで時間が取れるようになったので、気になっていた技術で遊んだ

Ruby, Rails

  • 実は今の会社に入るまでは、PHPがメインの開発言語だったので、少し業務でRailsを書いた程度だった。 (なんで採用してもらえたか謎だけど、Computer Scienceのバックグラウンドがあるのは大きいのだろうか。)
  • がっつりRubyを書くようになって、虜になった。
  • RailsはWebpackerがカオスなので、最近はNuxt.js + Rails API Modeが良いんじゃないかと思ってる。

JavaScript, Vue.js, Nuxt.js

  • モダンジャッバスクリプトのナウい書き方が未だに分からなくて未だに困惑している。
  • JavaScriptをビルドするのが辛い。型の無い言語をビルドするのに抵抗がある。
  • React+Reduxを触ってきたけど、Vueのほうがしっくりきていて、Nuxt.jsがマジで良い。

AWS

  • 業務でも使うので色々触った。
  • サービス増えすぎて追いかけるが大変ではあるが、テクニカルサポートが手厚くて便利。
  • BlackBelt Dojoを会社で実施してもらうと凄く捗る。
  • 細かく設定できる分、個人ベースでさっと使うのには向いてない感じはある。

勉強会

  • フロントエンドもくもく会に参加してて、運営を手伝わせて貰っている。
  • 年明けにはLT大会もあるので楽しみ。

来年

  • 前のめりでやっていく
  • 新しい言語を学ぶ(Kotlinあたり)
  • 本を書きたい(技術書店に出したい)
  • 結婚したいです

今年もお世話になりました。 来年もよろしくお願いします。