paranitips Never stop learning! がモットーのゆるふわエンジニアブログ 2020-09-04T18:06:20+09:00 paranishian Hatena::Blog hatenablog://blog/13208692334729896499 【月報】2020年8月の開発進捗や数字など hatenablog://entry/26006613623732807 2020-09-04T18:06:20+09:00 2020-09-04T18:10:00+09:00 ちょっと出遅れちゃったけど、、恒例の月報やっていくぞー!*1 お絵かきコラボ お絵かきコラボRYOSUKE HIRAMATSUゲーム無料apps.apple.com play.google.com 中国語対応を粛々とやっていた。 @himara2 の手腕によりiOSの対応が終わったので近々お披露目できるかも? そして、テレビ番組に取り上げられた!🎉 \個人開発アプリがテレビに出ます!/明日8月13日(木) 23時より、#スイモクチャンネル にて #お絵かきコラボ が取り上げられます!BSの放送に加え、TVerとYouTubeでの配信があるらしいです!✨トラウデン直美さん、藤井サチさんに遊んでも… <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20200904/20200904171632.png" alt="f:id:paranishian:20200904171632p:plain" title="f:id:paranishian:20200904171632p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>ちょっと出遅れちゃったけど、、恒例の月報やっていくぞー!<a href="#f-39b774af" name="fn-39b774af" title="先月も遅れてたな・・">*1</a></p> <h2>お絵かきコラボ</h2> <p><div class="itunes-embed freezed itunes-kind-software"><a href="https://apps.apple.com/jp/app/%E3%81%8A%E7%B5%B5%E3%81%8B%E3%81%8D%E3%82%B3%E3%83%A9%E3%83%9C/id1445350507?uo=4&at=10lncm" rel="nofollow" target="_blank"><img src="https://cdn.image.st-hatena.com/image/scale/95e45fb44cb74c100c55bab8604064c041ca8d46/enlarge=0;height=200;version=1;width=200/https%3A%2F%2Fis3-ssl.mzstatic.com%2Fimage%2Fthumb%2FPurple114%2Fv4%2Fae%2F3f%2Ff6%2Fae3ff670-a44f-e634-9110-62b4ac4ea21c%2Fsource%2F100x100bb.jpg" alt="お絵かきコラボ" title="お絵かきコラボ" class="itunes-embed-image"/></a><div class="itunes-embed-info"><p class="itunes-embed-title"><a href="https://apps.apple.com/jp/app/%E3%81%8A%E7%B5%B5%E3%81%8B%E3%81%8D%E3%82%B3%E3%83%A9%E3%83%9C/id1445350507?uo=4&at=10lncm" rel="nofollow" target="_blank">お絵かきコラボ</a></p><ul><li class="itunes-embed-artist">RYOSUKE HIRAMATSU</li><li class="itunes-embed-genre">ゲーム</li><li class="itunes-embed-price">無料</li><li class="itunes-embed-badge"><a href="https://apps.apple.com/jp/app/%E3%81%8A%E7%B5%B5%E3%81%8B%E3%81%8D%E3%82%B3%E3%83%A9%E3%83%9C/id1445350507?uo=4&at=10lncm" rel="nofollow" target="_blank"><img src="https://cdn.blog.st-hatena.com/images/theme/itunes/itunes-badge-appstore@2x.png" width="60px" height="15px" /></a></li></ul></div></div><cite class="hatena-citation"><a href="https://apps.apple.com/jp/app/%E3%81%8A%E7%B5%B5%E3%81%8B%E3%81%8D%E3%82%B3%E3%83%A9%E3%83%9C/id1445350507">apps.apple.com</a></cite> <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dkk.draw.together%26hl%3Dja" title="お絵かきコラボ - Google Play のアプリ" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://play.google.com/store/apps/details?id=kk.draw.together&hl=ja">play.google.com</a></cite></p> <p>中国語対応を粛々とやっていた。<br /> <a href="https://twitter.com/himara2">@himara2</a> の手腕により<a class="keyword" href="http://d.hatena.ne.jp/keyword/iOS">iOS</a>の対応が終わったので近々お披露目できるかも?</p> <p>そして、テレビ番組に取り上げられた!🎉</p> <p><blockquote data-conversation="none" class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">\個人開発アプリがテレビに出ます!/<br><br>明日8月13日(木) 23時より、<a href="https://twitter.com/hashtag/%E3%82%B9%E3%82%A4%E3%83%A2%E3%82%AF%E3%83%81%E3%83%A3%E3%83%B3%E3%83%8D%E3%83%AB?src=hash&amp;ref_src=twsrc%5Etfw">#スイモクチャンネル</a> にて <a href="https://twitter.com/hashtag/%E3%81%8A%E7%B5%B5%E3%81%8B%E3%81%8D%E3%82%B3%E3%83%A9%E3%83%9C?src=hash&amp;ref_src=twsrc%5Etfw">#お絵かきコラボ</a> が取り上げられます!BSの放送に加え、<a class="keyword" href="http://d.hatena.ne.jp/keyword/TVer">TVer</a>と<a class="keyword" href="http://d.hatena.ne.jp/keyword/YouTube">YouTube</a>での配信があるらしいです!✨<br><br><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C8%A5%E9%A5%A6%A5%C7%A5%F3%C4%BE%C8%FE">トラウデン直美</a>さん、藤井サチさんに遊んでもらえるのかな?たのしみー!!<a href="https://t.co/0WIEODbVwC">https://t.co/0WIEODbVwC</a></p>&mdash; にっしー🍵Engineer/Podcaster (@paranishian) <a href="https://twitter.com/paranishian/status/1293335927855566848?ref_src=twsrc%5Etfw">2020年8月11日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </p> <p>…が、思った以上に効果はなかった😂<br /> でもまあめちゃめちゃ楽しそうに遊んでくれてたので良かった良かった!</p> <p>久しぶりの特集追加ができて反応が上々だったので引き続き運用がんばっていきたい。</p> <p><blockquote data-conversation="none" class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">お絵かきコラボの最新の神レビュー置いておきますね😘 <a href="https://t.co/dIVqjzCO4K">pic.twitter.com/dIVqjzCO4K</a></p>&mdash; にっしー🍵個人開発/Podcaster (@paranishian) <a href="https://twitter.com/paranishian/status/1300429537960812546?ref_src=twsrc%5Etfw">2020年8月31日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </p> <p>あと、はじめて技術書典で合同誌を出す予定!楽しみ〜!<br /> <a href="https://twitter.com/nabettu">@nabettu</a>さんに大感謝!🙏</p> <p><blockquote data-conversation="none" class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/%E6%8A%80%E8%A1%93%E6%9B%B8%E5%85%B8?src=hash&amp;ref_src=twsrc%5Etfw">#技術書典</a> に向けて新刊の執筆を開始しました!<a href="https://twitter.com/hashtag/%E9%81%8B%E5%96%B6%E8%80%85%E3%82%AE%E3%83%AB%E3%83%89?src=hash&amp;ref_src=twsrc%5Etfw">#運営者ギルド</a> という個人開発者のコミュニティでゆる〜く「 <a href="https://twitter.com/hashtag/%E5%80%8B%E4%BA%BAWeb%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E6%A7%8B%E6%88%90%E4%BA%8B%E5%85%B8?src=hash&amp;ref_src=twsrc%5Etfw">#個人Webサービスシステム構成事典</a> 」という合同誌としてサービス概要や使用技術を図&amp;文章にして1サービス・アプリを1枚にまとめた本を作ります!<br>電子版のみ無料頒布の予定😤目標20サービス! <a href="https://t.co/7LyJLKyJjf">pic.twitter.com/7LyJLKyJjf</a></p>&mdash; nabettu🍲渡なべ達明 (@nabettu) <a href="https://twitter.com/nabettu/status/1296748491943768065?ref_src=twsrc%5Etfw">2020年8月21日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </p> <p>サークルページはこちら👇</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Ftechbookfest.org%2Fproduct%2F5203085915848704" title="#個人Webサービスシステム構成事典:ザ・シメサバズ" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://techbookfest.org/product/5203085915848704">techbookfest.org</a></cite></p> <h2><a class="keyword" href="http://d.hatena.ne.jp/keyword/Podcast">Podcast</a></h2> <p><div class="itunes-embed freezed itunes-kind-podcast"><a href="https://podcasts.apple.com/jp/podcast/%E3%82%88%E3%82%82%E3%82%84%E3%81%BEfm/id1470279033?uo=4&at=10lncm" rel="nofollow" target="_blank"><img src="https://cdn.image.st-hatena.com/image/scale/f7a76c5e8fbda1afb41fdd266d25e4f64eca89f3/enlarge=0;height=200;version=1;width=200/https%3A%2F%2Fis2-ssl.mzstatic.com%2Fimage%2Fthumb%2FPodcasts123%2Fv4%2Fb5%2Fa2%2Fb7%2Fb5a2b734-3e05-de25-0678-353f4e4cea15%2Fmza_12652309823570619646.jpg%2F100x100bb.jpg" alt="よもやまfm" title="よもやまfm" class="itunes-embed-image"/></a><div class="itunes-embed-info"><p class="itunes-embed-title"><a href="https://podcasts.apple.com/jp/podcast/%E3%82%88%E3%82%82%E3%82%84%E3%81%BEfm/id1470279033?uo=4&at=10lncm" rel="nofollow" target="_blank">よもやまfm</a></p><ul><li class="itunes-embed-artist">よもやまfm</li><li class="itunes-embed-genre">即興コメディ</li><li class="itunes-embed-price">¥0</li><li class="itunes-embed-badge"><a href="https://podcasts.apple.com/jp/podcast/%E3%82%88%E3%82%82%E3%82%84%E3%81%BEfm/id1470279033?uo=4&at=10lncm" rel="nofollow" target="_blank"><img src="https://cdn.blog.st-hatena.com/images/theme/itunes/itunes-badge-itunes@2x.png" width="44px" height="15px" /></a></li></ul></div></div><cite class="hatena-citation"><a href="https://podcasts.apple.com/jp/podcast/id1470279033">podcasts.apple.com</a></cite></p> <p>前月比 +1,700 再生くらい。<br /> マイクでうまく録音されてなかったり、編集データが吹っ飛んだりというトラブル続きで萎えぽよなこともあるけど、引き続きのんびりやっていこーっと。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20200904/20200904170423.png" alt="f:id:paranishian:20200904170423p:plain" title="f:id:paranishian:20200904170423p:plain" class="hatena-fotolife" itemprop="image"></span></p> <h2>新規事業</h2> <p>友人と始める新規事業の電話窓口を<a class="keyword" href="http://d.hatena.ne.jp/keyword/Amazon">Amazon</a> Connectで作った。<br /> 最初は人手が足りないので基本留守電にして録音内容をDiscordに通知してくれる。</p> <p><blockquote data-conversation="none" class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">少人数でもやっていけるようにCS基盤を<a class="keyword" href="http://d.hatena.ne.jp/keyword/Amazon">Amazon</a> Connectで作ってる。今回は録音機能を作りたいので<a class="keyword" href="http://d.hatena.ne.jp/keyword/Kinesis">Kinesis</a>使ってほげほげするけど、ぜんぜんわからんので苦しい・・&楽しい・・!!<br><br>録音はクラスメソッドさんの記事に大いに助けてもらえそうなので巨人の方に乗るぞっ<a href="https://t.co/Jv8OyOVky9">https://t.co/Jv8OyOVky9</a> <a href="https://t.co/LauI70YezK">pic.twitter.com/LauI70YezK</a></p>&mdash; にっしー🍵個人開発/Podcaster (@paranishian) <a href="https://twitter.com/paranishian/status/1294468245475344384?ref_src=twsrc%5Etfw">2020年8月15日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/AWS">AWS</a>の$300クレジットの審査も通過したし、しばらく無料枠でいけるはず!<br /> 巨人におんぶにだっこでやっていくぞー!!</p> <h2>その他</h2> <p>あとは、スタンディングデスクを<a class="keyword" href="http://d.hatena.ne.jp/keyword/DIY">DIY</a>したり、</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fparanishian.hateblo.jp%2Fentry%2F2020%2F09%2F01%2F080000" title="はじめてのDIYで最高のデスクを手に入れた - paranitips" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://paranishian.hateblo.jp/entry/2020/09/01/080000">paranishian.hateblo.jp</a></cite></p> <p>インターネットを有線化したりして仕事環境を整えたりした。</p> <p><blockquote data-conversation="none" class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">おうちの開発環境の有線化に成功した!<br>安定してこの速度を維持したい🙏 <a href="https://t.co/P0ZwlwEGZ6">pic.twitter.com/P0ZwlwEGZ6</a></p>&mdash; にっしー🍵Engineer/Podcaster (@paranishian) <a href="https://twitter.com/paranishian/status/1294199695200227328?ref_src=twsrc%5Etfw">2020年8月14日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </p> <h2>まとめ</h2> <p>8月は新しいことにいろいろチャレンジできた一ヶ月だった。<br /> 9月は特に新規事業が忙しくなりそう。がんばるぞ!💪</p> <p>P.S. 夏が終わってしまうのはとてもさびしいなぁ〜</p> <p><blockquote data-conversation="none" class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">笠岡で夏を満喫した <a href="https://t.co/ra9PNbMKm1">pic.twitter.com/ra9PNbMKm1</a></p>&mdash; にっしー🍵Engineer/Podcaster (@paranishian) <a href="https://twitter.com/paranishian/status/1294899108025495558?ref_src=twsrc%5Etfw">2020年8月16日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </p> <div class="footnote"> <p class="footnote"><a href="#fn-39b774af" name="f-39b774af" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">先月も遅れてたな・・</span></p> </div> paranishian はじめてのDIYで最高のデスクを手に入れた hatenablog://entry/26006613617099436 2020-09-01T08:00:00+09:00 2020-09-01T08:00:11+09:00 自分の求める最高のデスクがほしくて、はじめてのDIYをすることにした。 電動で昇降できて、広々としていて、きれいな色合いのデスク。 すでに完成から1週間くらい経っているけど、毎日最高の状態で仕事ができている。 長時間のデスクワークは健康リスクが高まるし、スタンディングデスクやってみて思うけど、やっぱり集中力が違う。 作業の一部始終を反省点を交えながらつらつらと書いていく。 はじめに 天板のサイズや脚が異なるが、基本的な流れはこちらの記事を参考にした。 note.com 天板を調達する マルトクショップでタモの集成材を購入した。 木材通販のマルトクショップ デスクの横幅は140cmが一般的だけど… <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20200830/20200830233808.jpg" alt="f:id:paranishian:20200830233808j:plain" title="f:id:paranishian:20200830233808j:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>自分の求める最高のデスクがほしくて、はじめての<a class="keyword" href="http://d.hatena.ne.jp/keyword/DIY">DIY</a>をすることにした。</p> <p>電動で昇降できて、広々としていて、きれいな色合いのデスク。</p> <p>すでに完成から1週間くらい経っているけど、毎日最高の状態で仕事ができている。</p> <p>長時間のデスクワークは健康リスクが高まるし、スタンディングデスクやってみて思うけど、やっぱり集中力が違う。</p> <p>作業の一部始終を反省点を交えながらつらつらと書いていく。</p> <h2>はじめに</h2> <p>天板のサイズや脚が異なるが、基本的な流れはこちらの記事を参考にした。 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fnote.com%2Fash%2Fn%2Fn586866541022" title="【DIY】木材の天板で仕事用デスクを自作してみた|コウノ アスヤ|note" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://note.com/ash/n/n586866541022">note.com</a></cite></p> <h2>天板を調達する</h2> <p>マルトクショップでタモの集成材を購入した。</p> <p><a href="https://shop.woodworks-marutoku.com/">&#x6728;&#x6750;&#x901A;&#x8CA9;&#x306E;&#x30DE;&#x30EB;&#x30C8;&#x30AF;&#x30B7;&#x30E7;&#x30C3;&#x30D7;</a></p> <p>デスクの横幅は140cmが一般的だけど、自分はもっと広々と使いたかったのと、将来子供と一緒に横並びで使えたらいいなぁと夢見て180cmにした。</p> <p>脚との接続に鬼目ナットを使う場合も想定して厚みは3cmにした。<a href="#f-ce34e093" name="fn-ce34e093" title="結局今回は直接ネジ固定にしたので鬼目ナットは使わなかった">*1</a></p> <p>ディスプレイとはある程度距離を取りたかったので、奥行きは80cmにした。</p> <p>面取り加工をしたり円形の穴あけをオプションで追加した。</p> <p>けど、穴はなくても使い勝手に問題はなさそう。なんなら奥側に(まさに凹の漢字のような)へこみをつくるのもいいとおもう。(次回はそうするかも)</p> <p>…といろいろ書いたけど、結局「3万以上」という送料無料ラインを突破するために横幅を183cmにした。<a href="#f-cee3b672" name="fn-cee3b672" title="今回は法人での購入だったので3辺合計の制限はない [https://shop.woodworks-marutoku.com/guide/:title]">*2</a></p> <p>詳細は以下のとおり。</p> <pre class="code" data-lang="" data-unlink>■ご注文内容 ●商品名:タモ 集成材(積層材)フリーカット ○CODE:s001 ○木材の形:四角形 ○寸法:030*0800*1830 | 3辺の合計:266cm | 重量:約26.7kg | 面[A]:上R面(3R)+ 下糸面 + 磨き | 面[B]:上R面(3R)+ 下糸面 + 磨き | 面[C]:上R面(3R)+ 下糸面 + 磨き | 面[D]:上R面(3R)+ 下糸面 + 磨き | 反り止め:無し | ジャストカットの有無:有り | 円形穴[1] x:900mm,y:56mm,直径:48mm | 用途:三方向使用 ・単価:30,140 ・数量:1 ・小計:30,140 ------------------------------ 計 30,140円 (内消費税 2,740円) ==============================</pre> <p>で、注文から約1ヶ月後、27kgが到着。</p> <p><blockquote data-conversation="none" class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">いよいよ天板が届いた(27kg) <a href="https://t.co/R9lFbwB96L">pic.twitter.com/R9lFbwB96L</a></p>&mdash; にっしー🍵個人開発/Podcaster (@paranishian) <a href="https://twitter.com/paranishian/status/1295918169492578304?ref_src=twsrc%5Etfw">2020年8月19日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </p> <h2>天板を研磨する</h2> <p>いざ、サンドペーパーで研磨!</p> <p>今回はこれを買ったけど、後述の番号のものがあれば何でもいいと思う。</p> <p><div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07GKN37VS/pamazon-22/"><img src="https://m.media-amazon.com/images/I/41NErPoz2PL._SL160_.jpg" class="hatena-asin-detail-image" alt="Aewio サンドペーパー 紙やすり 耐水ペーパー 研磨紙 木工 ペーパー 研磨用(320 400 600 800 1000 1200 1500 2000 2500 3000 5000 7000 各4枚) (48枚入り #320 - #7000)" title="Aewio サンドペーパー 紙やすり 耐水ペーパー 研磨紙 木工 ペーパー 研磨用(320 400 600 800 1000 1200 1500 2000 2500 3000 5000 7000 各4枚) (48枚入り #320 - #7000)"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07GKN37VS/pamazon-22/">Aewio サンドペーパー 紙やすり 耐水ペーパー 研磨紙 木工 ペーパー 研磨用(320 400 600 800 1000 1200 1500 2000 2500 3000 5000 7000 各4枚) (48枚入り #320 - #7000)</a></p><ul><li><span class="hatena-asin-detail-label">メディア:</span> その他</li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>また、あて木は絶対あったほうがいい。ないと研磨作業が結構きつい。</p> <p>自分は最適なものを持っていなかったのでこれを買った。 <div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00AJG8NUO/pamazon-22/"><img src="https://m.media-amazon.com/images/I/31w7qddzxJL._SL160_.jpg" class="hatena-asin-detail-image" alt="ホルツ 研磨用・あて木コルク サンディングブロック・プラス 大小2個入り Holts MH937" title="ホルツ 研磨用・あて木コルク サンディングブロック・プラス 大小2個入り Holts MH937"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00AJG8NUO/pamazon-22/">ホルツ 研磨用・あて木コルク サンディングブロック・プラス 大小2個入り Holts MH937</a></p><ul><li><span class="hatena-asin-detail-label">メディア:</span> Automotive</li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>朝から汗びっしょりになりながら320 -> 400 -> 600で磨きまくる。ちょーしんどい。</p> <p>ちなみに表とサイド4面のみ。裏はやってない。</p> <p>あと、出てくる木くず(粉)は掃除機で吸い取っていった。</p> <h2>天板を塗装する</h2> <p>ワトコオイルのどの色にするかめちゃめちゃ悩んで、ダークウォルナットを選んだ。</p> <p><div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00GWBQU00/pamazon-22/"><img src="https://m.media-amazon.com/images/I/51EVdlVGhpL._SL160_.jpg" class="hatena-asin-detail-image" alt="ワトコオイル ダークウォルナット W-13 200ML" title="ワトコオイル ダークウォルナット W-13 200ML"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00GWBQU00/pamazon-22/">ワトコオイル ダークウォルナット W-13 200ML</a></p><ul><li><span class="hatena-asin-detail-label">メディア:</span> Tools &amp; Hardware</li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>色や塗り方で参考にした記事はこちら↓</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fmakit.jp%2F01076%2F" title="ワトコオイル全8色の色見本と、おすすめの塗装方法をご紹介! - makit(メキット)by DIY FACTORY" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://makit.jp/01076/">makit.jp</a></cite></p> <p>刷毛はこれを買ったけど何でもいいと思う。 <div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B008HYCMRU/pamazon-22/"><img src="https://m.media-amazon.com/images/I/51JspOX14kL._SL160_.jpg" class="hatena-asin-detail-image" alt="アサヒペン ペイント刷毛 お得用多用途用ハケ3本セット OT-3P" title="アサヒペン ペイント刷毛 お得用多用途用ハケ3本セット OT-3P"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B008HYCMRU/pamazon-22/">アサヒペン ペイント刷毛 お得用多用途用ハケ3本セット OT-3P</a></p><ul><li><span class="hatena-asin-detail-label">メディア:</span> Tools &amp; Hardware</li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>新しい刷毛を使う場合は、抜け毛を取る作業をしておかないと塗装面にゴミや毛が付着してしまうので注意。</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fmakit.jp%2F00398%2F" title="待って!新品の刷毛をそのまま使用してはダメ! - makit(メキット)by DIY FACTORY" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://makit.jp/00398/">makit.jp</a></cite></p> <p>天板を包んでいた<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C0%A5%F3%A5%DC%A1%BC">ダンボー</a>ルを下に敷いたまま、いざ塗装!!</p> <p>ぬりぬり・・・</p> <p>ぬりぬり・・・</p> <p>ぬりぬりぬりぬり・・・</p> <p>・・・ジャーーーン!!!!</p> <p><blockquote data-conversation="none" class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">朝から汗だくになってる。。<br>サンドペーパー320&gt;400&gt;600かけてワトコオイル塗ったので一時乾燥待ち〜 <a href="https://t.co/E1pL6VKfoH">pic.twitter.com/E1pL6VKfoH</a></p>&mdash; にっしー🍵個人開発/Podcaster (@paranishian) <a href="https://twitter.com/paranishian/status/1296242147981549568?ref_src=twsrc%5Etfw">2020年8月20日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </p> <p>きれいな色出たー!オサレーー!!!はよ使いたいーーー!!!</p> <p>一度塗りから1時間ほど乾かした後、仕上げの重ね塗り。(研磨がメインなので一度塗りよりも少量でOK)</p> <p>そしてオイルが乾ききらないうちに600番のサンドペーパーで再度研磨。スルスル磨ける。きもちぃ。</p> <p>残ったオイルをウェス(布)で拭き取り、ここから24時間くらい乾かす。</p> <p>この間、オイルがじわじわ出てくるので都度ウェスで拭き取る。</p> <p>※オイルの染み込んだウェスは発火の恐れがあるので必ず水に濡らして捨てること!</p> <p><blockquote data-conversation="none" class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">二度塗りしてあとは24時間寝かす…😪<br>ウェスでよく拭き取っても時間が経てばオイルがじわじわ出てくるのですかさず拭きとる💨<br>←before after→ <a href="https://t.co/6OFEVwavx6">pic.twitter.com/6OFEVwavx6</a></p>&mdash; にっしー🍵個人開発/Podcaster (@paranishian) <a href="https://twitter.com/paranishian/status/1296276495833300997?ref_src=twsrc%5Etfw">2020年8月20日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </p> <p>あと、これは後日談だけど、しっかり何度も拭き取って乾燥させたつもりでも、物を置いておくとその下から少量のオイルが染み出してきてお気に入りのノートが犠牲に…。 <span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20200830/20200830233956.jpg" alt="f:id:paranishian:20200830233956j:plain" title="f:id:paranishian:20200830233956j:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>塗装後一週間くらいは大事なノート類は汚れてもいい紙の上に置くのがベストかも。</p> <h2>脚を組み立てる</h2> <p>脚は電動式のFLEXISPOT。 天板ありタイプが主流だけど今回は天板なしの方で。</p> <p><div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B074897V3X/pamazon-22/"><img src="https://m.media-amazon.com/images/I/31dL6GjO3bL._SL160_.jpg" class="hatena-asin-detail-image" alt="FLEXISPOT スタンディングデスク 電動式 昇降デスク 高さ調節デスク 人間工学 メモリー機能付き オフィスワークテーブル パソコンデスク ゲーミングデスク 学習机 勉強机 ブラック E3B(天板別売り)" title="FLEXISPOT スタンディングデスク 電動式 昇降デスク 高さ調節デスク 人間工学 メモリー機能付き オフィスワークテーブル パソコンデスク ゲーミングデスク 学習机 勉強机 ブラック E3B(天板別売り)"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B074897V3X/pamazon-22/">FLEXISPOT スタンディングデスク 電動式 昇降デスク 高さ調節デスク 人間工学 メモリー機能付き オフィスワークテーブル パソコンデスク ゲーミングデスク 学習机 勉強机 ブラック E3B(天板別売り)</a></p><ul><li><span class="hatena-asin-detail-label">メディア:</span></li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>とにかく重い。35kg。けどそれだけあって、耐荷重は100kg!ヒュー!!</p> <p><blockquote data-conversation="none" class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">いよいよ足つくっていくぞ!🦵 <a href="https://t.co/NEHlOKZUFD">pic.twitter.com/NEHlOKZUFD</a></p>&mdash; にっしー🍵個人開発/Podcaster (@paranishian) <a href="https://twitter.com/paranishian/status/1296976000597651456?ref_src=twsrc%5Etfw">2020年8月22日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </p> <p>あとは説明書通りに組み立てるだけ。</p> <p>自分はすでに工具一式持っていたけど、手元にない人はこういうの買っておけばいいと思う。</p> <p><div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00C65F2Q4/pamazon-22/"><img src="https://m.media-amazon.com/images/I/418mL98AxhL._SL160_.jpg" class="hatena-asin-detail-image" alt="IKEA(イケア) FIXA 50203260 スクリュードライバー/ドリル、リチウムイオンバッテリー" title="IKEA(イケア) FIXA 50203260 スクリュードライバー/ドリル、リチウムイオンバッテリー"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00C65F2Q4/pamazon-22/">IKEA(イケア) FIXA 50203260 スクリュードライバー/ドリル、リチウムイオンバッテリー</a></p><ul><li><span class="hatena-asin-detail-label">メディア:</span> その他</li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <h2>ケーブル配線をまとめる</h2> <p>配線をまとめるためにケーブル配線トレーを買った。</p> <p><div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B01N59ON4W/pamazon-22/"><img src="https://m.media-amazon.com/images/I/41JDDJpiTHL._SL160_.jpg" class="hatena-asin-detail-image" alt="サンワサプライ ケーブル配線トレー メッシュ ERDシリーズ専用 CB-CTERD5" title="サンワサプライ ケーブル配線トレー メッシュ ERDシリーズ専用 CB-CTERD5"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B01N59ON4W/pamazon-22/">サンワサプライ ケーブル配線トレー メッシュ ERDシリーズ専用 CB-CTERD5</a></p><ul><li><span class="hatena-asin-detail-label">メディア:</span> オフィス用品</li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>が、この商品名を見て分かる通り、誤って専用製品(既存製品へボルト式で取り付けるやつ)を購入してしまうという凡ミス。めげずに急遽近所の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B9%A9%CC%B3%C5%B9">工務店</a>でネジを購入して対応した。</p> <p><blockquote data-conversation="none" class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">装着done!<br><br>ケーブル配線ケースはまさかのボルト付き(既存製品用)のもの買ってしまうという凡ミスしたのでネジをホームセンターに買いに行く🏃‍♂️💨 <a href="https://t.co/zFFvlL3V08">pic.twitter.com/zFFvlL3V08</a></p>&mdash; にっしー🍵個人開発/Podcaster (@paranishian) <a href="https://twitter.com/paranishian/status/1296994775766151168?ref_src=twsrc%5Etfw">2020年8月22日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </p> <p>ふぅ〜。いい感じ。 <span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20200830/20200830234019.jpg" alt="f:id:paranishian:20200830234019j:plain" title="f:id:paranishian:20200830234019j:plain" class="hatena-fotolife" itemprop="image"></span></p> <h2>出来上がり</h2> <p>ということで、完成〜!</p> <p><figure class="figure-image figure-image-fotolife" title="座るときの高さ"><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20200824/20200824085149.jpg" alt="f:id:paranishian:20200824085149j:plain" title="f:id:paranishian:20200824085149j:plain" class="hatena-fotolife" itemprop="image"></span><figcaption>座るときの高さ</figcaption></figure></p> <p><figure class="figure-image figure-image-fotolife" title="立つときの高さ"><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20200824/20200824085237.jpg" alt="f:id:paranishian:20200824085237j:plain" title="f:id:paranishian:20200824085237j:plain" class="hatena-fotolife" itemprop="image"></span><figcaption>立つときの高さ</figcaption></figure></p> <p>昇降位置は自由に変更できて、3つまでパターン登録できる。</p> <p>時間で自動で昇降する仕組みも設定できるけど、それはまだ使ってない。</p> <p>デスクは広くしたけど極力物は置かずにスッキリさせて集中できるようにしてるのがポイント。</p> <p>基本的にケーブルは真ん中の穴に吸い込まれていくけど、最近有線LANにしたこともあり配線の都合上<a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac">Mac</a>は左側に配置した。<a href="#f-bc1b8a13" name="fn-bc1b8a13" title="あと「片側のUSB-Cだけ使ってるとkernel taskがうんたら」みたいな情報もどこかで見たし">*3</a></p> <p><figure class="figure-image figure-image-fotolife" title="すべてを飲み込む直径48mmのアビス"><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20200830/20200830233942.jpg" alt="f:id:paranishian:20200830233942j:plain" title="f:id:paranishian:20200830233942j:plain" class="hatena-fotolife" itemprop="image"></span><figcaption>すべてを飲み込む直径48mmのアビス</figcaption></figure></p> <p>また、下に置いているのは、座って仕事するときに集中力を高めてくれる<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D5%A5%C3%A5%C8%A5%EC%A5%B9%A5%C8">フットレスト</a>と、</p> <p><div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B003LN9JC8/pamazon-22/"><img src="https://m.media-amazon.com/images/I/41lqiSn0BxL._SL160_.jpg" class="hatena-asin-detail-image" alt="サンワサプライ エルゴノミクスフットレスト MR-FR1" title="サンワサプライ エルゴノミクスフットレスト MR-FR1"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B003LN9JC8/pamazon-22/">サンワサプライ エルゴノミクスフットレスト MR-FR1</a></p><ul><li><span class="hatena-asin-detail-label">メディア:</span> Personal Computers</li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>スタンディング時に<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C8%E8%CF%AB">疲労</a>を軽減してくれるマット。</p> <p><div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00SYR8OSQ/pamazon-22/"><img src="https://m.media-amazon.com/images/I/11d6EzsVleL._SL160_.jpg" class="hatena-asin-detail-image" alt="八幡ねじ 疲労軽減マット ブラック 900X450 1枚入り" title="八幡ねじ 疲労軽減マット ブラック 900X450 1枚入り"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00SYR8OSQ/pamazon-22/">八幡ねじ 疲労軽減マット ブラック 900X450 1枚入り</a></p><ul><li><span class="hatena-asin-detail-label">メディア:</span> Tools &amp; Hardware</li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p><figure class="figure-image figure-image-fotolife" title="立つときはマットを下に敷く"><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20200830/20200830233931.jpg" alt="f:id:paranishian:20200830233931j:plain" title="f:id:paranishian:20200830233931j:plain" class="hatena-fotolife" itemprop="image"></span><figcaption>立つときはマットを下に敷く</figcaption></figure></p> <p>基本的にスタンディングデスクメインで使って、疲れてきたなーってときに高さを下げて椅子に座るという運用。</p> <h2>かかった費用</h2> <pre class="code" data-lang="" data-unlink>天板:30,140円 脚:48,100円 サンドペーパー:1,130円 ワトコオイル:1,622円 刷毛:648円 あて木:294円 ケーブル配線トレー:4,427円 合計(税込み):86,361円</pre> <p>今後ずっと使える机と考えると安いのでは。給付金で買えるし。<a href="#f-bad8ec3f" name="fn-bad8ec3f" title="「一番高いのは椅子」説はもちろんある">*4</a></p> <h2>おわりに</h2> <p>このデスクにしてからめちゃめちゃ仕事が捗るようになったので素直に嬉しい。</p> <p>リモートワークはどうしても集中を維持できなかったり、健康リスクを抱えてしまったりするのでこれからも環境を改善し続けていきたい。</p> <p>次は、テーブル下にスライド式の収納を設置して充電配線も整えて、仕事中は<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%DE%A5%DB">スマホ</a>をしまって気が散らないようにしたい。</p> <p>また完成したら<a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a>かどこかで報告しよーっと。</p> <p>それでは🕺</p> <div class="footnote"> <p class="footnote"><a href="#fn-ce34e093" name="f-ce34e093" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">結局今回は直接ネジ固定にしたので鬼目ナットは使わなかった</span></p> <p class="footnote"><a href="#fn-cee3b672" name="f-cee3b672" class="footnote-number">*2</a><span class="footnote-delimiter">:</span><span class="footnote-text">今回は法人での購入だったので3辺合計の制限はない <a href="https://shop.woodworks-marutoku.com/guide/">&#x3054;&#x5229;&#x7528;&#x30AC;&#x30A4;&#x30C9; | &#x6728;&#x6750;&#x901A;&#x8CA9;&#x306E;&#x30DE;&#x30EB;&#x30C8;&#x30AF;&#x30B7;&#x30E7;&#x30C3;&#x30D7;</a></span></p> <p class="footnote"><a href="#fn-bc1b8a13" name="f-bc1b8a13" class="footnote-number">*3</a><span class="footnote-delimiter">:</span><span class="footnote-text">あと「片側のUSB-Cだけ使ってるとkernel taskがうんたら」みたいな情報もどこかで見たし</span></p> <p class="footnote"><a href="#fn-bad8ec3f" name="f-bad8ec3f" class="footnote-number">*4</a><span class="footnote-delimiter">:</span><span class="footnote-text">「一番高いのは椅子」説はもちろんある</span></p> </div> paranishian 【月報】2020年7月の開発進捗や数字など hatenablog://entry/26006613611010525 2020-08-07T09:16:20+09:00 2020-09-04T18:09:42+09:00 ちょっと出遅れちゃったけど、、恒例の月報やっていくぞー!*1 お絵かきコラボ お絵かきコラボRYOSUKE HIRAMATSUゲーム無料apps.apple.com play.google.com 中国展開のお誘いが来たのでその対応をしていた。 媒体紹介資料の中に出てきた「80后」「90后」ってのがわからなくて調べたら、「1980年代生まれ」「1990年代生まれ」って意味だった。小さな学びを得た。 あと、またテレビ番組から連絡が来て、お絵かきコラボがまた紹介されるかも! 詳細はまた追々。 なかなか運用に時間を避けていなくてユーザーさんに申し訳ないなーっておもってる。。 ので8月はもうちょっと時… <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20200807/20200807090900.png" alt="f:id:paranishian:20200807090900p:plain" title="f:id:paranishian:20200807090900p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>ちょっと出遅れちゃったけど、、恒例の月報やっていくぞー!<a href="#f-488ad64e" name="fn-488ad64e" title="しれっと6月の月報やってなかったことに気づいたけど気にしない ">*1</a></p> <h2>お絵かきコラボ</h2> <p><div class="itunes-embed freezed itunes-kind-software"><a href="https://apps.apple.com/jp/app/%E3%81%8A%E7%B5%B5%E3%81%8B%E3%81%8D%E3%82%B3%E3%83%A9%E3%83%9C/id1445350507?uo=4&at=10lncm" rel="nofollow" target="_blank"><img src="https://cdn.image.st-hatena.com/image/scale/95e45fb44cb74c100c55bab8604064c041ca8d46/enlarge=0;height=200;version=1;width=200/https%3A%2F%2Fis3-ssl.mzstatic.com%2Fimage%2Fthumb%2FPurple114%2Fv4%2Fae%2F3f%2Ff6%2Fae3ff670-a44f-e634-9110-62b4ac4ea21c%2Fsource%2F100x100bb.jpg" alt="お絵かきコラボ" title="お絵かきコラボ" class="itunes-embed-image"/></a><div class="itunes-embed-info"><p class="itunes-embed-title"><a href="https://apps.apple.com/jp/app/%E3%81%8A%E7%B5%B5%E3%81%8B%E3%81%8D%E3%82%B3%E3%83%A9%E3%83%9C/id1445350507?uo=4&at=10lncm" rel="nofollow" target="_blank">お絵かきコラボ</a></p><ul><li class="itunes-embed-artist">RYOSUKE HIRAMATSU</li><li class="itunes-embed-genre">ゲーム</li><li class="itunes-embed-price">無料</li><li class="itunes-embed-badge"><a href="https://apps.apple.com/jp/app/%E3%81%8A%E7%B5%B5%E3%81%8B%E3%81%8D%E3%82%B3%E3%83%A9%E3%83%9C/id1445350507?uo=4&at=10lncm" rel="nofollow" target="_blank"><img src="https://cdn.blog.st-hatena.com/images/theme/itunes/itunes-badge-appstore@2x.png" width="60px" height="15px" /></a></li></ul></div></div><cite class="hatena-citation"><a href="https://apps.apple.com/jp/app/%E3%81%8A%E7%B5%B5%E3%81%8B%E3%81%8D%E3%82%B3%E3%83%A9%E3%83%9C/id1445350507">apps.apple.com</a></cite> <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dkk.draw.together%26hl%3Dja" title="お絵かきコラボ - Google Play のアプリ" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://play.google.com/store/apps/details?id=kk.draw.together&hl=ja">play.google.com</a></cite></p> <p>中国展開のお誘いが来たのでその対応をしていた。<br /> 媒体紹介資料の中に出てきた「80后」「90后」ってのがわからなくて調べたら、「1980年代生まれ」「1990年代生まれ」って意味だった。小さな学びを得た。</p> <p>あと、またテレビ番組から連絡が来て、お絵かきコラボがまた紹介されるかも!<br /> 詳細はまた追々。</p> <p>なかなか運用に時間を避けていなくてユーザーさんに申し訳ないなーっておもってる。。<br /> ので8月はもうちょっと時間避けるように工夫していくぞ〜!</p> <h3>7月の数字</h3> <p>毎日3,000人ほどの人が遊んでくれてる。ありがとうございます🙏 <span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20200807/20200807084126.png" alt="f:id:paranishian:20200807084126p:plain" title="f:id:paranishian:20200807084126p:plain" class="hatena-fotolife" itemprop="image"></span></p> <h2><a class="keyword" href="http://d.hatena.ne.jp/keyword/Podcast">Podcast</a></h2> <p><div class="itunes-embed freezed itunes-kind-podcast"><a href="https://podcasts.apple.com/jp/podcast/%E3%82%88%E3%82%82%E3%82%84%E3%81%BEfm/id1470279033?uo=4&at=10lncm" rel="nofollow" target="_blank"><img src="https://cdn.image.st-hatena.com/image/scale/f7a76c5e8fbda1afb41fdd266d25e4f64eca89f3/enlarge=0;height=200;version=1;width=200/https%3A%2F%2Fis2-ssl.mzstatic.com%2Fimage%2Fthumb%2FPodcasts123%2Fv4%2Fb5%2Fa2%2Fb7%2Fb5a2b734-3e05-de25-0678-353f4e4cea15%2Fmza_12652309823570619646.jpg%2F100x100bb.jpg" alt="よもやまfm" title="よもやまfm" class="itunes-embed-image"/></a><div class="itunes-embed-info"><p class="itunes-embed-title"><a href="https://podcasts.apple.com/jp/podcast/%E3%82%88%E3%82%82%E3%82%84%E3%81%BEfm/id1470279033?uo=4&at=10lncm" rel="nofollow" target="_blank">よもやまfm</a></p><ul><li class="itunes-embed-artist">よもやまfm</li><li class="itunes-embed-genre">即興コメディ</li><li class="itunes-embed-price">¥0</li><li class="itunes-embed-badge"><a href="https://podcasts.apple.com/jp/podcast/%E3%82%88%E3%82%82%E3%82%84%E3%81%BEfm/id1470279033?uo=4&at=10lncm" rel="nofollow" target="_blank"><img src="https://cdn.blog.st-hatena.com/images/theme/itunes/itunes-badge-itunes@2x.png" width="44px" height="15px" /></a></li></ul></div></div><cite class="hatena-citation"><a href="https://podcasts.apple.com/jp/podcast/id1470279033">podcasts.apple.com</a></cite></p> <p>ついに大台の50回配信まで来た!<br /> Anchorの推定数字だけど、100名くらいの人が聴いてくれているらしい。嬉しい。<br /> <a class="keyword" href="http://d.hatena.ne.jp/keyword/Podcast">Podcast</a>はほんとにやってて楽しいので、なんならこれで食っていきたい(無理)</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20200807/20200807084933.png" alt="f:id:paranishian:20200807084933p:plain" title="f:id:paranishian:20200807084933p:plain" class="hatena-fotolife" itemprop="image"></span></p> <h2>読書</h2> <p>7月は諸々の事情があって、インプットの時間が多かった。<br /> とりわけ睡眠やマインドフルネスあたりの本を読み漁ったので紹介していく。</p> <h3>世界のエリートがやっている 最高の休息法</h3> <p><div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B01J2ZLLN8/pamazon-22/"><img src="https://m.media-amazon.com/images/I/51m+anlCEUL._SL160_.jpg" class="hatena-asin-detail-image" alt="世界のエリートがやっている 最高の休息法" title="世界のエリートがやっている 最高の休息法"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B01J2ZLLN8/pamazon-22/">世界のエリートがやっている 最高の休息法</a></p><ul><li><span class="hatena-asin-detail-label">作者:</span><a href="http://d.hatena.ne.jp/keyword/%B5%D7%B2%EC%C3%AB%20%CE%BC" class="keyword">久賀谷 亮</a></li><li><span class="hatena-asin-detail-label">発売日:</span> 2016/08/01</li><li><span class="hatena-asin-detail-label">メディア:</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/Kindle">Kindle</a>版</li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>マインドフルネスについてストーリー仕立てで理解できる本。レイ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B8%A1%BC">ジー</a>・デーはぜひ取り入れてみたい習慣。</p> <h3><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%BF%A5%F3%A5%D5%A5%A9%A1%BC%A5%C9">スタンフォード</a>式 最高の睡眠</h3> <p><div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/4763136011/pamazon-22/"><img src="https://m.media-amazon.com/images/I/51CgOdfGFiL._SL160_.jpg" class="hatena-asin-detail-image" alt="スタンフォード式 最高の睡眠" title="スタンフォード式 最高の睡眠"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/4763136011/pamazon-22/">スタンフォード式 最高の睡眠</a></p><ul><li><span class="hatena-asin-detail-label">作者:</span><a href="http://d.hatena.ne.jp/keyword/%C0%BE%CC%EE%C0%BA%BC%A3" class="keyword">西野精治</a></li><li><span class="hatena-asin-detail-label">発売日:</span> 2017/02/27</li><li><span class="hatena-asin-detail-label">メディア:</span> 単行本(ソフトカバー)</li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>「睡眠こそが最強の解決策である」という別の本を読んだ上で、これも読んでみた。<br /> 良い睡眠についてより深く知識がついた。</p> <h3>ディズニーを知ってディズニーを超える <a class="keyword" href="http://d.hatena.ne.jp/keyword/%B8%DC%B5%D2%CB%FE%C2%AD">顧客満足</a>入門</h3> <p><div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/4833421038/pamazon-22/"><img src="https://m.media-amazon.com/images/I/51DHEyAIZ9L._SL160_.jpg" class="hatena-asin-detail-image" alt="ディズニーを知ってディズニーを超える 顧客満足入門" title="ディズニーを知ってディズニーを超える 顧客満足入門"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/4833421038/pamazon-22/">ディズニーを知ってディズニーを超える 顧客満足入門</a></p><ul><li><span class="hatena-asin-detail-label">作者:</span><a href="http://d.hatena.ne.jp/keyword/%B3%F9%C5%C4%CD%CE" class="keyword">鎌田洋</a></li><li><span class="hatena-asin-detail-label">発売日:</span> 2014/10/30</li><li><span class="hatena-asin-detail-label">メディア:</span> 単行本</li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>概して教育やカルチャーの話がメインだったのと、内容が浅くてあまりメモする箇所がなかった。<br /> 組織の人数が増えてCSの考え方を新人にも浸透させたくなったとき、また読むと新しい発見があるかもしれない。</p> <h3>ワークマンは 商品を変えずに売り方を変えただけで なぜ2倍売れたのか</h3> <p><div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B08BRJ51GV/pamazon-22/"><img src="https://m.media-amazon.com/images/I/513ednDXXyL._SL160_.jpg" class="hatena-asin-detail-image" alt="ワークマンは 商品を変えずに売り方を変えただけで なぜ2倍売れたのか" title="ワークマンは 商品を変えずに売り方を変えただけで なぜ2倍売れたのか"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B08BRJ51GV/pamazon-22/">ワークマンは 商品を変えずに売り方を変えただけで なぜ2倍売れたのか</a></p><ul><li><span class="hatena-asin-detail-label">作者:</span><a href="http://d.hatena.ne.jp/keyword/%BC%F2%B0%E6%C2%E7%CA%E5" class="keyword">酒井大輔</a></li><li><span class="hatena-asin-detail-label">発売日:</span> 2020/06/25</li><li><span class="hatena-asin-detail-label">メディア:</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/Kindle">Kindle</a>版</li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>ワークマンプラス、善意型SCM、クリック&コレクトなどなど、学びがとても多かった。</p> <h3>セルフケアの道具箱</h3> <p><div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B08CMN4R97/pamazon-22/"><img src="https://m.media-amazon.com/images/I/41GzYrhGArL._SL160_.jpg" class="hatena-asin-detail-image" alt="セルフケアの道具箱" title="セルフケアの道具箱"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B08CMN4R97/pamazon-22/">セルフケアの道具箱</a></p><ul><li><span class="hatena-asin-detail-label">作者:</span><a href="http://d.hatena.ne.jp/keyword/%B0%CB%C6%A3%B3%A8%C8%FE" class="keyword">伊藤絵美</a></li><li><span class="hatena-asin-detail-label">発売日:</span> 2020/07/10</li><li><span class="hatena-asin-detail-label">メディア:</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/Kindle">Kindle</a>版</li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>マインドフルネスのワークだけでも読む価値のある本だった。常にそばに置いておきたい一冊。</p> <h3>サーチ・<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%B5%A5%A4%A5%C9">インサイド</a>・ユアセルフ ― 仕事と人生を飛躍させるグーグルのマインドフルネス実践法</h3> <p><div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B01ESTWPYC/pamazon-22/"><img src="https://m.media-amazon.com/images/I/51FCpo7LOHL._SL160_.jpg" class="hatena-asin-detail-image" alt="サーチ・インサイド・ユアセルフ ― 仕事と人生を飛躍させるグーグルのマインドフルネス実践法" title="サーチ・インサイド・ユアセルフ ― 仕事と人生を飛躍させるグーグルのマインドフルネス実践法"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B01ESTWPYC/pamazon-22/">サーチ・インサイド・ユアセルフ ― 仕事と人生を飛躍させるグーグルのマインドフルネス実践法</a></p><ul><li><span class="hatena-asin-detail-label">作者:</span><a href="http://d.hatena.ne.jp/keyword/%A5%C1%A5%E3%A5%C7%A5%A3%A1%BC%A1%A6%A5%E1%A5%F3%A1%A6%A5%BF%A5%F3" class="keyword">チャディー・メン・タン</a>,<a href="http://d.hatena.ne.jp/keyword/%B0%EC%C8%CC%BC%D2%C3%C4%CB%A1%BF%CD%A5%DE%A5%A4%A5%F3%A5%C9%A5%D5%A5%EB%A5%EA%A1%BC%A5%C0%A1%BC%A5%B7%A5%C3%A5%D7%A5%A4%A5%F3%A5%B9%A5%C6%A5%A3%A5%C6%A5%E5%A1%BC%A5%C8" class="keyword">一般社団法人マインドフルリーダーシップインスティテュート</a></li><li><span class="hatena-asin-detail-label">発売日:</span> 2016/05/17</li><li><span class="hatena-asin-detail-label">メディア:</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/Kindle">Kindle</a>版</li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>いままだ読んでる最中だけど、エンジニアの方が書いた本だけあって、とても納得しながらマインドフルネスの効果を理解できる一冊。</p> <h2>創業</h2> <p>友人と新しい事業を始めることになった。<br /> 未知の分野への挑戦だけどめちゃめちゃワクワクしてる!本当にがんばらなきゃ!やることがいっぱい!<br /> 事業が軌道に乗ってきたら紹介したい。</p> <h2>まとめ</h2> <p>仕事の優先度=人生の優先度みたいな感覚になってきて、自問自答を繰り返す日々。<br /> 来月なにかいい報告できるようにがんばるぞ〜!💪</p> <div class="footnote"> <p class="footnote"><a href="#fn-488ad64e" name="f-488ad64e" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">しれっと6月の月報やってなかったことに気づいたけど気にしない </span></p> </div> paranishian シェアハウスならぬスイッチハウスを始めてみる hatenablog://entry/26006613558921246 2020-06-11T08:00:00+09:00 2020-06-11T10:08:04+09:00 自分は岡山に住みながら東京の仕事をしている。 いまの仕事はずっとリモートでもできるんだけど、たまには顔合わせしたいし友人にも会いたいし、これまではコミュニティありきで仕事をとってきたところがあるので、これからも月に1週間くらい東京に滞在したいと思っている。 ただ、毎回ホテルをとったりウィークリーマンション借りたりするのは手続きがめんどくさいし結構お金がかかる。 そこで、同じような境遇の人と家を借りて上京時に寝床にしたい。 シェアハウスならぬスイッチハウス。 <p><figure class="figure-image figure-image-fotolife" title="Photo by Daan Stevens on Unsplash"><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20200610/20200610221023.jpg" alt="f:id:paranishian:20200610221023j:plain" title="f:id:paranishian:20200610221023j:plain" class="hatena-fotolife" itemprop="image"></span><figcaption>Photo by Daan Stevens on Unsplash</figcaption></figure></p> <p>自分は岡山に住みながら東京の仕事をしている。</p> <p>いまの仕事はずっとリモートでもできるんだけど、たまには顔合わせしたいし友人にも会いたいし、これまではコミュニティありきで仕事をとってきたところがあるので、これからも月に1週間くらい東京に滞在したいと思っている。<a href="#f-75a41456" name="fn-75a41456" title="というか新型コロナが流行るまではそういう生活をしていた">*1</a></p> <p>ただ、毎回ホテルをとったりウィークリーマンション借りたりするのは手続きがめんどくさいし結構お金がかかる。</p> <p>そこで、同じような境遇の人と家を借りて上京時に寝床にしたい。</p> <p>シェアハウスならぬスイッチハウス。</p> <p>週替りで住人が入れ替わる、たまに重なって一緒に寝食をともにする。</p> <p>ホテルとかと違って、「常に帰る場所がある」という安心感もある。</p> <p>シェアハウスほどずっと一緒というわけではないのでストレスもそんなに溜まらない。</p> <p>もちろん、人選はめちゃめちゃ大事なので気の知れた友人限定で。</p> <p>めちゃめちゃ理想やん。</p> <p>.</p> <p>.</p> <p>.</p> <p>ということで、さっそく同じ状況で考えに共感してくれる友人<a href="#f-cbf38f42" name="fn-cbf38f42" title="この友人がおもろすぎて毎回上京タイミングを合わせたくなってしまう問題がある">*2</a>がいるので、10万くらいで1LDKの家を借りて始めてみる予定。あと1人いれば3万/人で実現できる。</p> <p>これからは自分みたく地方にいながら東京の仕事をする人って増えてくると思うし、こういうのが当たり前になってきたらおもしろいなー!なんて。</p> <p>おしまい。</p> <div class="footnote"> <p class="footnote"><a href="#fn-75a41456" name="f-75a41456" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">というか新型コロナが流行るまではそういう生活をしていた</span></p> <p class="footnote"><a href="#fn-cbf38f42" name="f-cbf38f42" class="footnote-number">*2</a><span class="footnote-delimiter">:</span><span class="footnote-text">この友人がおもろすぎて毎回上京タイミングを合わせたくなってしまう問題がある</span></p> </div> paranishian 【月報】2020年5月の開発進捗や数字など hatenablog://entry/26006613577880297 2020-06-02T09:51:23+09:00 2020-06-02T09:59:49+09:00 テンション高めに月報やっていくぞー! お絵かきコラボ お絵かきコラボRYOSUKE HIRAMATSUゲーム無料apps.apple.com play.google.com 5月の数字 おうち時間が減ってきた影響か、ユーザー数も減ってきてる!ナンテコッタイ! もっと盛り上げていくぞ!💪 インタビュー公開 fluctさんのインタビュー記事が公開された! 開発メンバーの想いとか数字とかめっちゃ公開してるので見てほしい!🔍 magazine.fluct.jp TVデビュー 新shock感で取り上げてもらった!🙌 はじめてYouTubeライブ配信もしてみた! 配信って楽しいなぁ〜! paranishi… <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20200602/20200602094040.png" alt="f:id:paranishian:20200602094040p:plain" title="f:id:paranishian:20200602094040p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>テンション高めに月報やっていくぞー!</p> <h2>お絵かきコラボ</h2> <p><div class="itunes-embed freezed itunes-kind-software"><a href="https://apps.apple.com/jp/app/%E3%81%8A%E7%B5%B5%E3%81%8B%E3%81%8D%E3%82%B3%E3%83%A9%E3%83%9C/id1445350507?uo=4&at=10lncm" rel="nofollow" target="_blank"><img src="https://cdn.image.st-hatena.com/image/scale/882a00dfe7316ff3464fe837cea90726b2c91302/enlarge=0;height=200;version=1;width=200/https%3A%2F%2Fis4-ssl.mzstatic.com%2Fimage%2Fthumb%2FPurple113%2Fv4%2F94%2F6f%2F45%2F946f4554-4171-fe75-4ce3-737ec437c0bc%2Fsource%2F100x100bb.jpg" alt="お絵かきコラボ" title="お絵かきコラボ" class="itunes-embed-image"/></a><div class="itunes-embed-info"><p class="itunes-embed-title"><a href="https://apps.apple.com/jp/app/%E3%81%8A%E7%B5%B5%E3%81%8B%E3%81%8D%E3%82%B3%E3%83%A9%E3%83%9C/id1445350507?uo=4&at=10lncm" rel="nofollow" target="_blank">お絵かきコラボ</a></p><ul><li class="itunes-embed-artist">RYOSUKE HIRAMATSU</li><li class="itunes-embed-genre">ゲーム</li><li class="itunes-embed-price">無料</li><li class="itunes-embed-badge"><a href="https://apps.apple.com/jp/app/%E3%81%8A%E7%B5%B5%E3%81%8B%E3%81%8D%E3%82%B3%E3%83%A9%E3%83%9C/id1445350507?uo=4&at=10lncm" rel="nofollow" target="_blank"><img src="https://cdn.blog.st-hatena.com/images/theme/itunes/itunes-badge-appstore@2x.png" width="60px" height="15px" /></a></li></ul></div></div><cite class="hatena-citation"><a href="https://apps.apple.com/jp/app/%E3%81%8A%E7%B5%B5%E3%81%8B%E3%81%8D%E3%82%B3%E3%83%A9%E3%83%9C/id1445350507">apps.apple.com</a></cite> <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dkk.draw.together%26hl%3Dja" title="お絵かきコラボ - Google Play のアプリ" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://play.google.com/store/apps/details?id=kk.draw.together&hl=ja">play.google.com</a></cite></p> <h3>5月の数字</h3> <p>おうち時間が減ってきた影響か、ユーザー数も減ってきてる!ナンテコッタイ!<br /> もっと盛り上げていくぞ!💪 <span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20200602/20200602091521.png" alt="f:id:paranishian:20200602091521p:plain" title="f:id:paranishian:20200602091521p:plain" class="hatena-fotolife" itemprop="image"></span></p> <h3>インタビュー公開</h3> <p>fluctさんのインタビュー記事が公開された!<br /> 開発メンバーの想いとか数字とかめっちゃ公開してるので見てほしい!🔍</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fmagazine.fluct.jp%2F2020%2F05%2F07%2F7222" title="YouTubeでも話題!『お絵かきコラボ』成功の秘訣に迫る!ユーザーの声を反映し高評価レビューを維持するユーザーファーストな開発について | fluct magazine" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://magazine.fluct.jp/2020/05/07/7222">magazine.fluct.jp</a></cite></p> <h3>TVデビュー</h3> <p>新shock感で取り上げてもらった!🙌<br /> はじめて<a class="keyword" href="http://d.hatena.ne.jp/keyword/YouTube">YouTube</a><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E9%A5%A4%A5%D6%C7%DB%BF%AE">ライブ配信</a>もしてみた!<br /> 配信って楽しいなぁ〜!</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fparanishian.hateblo.jp%2Fentry%2F2020%2F05%2F19%2F080000" title="ゼロから始めるYouTubeライブ配信 〜個人開発アプリのTVデビューを見守る編〜 - paranitips" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://paranishian.hateblo.jp/entry/2020/05/19/080000">paranishian.hateblo.jp</a></cite></p> <h3>Firebaseの費用削減</h3> <p>Firebase費用がかさんでたので調査・改善した!<br /> ブログが予想以上にバズってびっくりした!🤭</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fparanishian.hateblo.jp%2Fentry%2F2020%2F05%2F31%2F180000" title="個人開発アプリのFirebase費用を30%削減した話 - paranitips" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://paranishian.hateblo.jp/entry/2020/05/31/180000">paranishian.hateblo.jp</a></cite></p> <h2>書籍通知サービス</h2> <p>友人のためにつくっただけなので非公開だけど!<br /> <a class="keyword" href="http://d.hatena.ne.jp/keyword/Amazon">Amazon</a>の<a class="keyword" href="http://d.hatena.ne.jp/keyword/PA">PA</a>-<a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>で429エラーになる問題をようやく解消できた!<br /> 凡ミスだけどこれはわかりにくいぞ〜!!!🤣</p> <p><blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr"><a class="keyword" href="http://d.hatena.ne.jp/keyword/PA">PA</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>のTooManyRequest問題にずっと悩まされてたんやけど、今日ふとマーケットが <a href="https://t.co/DKttEhxD2l">https://t.co/DKttEhxD2l</a> になってることに気づいて <a href="https://t.co/qPdYr7JWlg">https://t.co/qPdYr7JWlg</a> に変更したら解決した!全然気づかんかった・・😇<br>ス<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AF%A5%E9%A5%C3%A5%C1">クラッチ</a>パッド検証の時点で出鼻をくじかれてたのでよやく次に進める。やっていき!💪</p>&mdash; にっしー🍵個人開発 (@paranishian) <a href="https://twitter.com/paranishian/status/1263445947255713792?ref_src=twsrc%5Etfw">2020年5月21日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </p> <h2><a class="keyword" href="http://d.hatena.ne.jp/keyword/Podcast">Podcast</a></h2> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fopen.spotify.com%2Fshow%2F0CZueSlPFC98rmjUmJdtQl" title="よもやま.fm - Kiyoshi" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://open.spotify.com/show/0CZueSlPFC98rmjUmJdtQl">open.spotify.com</a></cite></p> <p>配信ペース落ちてきたけどまだ続けられてる!エラい!<br /> 5月はエピソードを2つ配信した!!<br /> そんな有益な話はしてないけど自分が楽しければそれでヨシ!<br /> Anchorの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C0%A5%C3%A5%B7%A5%E5">ダッシュ</a>ボード見ると、合計再生回数は2.7Kくらい!📈</p> <h2>まとめ</h2> <p>5月はお絵かきコラボの改善がメインだった!<br /> 6月からは新しいプロダクトにも着手していくぞ〜!💪</p> paranishian 個人開発アプリのFirebase費用を30%削減した話 hatenablog://entry/26006613568164669 2020-05-31T18:00:00+09:00 2020-05-31T21:58:43+09:00 個人開発アプリ「お絵かきコラボ」はリリースしてもう1年半くらい経つけど、まだ結構なユーザーさんに遊んでもらっている。本当にありがたい。 バックエンドにはFirebaseを使っているんだけど、長く楽しんでもらうにつれて費用もかさんできたので、削減できるところはないか調べてテコ入れすることにした。 結果、30%ほど費用を削減することができた!わーい!👏 5/6,7 あたりに修正版をリリースして以降、傾きが緩やかになっている どんなことをしたのかさくっとまとめていく📝 Firestore お絵かきのマッチングのたびに、お題を取得したりユーザー情報を取得したりしてるのと、毎回15分程度遊んでもらってる… <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20200531/20200531143813.png" alt="f:id:paranishian:20200531143813p:plain" title="f:id:paranishian:20200531143813p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>個人開発アプリ「お絵かきコラボ」はリリースしてもう1年半くらい経つけど、まだ結構なユーザーさんに遊んでもらっている。本当にありがたい。</p> <p>バックエンドにはFirebaseを使っているんだけど、長く楽しんでもらうにつれて費用もかさんできたので、削減できるところはないか調べてテコ入れすることにした。</p> <p>結果、30%ほど費用を削減することができた!わーい!👏 <figure class="figure-image figure-image-fotolife" title="5/6,7 あたりに修正版をリリースして以降、傾きが緩やかになっている"><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20200531/20200531135656.png" alt="f:id:paranishian:20200531135656p:plain" title="f:id:paranishian:20200531135656p:plain" class="hatena-fotolife" itemprop="image"></span><figcaption>5/6,7 あたりに修正版をリリースして以降、傾きが緩やかになっている</figcaption></figure></p> <p>どんなことをしたのかさくっとまとめていく📝</p> <h2>Firestore</h2> <p>お絵かきのマッチングのたびに、お題を取得したりユーザー情報を取得したりしてるのと、毎回15分程度遊んでもらってるのでREAD数が結構多い。<br /> ・・・にしても、ユーザー数に対してREADが多すぎる。なんでーー??みたいな状態だったので、<a class="keyword" href="http://d.hatena.ne.jp/keyword/iOS">iOS</a>/<a class="keyword" href="http://d.hatena.ne.jp/keyword/Android">Android</a>/サーバーのコードをすべてチェックして怪しそうなところを見つけていった。</p> <p>それにしても、どこでどれだけクエリ使われてるか、みたいなのもっとわかりやすくしてほしい。 原因箇所の特定が本当にむずかしい。(実はそういうデータの取り方合ったりするのかな?)</p> <p>調査の結果、特定した箇所が2つ。</p> <h3>TOP画面の改善</h3> <p>まず1つ目は、TOPページの最新の絵を取得する箇所で、毎回最新の絵を<code>limit(10)</code>といった具合に取得していた。(諸事情により、表示数よりあえて多めに取得していた) <span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20200531/20200531112930.png" alt="f:id:paranishian:20200531112930p:plain" title="f:id:paranishian:20200531112930p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>また、「もう一度遊ぶ」で毎回TOPに戻ってしまう画面遷移にもなっていた。(毎回fetchされることになるのでこれも改善した)</p> <p>ユーザーの一日平均プレイ回数が10だとして、<br /> 10 limit x 10 TOP表示 x 1万DAU = 100万READ/day<br /> という計算になる。これはバカにならない。。</p> <p>今回、<code>drawings</code>コレクションから複数documentを取得するのではなく、新しいコレクション<code>top-drawings</code>をつくり、クライアントからはその最新の1件だけ取得するようにした。<br /> <code>top-drawings</code>にarrayフィールドを持たせていて、そこに最新の<code>drawings</code>が10件格納されている、という流れ。(10分毎に<code>top-drawings</code>のarrayにぶちこむバッチを走らせている)</p> <p>これで、<code>limit(10)</code> -> <code>limit(1)</code>になるので単純計算でREAD数が10分の1になる。</p> <h3>マイギャラリーの改善</h3> <p>2つ目はマイギャラリーの枚数表示で、実は全document取得してその数を表示していた。(なんという Bad Practice..!!)</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20200531/20200531113034.png" alt="f:id:paranishian:20200531113034p:plain" title="f:id:paranishian:20200531113034p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>なんと5,000枚以上描いてるユーザーさんも結構いるのでかなり<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%D1%A5%AF">インパク</a>トが大きい。<br /> このへんは長生きなプロダクトならではの問題かもしれない。(まあ設計時点での考慮漏れなんだけど)</p> <p>描いた絵の枚数は<code>increment</code>した値を使い、ページングも導入して初回から全件取得しないようにした。</p> <h3>結果</h3> <p>READ数は200万/dayほど削減できて、費用としては30%削減できた!よっしゃ! <span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20200531/20200531112534.png" alt="f:id:paranishian:20200531112534p:plain" title="f:id:paranishian:20200531112534p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>この読みがあたってたのは結構嬉しい😙</p> <p><blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">サーバー、クライアントのコードを舐め回すように見た結果、総量を圧迫している原因の一部がわかった。200万read/dayくらい減らんかな〜、そんなうまくはいかんのやろうけどな〜</p>&mdash; にっしー🍵個人開発 (@paranishian) <a href="https://twitter.com/paranishian/status/1256823929273905152?ref_src=twsrc%5Etfw">2020年5月3日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </p> <h2>Storage</h2> <p>お絵かきアプリなのでもちろん画像を扱っているんだけど、30秒や60秒で描く絵なのでシンプルなものが多い。にもかからわず画像の容量が結構多いなーという印象だった。もっと画像を圧縮して容量削減できるのでは?と思いいろいろと試行錯誤した。</p> <p>結果、ファイル形式を<a class="keyword" href="http://d.hatena.ne.jp/keyword/JPEG">JPEG</a> -> <a class="keyword" href="http://d.hatena.ne.jp/keyword/PNG">PNG</a>に変更し、<code>imagemin</code> + <code>imagemin-pngquant</code>を使って<a class="keyword" href="http://d.hatena.ne.jp/keyword/png">png</a>圧縮することで容量削減に成功した。 また、<a class="keyword" href="http://d.hatena.ne.jp/keyword/PNG">PNG</a>にした副次的な効果として、色合いも鮮やかになった。 このへんの画像の知識あまりなかったので良い勉強になった。</p> <p><figure class="figure-image figure-image-fotolife" title="ほんとは同じ画像で検証しないといけないけどサボってしまった"><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20200531/20200531135526.png" alt="f:id:paranishian:20200531135526p:plain" title="f:id:paranishian:20200531135526p:plain" class="hatena-fotolife" itemprop="image"></span><figcaption>ほんとは同じ画像で検証しないといけないけどサボってしまった</figcaption></figure></p> <h3>結果</h3> <p>Storageのグラフは積み上げなので全然差分がわからないけど、1.7GB/dayだったのが1.1G/day程度に抑えられた。 費用としては50%減!!やったね!</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20200531/20200531112521.png" alt="f:id:paranishian:20200531112521p:plain" title="f:id:paranishian:20200531112521p:plain" class="hatena-fotolife" itemprop="image"></span></p> <h2>おわりに</h2> <p>まだまだ改善すべき箇所は多いけど、少しずつ対応していきたい。<br /> 子育てのほうが優先度が高いのでなかなか個人開発の時間が取れなくなってきたけど、「リソースをあえて制限することで集中できる」なんて話もあるし、これからも前向きにがんばる所存。</p> <p>もっともっと経験値をためて、Firebaseマスターにおれはなる!💪</p> <h2>おまけ</h2> <blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">100万read/dayくらい削減できるポイント見つけた💡<br>やっぱ頭使う仕事は朝に限るな〜😋<br><br>…と浮かれて計算してみたら$0.06/10万readなので$18/monthくらいの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%D1%A5%AF">インパク</a>トしかなかった…🥺firestore安すぎひんか…</p>&mdash; にっしー🍵個人開発 (@paranishian) <a href="https://twitter.com/paranishian/status/1257106567540781056?ref_src=twsrc%5Etfw">May 4, 2020</a></blockquote> <p> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></p> <h2>参考</h2> <p><div class="itunes-embed freezed itunes-kind-software"><a href="https://apps.apple.com/jp/app/%E3%81%8A%E7%B5%B5%E3%81%8B%E3%81%8D%E3%82%B3%E3%83%A9%E3%83%9C/id1445350507?uo=4&at=10lncm" rel="nofollow" target="_blank"><img src="https://cdn.image.st-hatena.com/image/scale/882a00dfe7316ff3464fe837cea90726b2c91302/enlarge=0;height=200;version=1;width=200/https%3A%2F%2Fis4-ssl.mzstatic.com%2Fimage%2Fthumb%2FPurple113%2Fv4%2F94%2F6f%2F45%2F946f4554-4171-fe75-4ce3-737ec437c0bc%2Fsource%2F100x100bb.jpg" alt="お絵かきコラボ" title="お絵かきコラボ" class="itunes-embed-image"/></a><div class="itunes-embed-info"><p class="itunes-embed-title"><a href="https://apps.apple.com/jp/app/%E3%81%8A%E7%B5%B5%E3%81%8B%E3%81%8D%E3%82%B3%E3%83%A9%E3%83%9C/id1445350507?uo=4&at=10lncm" rel="nofollow" target="_blank">お絵かきコラボ</a></p><ul><li class="itunes-embed-artist">RYOSUKE HIRAMATSU</li><li class="itunes-embed-genre">ゲーム</li><li class="itunes-embed-price">無料</li><li class="itunes-embed-badge"><a href="https://apps.apple.com/jp/app/%E3%81%8A%E7%B5%B5%E3%81%8B%E3%81%8D%E3%82%B3%E3%83%A9%E3%83%9C/id1445350507?uo=4&at=10lncm" rel="nofollow" target="_blank"><img src="https://cdn.blog.st-hatena.com/images/theme/itunes/itunes-badge-appstore@2x.png" width="60px" height="15px" /></a></li></ul></div></div><cite class="hatena-citation"><a href="https://apps.apple.com/jp/app/%E3%81%8A%E7%B5%B5%E3%81%8B%E3%81%8D%E3%82%B3%E3%83%A9%E3%83%9C/id1445350507">apps.apple.com</a></cite> <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dkk.draw.together%26hl%3Dja" title="お絵かきコラボ - Google Play のアプリ" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://play.google.com/store/apps/details?id=kk.draw.together&hl=ja">play.google.com</a></cite></p> <ul> <li><a href="https://github.com/imagemin/imagemin">GitHub - imagemin/imagemin: Minify images seamlessly</a></li> <li><a href="https://github.com/imagemin/imagemin-pngquant">GitHub - imagemin/imagemin-pngquant: Imagemin plugin for `pngquant`</a></li> </ul> paranishian ゼロから始めるYouTubeライブ配信 〜個人開発アプリのTVデビューを見守る編〜 hatenablog://entry/26006613568189092 2020-05-19T08:00:00+09:00 2020-05-31T21:59:15+09:00 個人開発しているお絵かきコラボがTVデビューするということで、せっかくなので開発メンバーで一緒にテレビを見て、さらにそれを配信して公開することにした。 な、な、なんと!個人開発してる #お絵かきコラボ がTVデビューします!🎉収録内容は知らされていないので開発メンバーでドキドキしながら見守ります…🥺当日はその様子をYouTubeでライブ配信するので、副音声的に楽しんでもらえたら嬉しいです!!5/16(土) 11:03〜https://t.co/yiPpSdr7eD— にっしー🍵個人開発 (@paranishian) 2020年5月13日 結果、ライブ配信では16名、合計では現在50名を超える方… <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20200519/20200519071235.png" alt="f:id:paranishian:20200519071235p:plain" title="f:id:paranishian:20200519071235p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>個人開発しているお絵かきコラボがTVデビューするということで、せっかくなので開発メンバーで一緒にテレビを見て、さらにそれを配信して公開することにした。</p> <p><blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">な、な、なんと!個人開発してる <a href="https://twitter.com/hashtag/%E3%81%8A%E7%B5%B5%E3%81%8B%E3%81%8D%E3%82%B3%E3%83%A9%E3%83%9C?src=hash&amp;ref_src=twsrc%5Etfw">#お絵かきコラボ</a> がTVデビューします!🎉<br>収録内容は知らされていないので開発メンバーでドキドキしながら見守ります…🥺<br>当日はその様子を<a class="keyword" href="http://d.hatena.ne.jp/keyword/YouTube">YouTube</a>で<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E9%A5%A4%A5%D6%C7%DB%BF%AE">ライブ配信</a>するので、副音声的に楽しんでもらえたら嬉しいです!!<br><br>5/16(土) 11:03〜<a href="https://t.co/yiPpSdr7eD">https://t.co/yiPpSdr7eD</a></p>&mdash; にっしー🍵個人開発 (@paranishian) <a href="https://twitter.com/paranishian/status/1260371478005964800?ref_src=twsrc%5Etfw">2020年5月13日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </p> <p>結果、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E9%A5%A4%A5%D6%C7%DB%BF%AE">ライブ配信</a>では16名、合計では現在50名を超える方が視聴してくれてワイワイ楽しい会になった。(来ていただいた方ありがとうございます!🙇‍♂️)</p> <iframe width="560" height="315" src="https://www.youtube.com/embed/MFBiMc8dOkk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <p>こうやって、自分で副産物を考えてコンテンツとして提供できるのはとても楽しい。</p> <p>ちなみに、番組内で取り上げられたのは1分くらいで、想像以上に一瞬だったw</p> <p>番組の反響を数字で公開しようと思ったけど、思った以上に微風、いや、そよ風レベルだったので公開しないかも😇</p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E9%A5%A4%A5%D6%C7%DB%BF%AE">ライブ配信</a>自体人生で初めての経験だったので、配信環境をどう整えたのかをまとめていく。</p> <h2><a class="keyword" href="http://d.hatena.ne.jp/keyword/YouTube">YouTube</a><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E9%A5%A4%A5%D6%C7%DB%BF%AE">ライブ配信</a></h2> <p>「<a class="keyword" href="http://d.hatena.ne.jp/keyword/YouTube">YouTube</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E9%A5%A4%A5%D6%C7%DB%BF%AE">ライブ配信</a>」で<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B0%A5%B0%A4%EB">ググる</a>ところからスタート。<br /> 結果、エンコーダ配信という方法で配信するんだなということがわかった。</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fsupport.google.com%2Fyoutube%2Fanswer%2F2907883" title="Create a live stream with an encoder - YouTube Help" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://support.google.com/youtube/answer/2907883">support.google.com</a></cite></p> <p>注意点としては、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E9%A5%A4%A5%D6%C7%DB%BF%AE">ライブ配信</a>の準備には24時間くらい必要なのであらかじめポチっておくこと。</p> <p><blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">準備ちゅう <a href="https://t.co/cR14oN6inv">pic.twitter.com/cR14oN6inv</a></p>&mdash; にっしー🍵個人開発 (@paranishian) <a href="https://twitter.com/paranishian/status/1259652640125771777?ref_src=twsrc%5Etfw">2020年5月11日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </p> <h2>配信の構成</h2> <p>今回、開発メンバー3名でわいわいダベってる内容を配信するということで、どうやって全員の音声を載せていくんや?みたいなところあったけど、いろいろ調べた結果、Discord → Audio Hijack → Soundflower → OBS → <a class="keyword" href="http://d.hatena.ne.jp/keyword/YouTube">YouTube</a><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E9%A5%A4%A5%D6%C7%DB%BF%AE">ライブ配信</a>という構成で実現できた。<br /> 自分のPCから配信し、他メンバーはいつもどおりDiscordで話してるだけでOKという設計。</p> <p>以下、各アプリケーションについてざっと説明していく。<br /> (かなりざっくり説明なので詳細は<a href="https://twitter.com/paranishian">@paranishian</a>までお気軽にどうぞ)</p> <h3>Discord</h3> <p>ゲーム配信特化型Slackみたいなやつ。</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fdiscord.com%2F" title="Discord — A New Way to Chat with Friends &amp; Communities" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://discord.com/">discord.com</a></cite></p> <p>今回、誰が喋ってるのかわかりやすいように、<a href="https://streamkit.discord.com/overlay">Discord StreamKit Overlay</a>というツールをつかっておしゃべりアイコン枠を表示してみた。</p> <p>これを使いたいがためにDiscordを選んだ、みたいなところはある。<br /> (使わないなら普通にZOOMとか他のチャットツールでもOK)</p> <p>運営者ギルドの仲間から好評を得たので良かった。</p> <p><figure class="figure-image figure-image-fotolife" title="喋ってる人のアイコンが緑枠になる"><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20200518/20200518225738.png" alt="f:id:paranishian:20200518225738p:plain" title="f:id:paranishian:20200518225738p:plain" class="hatena-fotolife" itemprop="image"></span><figcaption>喋ってる人のアイコンが緑枠になる</figcaption></figure></p> <h3>Audio Hijack</h3> <p>音声の入出力を操作できるやつ。</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Frogueamoeba.com%2Faudiohijack%2F" title="Audio Hijack - Record any audio on Mac" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://rogueamoeba.com/audiohijack/">rogueamoeba.com</a></cite></p> <p>有料だけど買っておいて間違いない。<br /> 自分は<a class="keyword" href="http://d.hatena.ne.jp/keyword/Podcast">Podcast</a>配信のために購入して使っていた。</p> <p>配信にあたり、自分と他メンバーの音の差分をなくすために、自分の声含めすべてDiscord経由の音を流すようにした。</p> <p><figure class="figure-image figure-image-fotolife" title="上が配信する音声、下が他メンバーの音声"><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20200518/20200518225929.png" alt="f:id:paranishian:20200518225929p:plain" title="f:id:paranishian:20200518225929p:plain" class="hatena-fotolife" itemprop="image"></span><figcaption>上が全員の音声(配信用)、下が他メンバーの音声(会話用)</figcaption></figure></p> <h3>Soundflower</h3> <p>仮想オーディオ入出力装置。</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Frogueamoeba.com%2Ffreebies%2Fsoundflower%2F" title="Rogue Amoeba | Soundflower" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://rogueamoeba.com/freebies/soundflower/">rogueamoeba.com</a></cite></p> <p>ゲーム配信者が自分の声とゲーム音声を流すために使うやつ。<br /> 今回はこれを使ってDiscordの音声をそのまま配信することにした。</p> <p>他にも同様のソフトウェアがあるみたいなので次の配信までに試してみる。</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fapplech2.com%2Farchives%2F20200516-blackhole-for-mac-virtual-audio-driver-now-notarized.html" title="SoundFlowerのようにMacに仮想オーディオ入出力装置を作成できるオーディオ・ユーティリティ「BlackHole」がAppleの公証を取得し、マルウェア警告なしにインストール可能に。" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://applech2.com/archives/20200516-blackhole-for-mac-virtual-audio-driver-now-notarized.html">applech2.com</a></cite></p> <h3>OBS Studio</h3> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E9%A5%A4%A5%D6%C7%DB%BF%AE">ライブ配信</a>できる無料の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AA%A1%BC%A5%D7%A5%F3%A5%BD%A1%BC%A5%B9">オープンソース</a>ソフトウェア。</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fobsproject.com%2Fja" title="Open Broadcaster Software®️ | OBS" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://obsproject.com/ja">obsproject.com</a></cite></p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/YouTube">YouTube</a><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E9%A5%A4%A5%D6%C7%DB%BF%AE">ライブ配信</a>の際に取得したストリームキーを設定して、配信画面を整え、マイク音声を設定すればOK。<br /> 映像<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D3%A5%C3%A5%C8%A5%EC%A1%BC%A5%C8">ビットレート</a>は2000 Kbps、<a class="keyword" href="http://d.hatena.ne.jp/keyword/FPS">FPS</a>は30に設定した。<br /> (このへんのチューニングはまだ素人なのでこれから)</p> <p><figure class="figure-image figure-image-fotolife" title="マウス音声に、Audio Hijackで出力先に指定したSoundflower(64ch)を設定"><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20200518/20200518230457.png" alt="f:id:paranishian:20200518230457p:plain" title="f:id:paranishian:20200518230457p:plain" class="hatena-fotolife" itemprop="image"></span><figcaption>マウス音声に、Audio Hijackで出力先に指定したSoundflower(64ch)を設定</figcaption></figure></p> <h2>おわりに</h2> <p>こうやって趣味から派生しておもしろい事ができて嬉しい。<br /> 話にのってくれた開発メンバー、遊びに来てくれたワイワイメンバーにも感謝🙏<br /> これからももっと新しいことにチャレンジしてくぞ〜〜!!💪</p> <h3>おまけ</h3> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E9%A5%A4%A5%D6%C7%DB%BF%AE">ライブ配信</a>の手前で挫けそうになってるところ <span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20200519/20200519065514.png" alt="f:id:paranishian:20200519065514p:plain" title="f:id:paranishian:20200519065514p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>おしまい。</p> <h2>参考</h2> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fvip-jikkyo.net%2Fcapture-discord-audio-with-obs" title="OBSでDiscordの通話音声を入れる方法。ほぼ設定不要です" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://vip-jikkyo.net/capture-discord-audio-with-obs">vip-jikkyo.net</a></cite> <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Ftechsupport.freshlive.tv%2Fmanual%2Fobs_game%2F" title="OBSを使ったMacでのゲーム配信方法 – FRESH LIVE テクニカルサポート" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://techsupport.freshlive.tv/manual/obs_game/">techsupport.freshlive.tv</a></cite> <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fwww.sawanoboly.net%2F2017%2F11%2Fdiscord-ah%2F" title="DiscordとAudio Hijackでたぶん快適なPodcast収録 - Sawanoboly.net" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://www.sawanoboly.net/2017/11/discord-ah/">www.sawanoboly.net</a></cite> <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fscrapbox.io%2Ftako%2FOBS%25E3%2581%25ABDiscord%25E3%2581%25AE%25E9%2580%259A%25E8%25A9%25B1%25E3%2582%2592%25E9%258C%25B2%25E9%259F%25B3%25E3%2581%2599%25E3%2582%258B_(Mac)" title="OBSにDiscordの通話を録音する (Mac) - 🐙" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://scrapbox.io/tako/OBS%E3%81%ABDiscord%E3%81%AE%E9%80%9A%E8%A9%B1%E3%82%92%E9%8C%B2%E9%9F%B3%E3%81%99%E3%82%8B_(Mac)">scrapbox.io</a></cite></p> paranishian 【月報】2020年4月の開発進捗や数字など hatenablog://entry/26006613559704222 2020-05-01T21:42:15+09:00 2020-05-02T01:05:28+09:00 月報なるものをはじめてみる。 箇条書きでつらつらと📝 個人開発 お絵かきコラボ お絵かきコラボRYOSUKE HIRAMATSUゲーム無料apps.apple.com play.google.com おうち時間に楽しんでくれているユーザーの声が多くて嬉しい 3月に取材を受けた記事がGW明けくらいに公開されるようなので楽しみ 問い合わせ先を用意できていなかったのでGitHub Pages+Google Formで設置することにした Firebaseの費用が結構かさんでるのでがんばって削減したい この気分が落ち込むご時世でも、おうち時間を笑って楽しめるアプリとして、今後も注力していきたい。 このレ… <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20200501/20200501214552.png" alt="f:id:paranishian:20200501214552p:plain" title="f:id:paranishian:20200501214552p:plain" class="hatena-fotolife" itemprop="image"></span> 月報なるものをはじめてみる。<br /> 箇条書きでつらつらと📝</p> <h2>個人開発</h2> <h3>お絵かきコラボ</h3> <p><div class="itunes-embed freezed itunes-kind-software"><a href="https://apps.apple.com/jp/app/%E3%81%8A%E7%B5%B5%E3%81%8B%E3%81%8D%E3%82%B3%E3%83%A9%E3%83%9C/id1445350507?uo=4&at=10lncm" rel="nofollow" target="_blank"><img src="https://cdn.image.st-hatena.com/image/scale/8c1005b31ae9bc6f8188a387d14f6ee5cc413805/enlarge=0;height=200;version=1;width=200/https%3A%2F%2Fis4-ssl.mzstatic.com%2Fimage%2Fthumb%2FPurple123%2Fv4%2Fa1%2F1a%2F7a%2Fa11a7a0b-117b-39a3-eb77-9fdb37092bc6%2Fsource%2F100x100bb.jpg" alt="お絵かきコラボ" title="お絵かきコラボ" class="itunes-embed-image"/></a><div class="itunes-embed-info"><p class="itunes-embed-title"><a href="https://apps.apple.com/jp/app/%E3%81%8A%E7%B5%B5%E3%81%8B%E3%81%8D%E3%82%B3%E3%83%A9%E3%83%9C/id1445350507?uo=4&at=10lncm" rel="nofollow" target="_blank">お絵かきコラボ</a></p><ul><li class="itunes-embed-artist">RYOSUKE HIRAMATSU</li><li class="itunes-embed-genre">ゲーム</li><li class="itunes-embed-price">無料</li><li class="itunes-embed-badge"><a href="https://apps.apple.com/jp/app/%E3%81%8A%E7%B5%B5%E3%81%8B%E3%81%8D%E3%82%B3%E3%83%A9%E3%83%9C/id1445350507?uo=4&at=10lncm" rel="nofollow" target="_blank"><img src="https://cdn.blog.st-hatena.com/images/theme/itunes/itunes-badge-appstore@2x.png" width="60px" height="15px" /></a></li></ul></div></div><cite class="hatena-citation"><a href="https://apps.apple.com/jp/app/%E3%81%8A%E7%B5%B5%E3%81%8B%E3%81%8D%E3%82%B3%E3%83%A9%E3%83%9C/id1445350507">apps.apple.com</a></cite> <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dkk.draw.together%26hl%3Dja" title="お絵かきコラボ - Google Play のアプリ" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://play.google.com/store/apps/details?id=kk.draw.together&hl=ja">play.google.com</a></cite></p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20200501/20200501210925.png" alt="f:id:paranishian:20200501210925p:plain" title="f:id:paranishian:20200501210925p:plain" class="hatena-fotolife" itemprop="image"></span></p> <ul> <li>おうち時間に楽しんでくれているユーザーの声が多くて嬉しい</li> <li>3月に取材を受けた記事がGW明けくらいに公開されるようなので楽しみ</li> <li>問い合わせ先を用意できていなかったので<a class="keyword" href="http://d.hatena.ne.jp/keyword/GitHub">GitHub</a> Pages+<a class="keyword" href="http://d.hatena.ne.jp/keyword/Google">Google</a> Formで設置することにした</li> <li>Firebaseの費用が結構かさんでるのでがんばって削減したい</li> </ul> <p>この気分が落ち込むご時世でも、おうち時間を笑って楽しめるアプリとして、今後も注力していきたい。</p> <p><blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">このレビューは嬉しい🥰<a href="https://twitter.com/hashtag/%E3%81%8A%E7%B5%B5%E3%81%8B%E3%81%8D%E3%82%B3%E3%83%A9%E3%83%9C?src=hash&amp;ref_src=twsrc%5Etfw">#お絵かきコラボ</a><a href="https://t.co/RT3sK2mxi7">https://t.co/RT3sK2mxi7</a> <a href="https://t.co/31cFLKi303">pic.twitter.com/31cFLKi303</a></p>&mdash; にっしー🍵個人開発 (@paranishian) <a href="https://twitter.com/paranishian/status/1252543136351481861?ref_src=twsrc%5Etfw">2020年4月21日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </p> <h3>法務書籍通知サービス</h3> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20200501/20200501212313.png" alt="f:id:paranishian:20200501212313p:plain" title="f:id:paranishian:20200501212313p:plain" class="hatena-fotolife" itemprop="image"></span></p> <ul> <li>完全に友人向けなので特に公開はしないけど、無事にリリースした</li> <li>Heroku + puppeteer + SendGridで完全無料枠でつくったのでいい勉強になった</li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/PA">PA</a>-<a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>使おうとしたけど永遠にToo Many Requestsと言われるのでもうしらん..</li> </ul> <h2>技術のキャッチアップ</h2> <h3>Flutter</h3> <ul> <li>Flutterの勉強が完全にお蔵入りしてるので5月こそは入門し直したい</li> <li>一通りUdemy終わったら、既存のプロダクト(Obj-C)をリニューアル予定</li> </ul> <h3>Firestore</h3> <ul> <li>完全にオレオレ設計になってたのでちゃんとインプットすることにした</li> </ul> <p><blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">知見を得るためにポチった<a href="https://t.co/MKCpKEIVF2">https://t.co/MKCpKEIVF2</a></p>&mdash; にっしー🍵個人開発 (@paranishian) <a href="https://twitter.com/paranishian/status/1245889603237580805?ref_src=twsrc%5Etfw">2020年4月3日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </p> <h2>情報発信</h2> <h3>ブログ</h3> <ul> <li>リモートワークに関するノウハウを公開したら思いの外好評だったのは嬉しい</li> <li>これからは岡山でのプレゼンスを高めるためにも?もうすこし発信を増やしていきたい <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fparanishian.hateblo.jp%2Fentry%2F2020%2F04%2F06%2F065744" title="フルリモートワークで意識していること - paranitips" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://paranishian.hateblo.jp/entry/2020/04/06/065744">paranishian.hateblo.jp</a></cite></li> </ul> <h3><a class="keyword" href="http://d.hatena.ne.jp/keyword/Podcast">Podcast</a></h3> <ul> <li>趣味で友人と始めて合計2,000再生突破した</li> <li>音声編集初めてだけど新しいツールを触ったりするのめっちゃ楽しい</li> <li>これからもゆるりと続けていきたい</li> </ul> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fopen.spotify.com%2Fshow%2F0CZueSlPFC98rmjUmJdtQl" title="よもやま.fm - yomoyamafm" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://open.spotify.com/show/0CZueSlPFC98rmjUmJdtQl">open.spotify.com</a></cite></p> <h2>まとめ</h2> <p>4月は友人からの副業を受けすぎて個人開発の時間をぜんぜん作れなかった。<br /> 5月から半分程度に減らしたのでお絵かきコラボの改善、Flutterの勉強を進めていきたい。</p> <p>がんばるぞっ!💪</p> paranishian フルリモートワークで意識していること hatenablog://entry/26006613545459915 2020-04-06T06:57:44+09:00 2020-04-06T13:50:42+09:00 今までは隔週で東京と岡山を行き来する働き方をしていたけど、このご時世ってのもあり2月からずっとフルリモート@岡山で働いている。 仕事自体には特に支障はなく、とてもうまくやれている気がする。(一緒に働いている人がとても優秀、かつチームが小さいってのが大きいと思う) で、なんとなく最近意識していることをまとめる。 <p><figure class="figure-image figure-image-fotolife" title="Photo by Marc Mintel on Unsplash"><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20200406/20200406065913.jpg" alt="f:id:paranishian:20200406065913j:plain" title="f:id:paranishian:20200406065913j:plain" class="hatena-fotolife" itemprop="image"></span><figcaption>Photo by Marc Mintel on Unsplash</figcaption></figure></p> <p>今までは隔週で東京と岡山を行き来する働き方をしていたけど、このご時世ってのもあり2月からずっとフルリモート@岡山で働いている。 仕事自体には特に支障はなく、とてもうまくやれている気がする。(一緒に働いている人がとても優秀、かつチームが小さいってのが大きいと思う)<br /> で、なんとなく最近意識していることをまとめる。</p> <h2>一日のリズムをつくる</h2> <p>メリハリがとても大切なのでリズムをつくっている。</p> <p>最近の一日の流れは</p> <pre class="code" data-lang="" data-unlink>06:00 起床、読書 07:00 朝飯、👨‍👩‍👦の楽しい時間 09:00 始業 12:00 お昼、👨‍👩‍👦の楽しい時間 15:00 散歩 18:00 終業、個人開発開始 19:00 晩飯、👨‍👩‍👦の楽しい時間 〜〜〜 23:00 就寝</pre> <p>といった感じ。<br /> ちゃんと朝型の生活を継続できてるのは嬉しい。</p> <h2>集中できる環境をつくる</h2> <p>会社と違ってとにかく誘惑が多いので、気の散るものは机から排除した。<br /> ちなみに最近開発環境をアップデートした。 <blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">環境構築done🤩 <a href="https://t.co/shFJxEBnBd">pic.twitter.com/shFJxEBnBd</a></p>&mdash; にっしー (@paranishian) <a href="https://twitter.com/paranishian/status/1246413633967411201?ref_src=twsrc%5Etfw">2020年4月4日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </p> <p>4Kモニターが3万ちょいで買えてすごく快適になった。</p> <p><div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07SSNT1P9/pamazon-22/"><img src="https://m.media-amazon.com/images/I/512KEDuFmZL._SL160_.jpg" class="hatena-asin-detail-image" alt="HP モニター 27インチ 4K ディスプレイ 解像度3840x2160 非光沢 IPSパネル 高視野角 超薄型 省スペース HP 27f 4K (型番:5ZP65AA#ABJ)" title="HP モニター 27インチ 4K ディスプレイ 解像度3840x2160 非光沢 IPSパネル 高視野角 超薄型 省スペース HP 27f 4K (型番:5ZP65AA#ABJ)"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07SSNT1P9/pamazon-22/">HP モニター 27インチ 4K ディスプレイ 解像度3840x2160 非光沢 IPSパネル 高視野角 超薄型 省スペース HP 27f 4K (型番:5ZP65AA#ABJ)</a></p><ul><li><span class="hatena-asin-detail-label">メディア:</span> エレクトロニクス</li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>そもそも自分の仕事部屋を持つこと自体、東京ではなかなか難しいとおもうので地方に移住してよかったなと感じている。</p> <h2>運動する時間をつくる</h2> <p>休憩がてら家の周辺を30分くらい散歩するようにしている。<br /> けど、やっぱそれだけだと運動不足になるのでリングフィットアド<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D9%A5%F3%A5%C1%A5%E3%A1%BC">ベンチャー</a>で工夫したい。<br /> けど、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A4%C9%A4%A6%A4%D6%A4%C4%A4%CE%BF%B9">どうぶつの森</a>で家族にswitchを奪われてる&switch品切れで買えなくて詰んでいる。<br /> とりあえず筋トレしていくつもり。</p> <h2>雑談する</h2> <p>やっぱりこもりっきりは鬱になるので雑談が良いリフレッシュになっている。<br /> いろんなコミュニティに所属することが大事かもしれない。<br /> いまの雑談場所は、チームメンバーとのZOOMか個人開発Slackか運営者ギルドのSlack。</p> <p>最近オンライン飲み会もやってみたけど、意外とテーマを用意しないと序盤で会話が詰むな、、という学びがあった。</p> <h2>働きすぎないようにする</h2> <p>正直これはまだあまり意識できていない。<br /> ついつい働きすぎてしまうので時間管理ツールなどを使って制御しようと思っている。</p> <h2>家族との時間を大切にする</h2> <p>最近特に思うこと。<br /> このご時世もあって、誰がいつどうなっても後悔しないように愛情を注ぎまくっている。<br /> すぐ隣の部屋に行けば家族とイチャコラできるってのはなかなかの誘惑で、とりあえず<a class="keyword" href="http://d.hatena.ne.jp/keyword/AirPods">AirPods</a> Proでノイキャンして自分の世界に没入することでなんとかやり過ごしている。</p> <h2>その他雑記</h2> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Podcast">Podcast</a>を聴く時間がすごく減った。<br /> いまは散歩のときか洗い物や洗濯物してるときに聴くくらい。<br /> もう少し時間をつくりたい。</p> <p>開発のモチベーションを維持する工夫もしている。 <blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">頭に擦り込みたい言葉達を常に見られるようにしてる <a href="https://t.co/u0GKH5RkuE">pic.twitter.com/u0GKH5RkuE</a></p>&mdash; にっしー (@paranishian) <a href="https://twitter.com/paranishian/status/1246614816296292352?ref_src=twsrc%5Etfw">2020年4月5日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </p> <p>ちなみにこれは心理学的にもいいらしい。</p> <p><blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">無意識のうちに<br>人は周りの環境にとても大きな影響を受けています。<br>ネガティブな言葉に触れる機会が多いと、<br>やはり気が滅入ってしまうものです。<br><br>今、あなたのタイムラインは健康ですか?<br>もしそうでないなら<a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a>を離れて、明るいお話の本など読むと良いですよ☺️<a href="https://twitter.com/hashtag/%E3%82%84%E3%82%8B%E6%B0%97%E3%81%A8%E7%BF%92%E6%85%A3?src=hash&amp;ref_src=twsrc%5Etfw">#やる気と習慣</a> の <a href="https://twitter.com/hashtag/%E5%BF%83%E7%90%86%E5%AD%A6%E5%9B%B3%E8%A7%A3?src=hash&amp;ref_src=twsrc%5Etfw">#心理学図解</a> <a href="https://t.co/zBJlbtP9Ae">pic.twitter.com/zBJlbtP9Ae</a></p>&mdash; 心理学に基づいた英単語サービス『BooQs』 (@BooQs_net) <a href="https://twitter.com/BooQs_net/status/1246754566269358080?ref_src=twsrc%5Etfw">2020年4月5日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </p> <p>そういえば、東京ぜんぜん行ってないのに東京の事務所家賃を払い続けてるのなんとなくつらい。</p> <p>コロナが落ち着いたら「<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%EF%A1%BC%A5%AD%A5%F3%A5%B0%A5%B9%A5%DA%A1%BC%A5%B9">コワーキングスペース</a>で働いてみる」ような環境を変えることにもチャレンジしていきたい。</p> <h2>最後に</h2> <p>ちなみにこれすごく良かった。 <div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/4152094338/pamazon-22/"><img src="https://m.media-amazon.com/images/I/41nDcp8X7fL._SL160_.jpg" class="hatena-asin-detail-image" alt="強いチームはオフィスを捨てる: 37シグナルズが考える「働き方革命」" title="強いチームはオフィスを捨てる: 37シグナルズが考える「働き方革命」"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/4152094338/pamazon-22/">強いチームはオフィスを捨てる: 37シグナルズが考える「働き方革命」</a></p><ul><li><span class="hatena-asin-detail-label">作者:</span><a href="http://d.hatena.ne.jp/keyword/%A5%B8%A5%A7%A5%A4%A5%BD%A5%F3%A1%A6%A5%D5%A5%EA%A1%BC%A5%C9" class="keyword">ジェイソン・フリード</a>,<a href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%A4%A5%F4%A5%A3%A5%C3%A5%C9%A1%A6%A5%CF%A5%A4%A5%CD%A5%DE%A5%A4%A5%E4%A1%BC%A1%A6%A5%CF%A5%F3%A5%BD%A5%F3" class="keyword">デイヴィッド・ハイネマイヤー・ハンソン</a></li><li><span class="hatena-asin-detail-label">発売日:</span> 2014/01/24</li><li><span class="hatena-asin-detail-label">メディア:</span> 単行本</li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>興味のある章だけさくっと読むと1時間くらいで読了できるのでおすすめ。</p> <p>このエントリも良かった。</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fcloud.google.com%2Fblog%2Fja%2Fproducts%2Fproductivity-collaboration%2Fmake-work-from-home-work-for-you" title="上手な「在宅勤務」のコツ | Google Cloud Blog" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://cloud.google.com/blog/ja/products/productivity-collaboration/make-work-from-home-work-for-you">cloud.google.com</a></cite></p> <p>特にここ。</p> <blockquote><p>「自分自身(や他人)を大目に見る」</p></blockquote> <p>こういうときだからこそ自分にも周りにも優しくありたいとおもう今日このごろ。</p> paranishian 2019年買って良かったものを振り返る hatenablog://entry/26006613490147663 2019-12-28T22:47:07+09:00 2019-12-29T11:09:59+09:00 年末だし、今年買ったものをささっとまとめていく 💨 仕事編 AirPods Pro 今まではBoseのヘッドホン(QuietComfort 35II)を使ってたけど、すぐにこっちに乗り換えた。。ノイズキャンセリングの自然な体験が良すぎてもう手放せない。いろいろ試した結果、NCモードにして作業用BGMを音量小さめで聴いてるときが一番集中できる 😌 2台目のHHKB PFU Happy Hacking Keyboard Professional BT 英語配列/墨 PD-KB600B発売日: 2016/04/12メディア: Personal Computers 今年からデュアルキーボードを導入した… <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20191228/20191228223656.jpg" alt="f:id:paranishian:20191228223656j:plain" title="f:id:paranishian:20191228223656j:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>年末だし、今年買ったものをささっとまとめていく 💨</p> <h2>仕事編</h2> <h3><a class="keyword" href="http://d.hatena.ne.jp/keyword/AirPods">AirPods</a> Pro</h3> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fwww.apple.com%2Fjp%2Fairpods-pro%2F" title="AirPods Pro" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe></p> <p>今までは<a class="keyword" href="http://d.hatena.ne.jp/keyword/Bose">Bose</a>のヘッドホン(<a class="keyword" href="http://d.hatena.ne.jp/keyword/QuietComfort">QuietComfort</a> 35II)を使ってたけど、すぐにこっちに乗り換えた。。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%CE%A5%A4%A5%BA%A5%AD%A5%E3%A5%F3%A5%BB%A5%EA%A5%F3%A5%B0">ノイズキャンセリング</a>の自然な体験が良すぎてもう手放せない。いろいろ試した結果、NCモードにして作業用BGMを音量小さめで聴いてるときが一番集中できる 😌</p> <h3>2台目のHHKB</h3> <p><div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B01DVH7C0O/pamazon-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/41wysLyIk2L._SL160_.jpg" class="hatena-asin-detail-image" alt="PFU Happy Hacking Keyboard Professional BT 英語配列/墨 PD-KB600B" title="PFU Happy Hacking Keyboard Professional BT 英語配列/墨 PD-KB600B"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B01DVH7C0O/pamazon-22/">PFU Happy Hacking Keyboard Professional BT 英語配列/墨 PD-KB600B</a></p><ul><li><span class="hatena-asin-detail-label">発売日:</span> 2016/04/12</li><li><span class="hatena-asin-detail-label">メディア:</span> Personal Computers</li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>今年からデュアルキーボードを導入した。もともと肩こりに悩まされてたわけではないけど、姿勢は以前より良くなったと思う。 <blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">ムスッコ、0歳児にしてHHKBデュアルキーボードを使いこなす <a href="https://t.co/yDXErrquwh">pic.twitter.com/yDXErrquwh</a></p>&mdash; にっしー (@paranishian) <a href="https://twitter.com/paranishian/status/1170952997557288960?ref_src=twsrc%5Etfw">2019年9月9日</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></p> <h3>机と椅子</h3> <p><div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B081GRJY9W/pamazon-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/31aWBUyvoHL._SL160_.jpg" class="hatena-asin-detail-image" alt="[山善] テーブル ミニ 折りたたみ式 サイドテーブル 幅50×奥行48×高さ70cm ハイタイプ ウッディブラック YST-5040H(BK/BK) &amp; 折りたたみ パイプ 椅子 幅33×奥行43×高さ75cm スリム 使う場所を選ばない 完成品 シルバー・ブラック YZX-35(SB)【セット買い】" title="[山善] テーブル ミニ 折りたたみ式 サイドテーブル 幅50×奥行48×高さ70cm ハイタイプ ウッディブラック YST-5040H(BK/BK) &amp; 折りたたみ パイプ 椅子 幅33×奥行43×高さ75cm スリム 使う場所を選ばない 完成品 シルバー・ブラック YZX-35(SB)【セット買い】"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B081GRJY9W/pamazon-22/">[山善] テーブル ミニ 折りたたみ式 サイドテーブル 幅50×奥行48×高さ70cm ハイタイプ ウッディブラック YST-5040H(BK/BK) &amp; 折りたたみ パイプ 椅子 幅33×奥行43×高さ75cm スリム 使う場所を選ばない 完成品 シルバー・ブラック YZX-35(SB)【セット買い】</a></p><ul><li><span class="hatena-asin-detail-label">メディア:</span> セット買い</li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>コンパクトでスペースも取らないし、なんと折り畳める。セットで5,000円でお釣りが返ってくるのすごい。。東京の事務所に導入して開発効率がぐんと上がった。作業机は本当に大事やなぁと実感 💪</p> <h3>ワイヤレスマウス</h3> <p><div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B071Z2TFHX/pamazon-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/31jLZc7z4SL._SL160_.jpg" class="hatena-asin-detail-image" alt="ロジクール ワイヤレスマウス 無線 マウス MX Master 2S MX2100sGR Unifying Bluetooth 高速充電式 FLOW対応 7ボタン windows mac iPad OS 対応 MX2100s グラファイト 国内正規品 2年間無償保証" title="ロジクール ワイヤレスマウス 無線 マウス MX Master 2S MX2100sGR Unifying Bluetooth 高速充電式 FLOW対応 7ボタン windows mac iPad OS 対応 MX2100s グラファイト 国内正規品 2年間無償保証"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B071Z2TFHX/pamazon-22/">ロジクール ワイヤレスマウス 無線 マウス MX Master 2S MX2100sGR Unifying Bluetooth 高速充電式 FLOW対応 7ボタン windows mac iPad OS 対応 MX2100s グラファイト 国内正規品 2年間無償保証</a></p><ul><li><span class="hatena-asin-detail-label">発売日:</span> 2017/06/15</li><li><span class="hatena-asin-detail-label">メディア:</span> Personal Computers</li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>もともと<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%ED%A5%B8%A5%AF%A1%BC%A5%EB">ロジクール</a>使ってたけど新調した。以前の端末と違って<a class="keyword" href="http://d.hatena.ne.jp/keyword/Bluetooth">Bluetooth</a>接続ができるのと、スムーススクロールが快適でとても気に入ってる。</p> <h2>育児編</h2> <h3><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D9%A5%D3%A1%BC%A5%E2%A5%CB%A5%BF%A1%BC">ベビーモニター</a></h3> <p><div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07F6Y3DB9/pamazon-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/31fBc8XZzTL._SL160_.jpg" class="hatena-asin-detail-image" alt="トリビュート 蛯原英里さんおススメ♪グッドデザイン賞&amp;キッズデザイン賞W受賞モデル! ワイヤレスベビーカメラ (BM-LTL2) オートトラッキング機能/カメラ遠隔操作/2way/ボイスオン/ナイトビジョン/子守唄/大容量充電池 ベビーモニター ペットモニター" title="トリビュート 蛯原英里さんおススメ♪グッドデザイン賞&amp;キッズデザイン賞W受賞モデル! ワイヤレスベビーカメラ (BM-LTL2) オートトラッキング機能/カメラ遠隔操作/2way/ボイスオン/ナイトビジョン/子守唄/大容量充電池 ベビーモニター ペットモニター"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07F6Y3DB9/pamazon-22/">トリビュート 蛯原英里さんおススメ♪グッドデザイン賞&amp;キッズデザイン賞W受賞モデル! ワイヤレスベビーカメラ (BM-LTL2) オートトラッキング機能/カメラ遠隔操作/2way/ボイスオン/ナイトビジョン/子守唄/大容量充電池 ベビーモニター ペットモニター</a></p><ul><li><span class="hatena-asin-detail-label">発売日:</span> 2018/07/02</li><li><span class="hatena-asin-detail-label">メディア:</span> Baby Product</li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>人生変わった。モニターが動きを察知して勝手に起動して音を拾ってくれるので、画面をずっと見ておく必要もない。暗闇でもバッチリ映る。うちは子供を寝かしたあと、物音で起きたかどうかソワソワすることがあったけど、それがなくなった。あと、この端末は独自の通信規格でカメラとモニターがつながってるので<a class="keyword" href="http://d.hatena.ne.jp/keyword/Wi-Fi">Wi-Fi</a>も必要ない。ので、なんとお出かけ先でも使える!(これはアツい)</p> <h3>パパは脳研究者</h3> <p><div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/4861013437/pamazon-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/51t81i9iaqL._SL160_.jpg" class="hatena-asin-detail-image" alt="パパは脳研究者 子どもを育てる脳科学" title="パパは脳研究者 子どもを育てる脳科学"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/4861013437/pamazon-22/">パパは脳研究者 子どもを育てる脳科学</a></p><ul><li><span class="hatena-asin-detail-label">作者:</span><a href="http://d.hatena.ne.jp/keyword/%C3%D3%C3%AB%20%CD%B5%C6%F3" class="keyword">池谷 裕二</a></li><li><span class="hatena-asin-detail-label">出版社/メーカー:</span> クレヨンハウス</li><li><span class="hatena-asin-detail-label">発売日:</span> 2017/08/10</li><li><span class="hatena-asin-detail-label">メディア:</span> 単行本</li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>脳研究者の池谷さんの育児日記を本にしたもの。子供がいまどういった成長の段階なのか、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C7%BE%B2%CA%B3%D8">脳科学</a>的な視点で説明してくれているので、子供への接し方等とても参考になる。一気に読み進めず、子供の成長に合わせて読んでいるので臨場感?があって良い。</p> <h3><a class="keyword" href="http://d.hatena.ne.jp/keyword/Google">Google</a> Pixel 3a</h3> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fstore.google.com%2Fjp%2Fproduct%2Fpixel_3a" title="Pixel 3a" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe></p> <p>子供の撮影用に購入。カメラ買うよりこっちのほうが<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%B9%A5%D1">コスパ</a>いいと思う。ナイトモードは必須。暗闇でしか撮れない子供の寝顔は最高 🤤</p> <h2>生活編</h2> <h3>ヘアドライヤー</h3> <p><div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07GXRFWKZ/pamazon-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/313uq3JUpYL._SL160_.jpg" class="hatena-asin-detail-image" alt="パナソニック ヘアドライヤー イオニティ ピンクゴールド調 EH-NE5A-PN" title="パナソニック ヘアドライヤー イオニティ ピンクゴールド調 EH-NE5A-PN"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07GXRFWKZ/pamazon-22/">パナソニック ヘアドライヤー イオニティ ピンクゴールド調 EH-NE5A-PN</a></p><ul><li><span class="hatena-asin-detail-label">発売日:</span> 2018/10/21</li><li><span class="hatena-asin-detail-label">メディア:</span> ホーム&amp;キッチン</li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>友人に教えてもらって購入。風量も音も軽さも大満足。これで4,000円弱とか<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%B9%A5%D1">コスパ</a>良すぎる 🤭</p> <h3>車載ホルダー</h3> <p><div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07CWFZSZS/pamazon-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/41GzloA20QL._SL160_.jpg" class="hatena-asin-detail-image" alt="SmartTap オートホールド式 車載ホルダー EasyOneTouch3 (伸縮アーム 粘着ゲル吸盤) HLCRIO130 HLCRIO130" title="SmartTap オートホールド式 車載ホルダー EasyOneTouch3 (伸縮アーム 粘着ゲル吸盤) HLCRIO130 HLCRIO130"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07CWFZSZS/pamazon-22/">SmartTap オートホールド式 車載ホルダー EasyOneTouch3 (伸縮アーム 粘着ゲル吸盤) HLCRIO130 HLCRIO130</a></p><ul><li><span class="hatena-asin-detail-label">発売日:</span> 2018/05/07</li><li><span class="hatena-asin-detail-label">メディア:</span> Automotive</li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>ワンタッチで着脱できるし設置部がめちゃ安定してるし細かく角度調整できるし、いいもの買えた。</p> <h3><a class="keyword" href="http://d.hatena.ne.jp/keyword/%CC%B5%C0%FELAN">無線LAN</a><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EB%A1%BC%A5%BF%A1%BC">ルーター</a></h3> <p><div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07JHBBW9H/pamazon-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/41TerdYAs8L._SL160_.jpg" class="hatena-asin-detail-image" alt="TP-Link Wi-Fi 無線LAN ルーター 11ac AC2600 1733 + 800 Mbps MU-MIMO IPv6 デュアルバンド ギガビット Archer A10 3年保証" title="TP-Link Wi-Fi 無線LAN ルーター 11ac AC2600 1733 + 800 Mbps MU-MIMO IPv6 デュアルバンド ギガビット Archer A10 3年保証"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07JHBBW9H/pamazon-22/">TP-Link Wi-Fi 無線LAN ルーター 11ac AC2600 1733 + 800 Mbps MU-MIMO IPv6 デュアルバンド ギガビット Archer A10 3年保証</a></p><ul><li><span class="hatena-asin-detail-label">発売日:</span> 2018/11/28</li><li><span class="hatena-asin-detail-label">メディア:</span> Personal Computers</li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>岡山に移住して家のネット環境が遅すぎたので調べたらそもそも<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EB%A1%BC%A5%BF%A1%BC">ルーター</a>がオワコンだったので新調。速度こそすべて。ちなみに、うちは<a class="keyword" href="http://d.hatena.ne.jp/keyword/NURO%B8%F7">NURO光</a>の対応地域ではないのではやく来てほしい。(切実)</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fparanishian.hateblo.jp%2Fentry%2F2019%2F03%2F04%2F201236" title="WiFiルーターを刷新したらダウンロード速度6.8倍、アップロード速度15.9倍になった - paranitips" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe></p> <h2>趣味編</h2> <h3>ブックカバー</h3> <p><div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B006KXOW1O/pamazon-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/417Vjuc1eRL._SL160_.jpg" class="hatena-asin-detail-image" alt="キュービックス ブックカバー ラウンドジップ (文庫サイズ) ネイビー 114015-08" title="キュービックス ブックカバー ラウンドジップ (文庫サイズ) ネイビー 114015-08"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B006KXOW1O/pamazon-22/">キュービックス ブックカバー ラウンドジップ (文庫サイズ) ネイビー 114015-08</a></p><ul><li><span class="hatena-asin-detail-label">メディア:</span> オフィス用品</li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>最近小説読むのが一番の楽しみになっててそれ用に購入。ジップ付きなのが地味に良くて、本がぜんぜん傷つかないので気楽にバックに放り込める 💼</p> <h3>なめらかな世界と、その敵</h3> <p><div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/4152098805/pamazon-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/51%2BGLtzMeXL._SL160_.jpg" class="hatena-asin-detail-image" alt="なめらかな世界と、その敵" title="なめらかな世界と、その敵"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/4152098805/pamazon-22/">なめらかな世界と、その敵</a></p><ul><li><span class="hatena-asin-detail-label">作者:</span><a href="http://d.hatena.ne.jp/keyword/%C8%BC%CC%BE%20%CE%FD" class="keyword">伴名 練</a></li><li><span class="hatena-asin-detail-label">出版社/メーカー:</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%C1%E1%C0%EE%BD%F1%CB%BC">早川書房</a></li><li><span class="hatena-asin-detail-label">発売日:</span> 2019/08/20</li><li><span class="hatena-asin-detail-label">メディア:</span> 単行本</li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>SFいろいろ読んできたけど、今まで読んだことのない繊細さのある小説で引き込まれた。あっという間に読んじゃった。</p> <h3><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A4%B9%A4%D9%A4%C6%A4%ACF%A4%CB%A4%CA%A4%EB">すべてがFになる</a></h3> <p><div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/4062639246/pamazon-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/41vAbauP0TL._SL160_.jpg" class="hatena-asin-detail-image" alt="すべてがFになる (講談社文庫)" title="すべてがFになる (講談社文庫)"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/4062639246/pamazon-22/">すべてがFになる (講談社文庫)</a></p><ul><li><span class="hatena-asin-detail-label">作者:</span><a href="http://d.hatena.ne.jp/keyword/%BF%B9%20%C7%EE%BB%CC" class="keyword">森 博嗣</a></li><li><span class="hatena-asin-detail-label">出版社/メーカー:</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%B9%D6%C3%CC%BC%D2">講談社</a></li><li><span class="hatena-asin-detail-label">発売日:</span> 1998/12/11</li><li><span class="hatena-asin-detail-label">メディア:</span> 文庫</li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>タイトルだけ知ってたけど今まで読んだことがなかった。これきっかけでS&amp;Mシリーズをずっと読み進めている。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BA%D4%C0%EE">犀川</a>のセリフに毎回気づきがすごいあって、読み物としてもとても好き。</p> <p>.<br/> .<br/> .</p> <p>今年は変化の年ってのもあって結構買ったなー。<br/> 来年はどうなるかなっ 🙃</p> <p>それでは 🕺</p> paranishian 岡山県岡山市にIターンしておおよそ1年が経った hatenablog://entry/26006613477330703 2019-12-21T08:00:00+09:00 2021-01-01T10:02:24+09:00 倉敷でふらっと立ち寄ったデニムのお店 これは「大都会岡山 Advent Calendar 2019」の21日目の記事です。 adventar.org ちょうど一年前くらいに子供が生まれ、そのタイミングで奥さんの実家がある岡山県岡山市に引っ越した。いわゆるIターンだけど、この場合北九州では「ラブターン」というらしい 🤭(知らんがな) 今までは都会しか経験のない自分が、岡山で生活してみて感じたことをつらつらと書いていく。 たぶん岡山ならではというよりは地方ならではの話だと思う。 メガバンクが全然メガじゃない 一番の衝撃だった。 自分が利用してる三井住友、三菱UFJが岡山県に1店舗しかない。岡山市で… <p><figure class="figure-image figure-image-fotolife" title="倉敷でふらっと立ち寄ったデニムのお店"><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20191218/20191218214323.jpg" alt="f:id:paranishian:20191218214323j:plain" title="" class="hatena-fotolife" itemprop="image"></span><figcaption>倉敷でふらっと立ち寄ったデニムのお店</figcaption></figure></p> <p>これは「大都会岡山 Advent Calendar 2019」の21日目の記事です。</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fadventar.org%2Fcalendars%2F3988" title="大都会岡山 Advent Calendar 2019 - Adventar" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://adventar.org/calendars/3988">adventar.org</a></cite></p> <p>ちょうど一年前くらいに子供が生まれ、そのタイミングで奥さんの実家がある<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B2%AC%BB%B3%B8%A9">岡山県</a><a class="keyword" href="http://d.hatena.ne.jp/keyword/%B2%AC%BB%B3%BB%D4">岡山市</a>に引っ越した。いわゆるIターンだけど、この場合北九州では「ラブターン」というらしい 🤭(知らんがな)</p> <p>今までは都会しか経験のない自分が、岡山で生活してみて感じたことをつらつらと書いていく。</p> <p>たぶん岡山ならではというよりは地方ならではの話だと思う。</p> <h2><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E1%A5%AC%A5%D0%A5%F3%A5%AF">メガバンク</a>が全然メガじゃない</h2> <p>一番の衝撃だった。<br /> 自分が利用してる三井住友、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BB%B0%C9%A9UFJ">三菱UFJ</a>が<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B2%AC%BB%B3%B8%A9">岡山県</a>に1店舗しかない。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B2%AC%BB%B3%BB%D4">岡山市</a>ではなく、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B2%AC%BB%B3%B8%A9">岡山県</a>に。そしてよくわからない名前の銀行(<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C8%A5%DE%A5%C8%B6%E4%B9%D4">トマト銀行</a>、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C9%B4%BD%BD%BB%CD%B6%E4%B9%D4">百十四銀行</a>、etc)が幅を利かせている。<br /> これはなかなかに不便である。</p> <h2>車社会</h2> <p>どこに行くにも車がないと厳しい。<br /> なので気軽に飲めない。みんなどうしてるんだろう。運転代行とか使ってるのかな?<br /> 特に勉強会などのイベントに出席するのがなかなか大変。基本的にアクセスが悪い。<br /> あと、「田舎は道が広い」という偏見(これがそもそも悪い)のもと運転してると急にとんでもなく狭い道を通る羽目になって詰む 😇</p> <h2>待機児童数が気になる</h2> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%B2%AC%BB%B3%B8%A9">岡山県</a><a class="keyword" href="http://d.hatena.ne.jp/keyword/%B2%AC%BB%B3%BB%D4">岡山市</a>、一時期は世田谷区を抜いてまさかの全国2位だった。<br /> え、なんで!?ってなった。</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fnews.mynavi.jp%2Farticle%2F20180911-691316%2F" title="全国で最も待機児童が多い自治体は? 世田谷区を抜いて1位になったのは……" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://news.mynavi.jp/article/20180911-691316/">news.mynavi.jp</a></cite></p> <p>減らす努力はしてるみたいだけど需要に追いついてないみたい。保育園の合否がちょっと不安。</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fwww.sanyonews.jp%2Farticle%2F961549" title="待機児童33人増の386人 岡山市10月時点、無償化影響か:山陽新聞デジタル|さんデジ" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://www.sanyonews.jp/article/961549">www.sanyonews.jp</a></cite></p> <h2>空が広い</h2> <p>住宅街は特に高い建物がないので空が広い。青い。散歩が気持ちいい。<br /> そして「空が広い」ということを感じられるくらいにはストレスフリーなんだと思う。</p> <h2>災害が少ないらしい</h2> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%C3%E6%B9%F1%BB%B3%C3%CF">中国山地</a>や四国に守られてたり、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C3%CF%BF%CC">地震</a>断層が少なかったり、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B8%B6%C8%AF">原発</a>が遠かったり、いろいろな要因が重なって安全地帯感がすごい。その分災害対策はちゃんとしないとなーとは思っている。</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fwww.xn--eckp2g010mjznhiaw72p.jp%2Fhouse%2Fdisaster.html" title="災害の少ない岡山県は本当か?【岡山移住ガイド.jp】" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://www.xn--eckp2g010mjznhiaw72p.jp/house/disaster.html">www.xn--eckp2g010mjznhiaw72p.jp</a></cite></p> <h2>イオンに行けばとりあえずなんでも揃う</h2> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%B2%AC%BB%B3%B1%D8%C1%B0">岡山駅前</a>にある西日本最大級のイオンに行けばたいてい何でも揃う。買い物下手の自分にとってはすばらしい環境。<br /> けどめっちゃ駐車場混んでるので最近はあえて倉敷のイオンに行くことが多い。</p> <h2>タクシーでクレカが使えないことがある</h2> <p>これはふつーに不便 🤯</p> <p><blockquote data-conversation="none" class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">岡山(というより地方あるあるかもしれないけど)、いまだにタクシーでカードが使えないことがあって困る。精算時に当たり前のように「カードで」ってゆったらめっちゃ怒られたことがある😇ぴぇ〜</p>&mdash; にっしー🎨お絵かきコラボ (@paranishian) <a href="https://twitter.com/paranishian/status/1205489156765282304?ref_src=twsrc%5Etfw">2019年12月13日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </p> <h2>スタートアップが盛り上がってるっぽい</h2> <p>自分はスタートアップではないんだけど、こういう盛り上がり方をしてるといろんな交流ができそうでワクワクする。(けどまだ遠目でしか見ていない) <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fwww.city.okayama.jp%2Fjigyosha%2F0000009196.html" title="スタートアップ支援拠点、「ももたろう・スタートアップカフェ(ももスタ)」を開設しました! | 岡山市" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://www.city.okayama.jp/jigyosha/0000009196.html">www.city.okayama.jp</a></cite></p> <h2>これから</h2> <p>岡山でのIT系の知り合いがゼロなので、2020年は積極的にコミュニティ参加していこうと思っている。<br /> とりあえずこの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%C9%A5%D9%A5%F3%A5%C8%A5%AB%A5%EC%A5%F3%A5%C0%A1%BC">アドベントカレンダー</a>で岡山人の仲間入りを果たした(?)ので、次は勉強会に参加したり、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%EF%A1%BC%A5%AD%A5%F3%A5%B0%A5%B9%A5%DA%A1%BC%A5%B9">コワーキングスペース</a>を回ってみようと思う。</p> <p>とりあえずこのへんを狙っている 👇</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fokaruby.connpass.com%2F" title="岡山Rubyコミュニティ" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://okaruby.connpass.com/">okaruby.connpass.com</a></cite> <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Foka-kitanagase.hashtags.biz%2F" title="ハッシュタグ 岡山のシェアスペース・レンタルキッチン・コワーキングスペース" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://oka-kitanagase.hashtags.biz/">oka-kitanagase.hashtags.biz</a></cite></p> <p>それでは 🕺</p> paranishian 「学びを結果に変える アウトプット大全」を読んだ hatenablog://entry/26006613434308610 2019-09-16T17:20:04+09:00 2019-09-16T17:20:04+09:00 学びを結果に変えるアウトプット大全 (Sanctuary books)作者: 樺沢紫苑出版社/メーカー: サンクチュアリ出版発売日: 2018/08/03メディア: 単行本(ソフトカバー)この商品を含むブログ (1件) を見る 「学びを結果に変える アウトプット大全」を読んだのでさっそくアウトプット! 「学びにはアウトプットが大切」っていうのはなんとなく知ってたけど、気づけばインプットがメインになりがちでアウトプットはそんなにできてなかった。あと、インプットしても、あまり頭に入ってないというか、定着してる感じがしなかった。 アウトプットを継続するためのコツや、効率よく学ぶためのヒントがあるかも… <p><div class="hatena-asin-detail"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4801400558/pamazon-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/51n2EH5szTL._SL160_.jpg" class="hatena-asin-detail-image" alt="学びを結果に変えるアウトプット大全 (Sanctuary books)" title="学びを結果に変えるアウトプット大全 (Sanctuary books)"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4801400558/pamazon-22/">学びを結果に変えるアウトプット大全 (Sanctuary books)</a></p><ul><li><span class="hatena-asin-detail-label">作者:</span> 樺沢紫苑</li><li><span class="hatena-asin-detail-label">出版社/メーカー:</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B5%A5%F3%A5%AF%A5%C1%A5%E5%A5%A2%A5%EA">サンクチュアリ</a>出版</li><li><span class="hatena-asin-detail-label">発売日:</span> 2018/08/03</li><li><span class="hatena-asin-detail-label">メディア:</span> 単行本(ソフトカバー)</li><li><a href="http://d.hatena.ne.jp/asin/4801400558/pamazon-22" target="_blank">この商品を含むブログ (1件) を見る</a></li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>「学びを結果に変える アウトプット大全」を読んだのでさっそくアウトプット!</p> <p>「学びにはアウトプットが大切」っていうのはなんとなく知ってたけど、気づけばインプットがメインになりがちでアウトプットはそんなにできてなかった。あと、インプットしても、あまり頭に入ってないというか、定着してる感じがしなかった。<br/> アウトプットを継続するためのコツや、効率よく学ぶためのヒントがあるかも?と思って、この本を手にとった。</p> <p>アウトプットといっても、大まかに「話し方」「書き方」の2つに分かれていて、自分にとっては主に後者が参考になった。 <br/> 著書の中で出典のない情報がちらほらあったのが気になったけど、きっと著者の方も本を読んで得た知識なんやろうなと解釈した。参考図書が載っているので読んでみるといいかもしれない。</p> <p>以下、自分に刺さったところを抜粋してコメントつきで紹介する。</p> <blockquote><p>知っていても行動しないのなら、行動の変化はゼロであり、自己成長のゼロです。多少は賢くなっているかも知れませんが、行動が変わらなければ、現実世界は何ひとつ変わりません。<b>「自己成長」ではなく「自己満足」</b>しているだけです。</p></blockquote> <p>耳が痛い。。🙉</p> <p>それではいってみよう!</p> <h2>アウトプットの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B4%F0%CB%DC%CB%A1">基本法</a>則</h2> <ul> <li>2週間に3回以上アウトプットすると、長期記憶として残りやすくなる</li> <li>インプット:アウトプットの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B2%AB%B6%E2%C8%E6">黄金比</a>は3:7</li> <li>アウトプットしたあとフィードバックを大事にする</li> </ul> <p>1つめに関しては、「自己テスト」でも良さそう。この本に書いてあった 👇</p> <p><div class="hatena-asin-detail"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4862762581/pamazon-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/51R8QjjOQDL._SL160_.jpg" class="hatena-asin-detail-image" alt="Learn Better――頭の使い方が変わり、学びが深まる6つのステップ" title="Learn Better――頭の使い方が変わり、学びが深まる6つのステップ"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4862762581/pamazon-22/">Learn Better――頭の使い方が変わり、学びが深まる6つのステップ</a></p><ul><li><span class="hatena-asin-detail-label">作者:</span> アーリック・ボーザー,月谷真紀</li><li><span class="hatena-asin-detail-label">出版社/メーカー:</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%B1%D1%BC%A3%BD%D0%C8%C7">英治出版</a></li><li><span class="hatena-asin-detail-label">発売日:</span> 2018/07/19</li><li><span class="hatena-asin-detail-label">メディア:</span> 単行本</li><li><a href="http://d.hatena.ne.jp/asin/4862762581/pamazon-22" target="_blank">この商品を含むブログを見る</a></li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <h2>本に書き込む</h2> <blockquote><p>読書するときには、絶対に書き込みをしながら読むことをおすすめします。なぜならば、書き込むことで、本の内容の理解が圧倒的に深まり、記憶にも残りやすくなるからです。</p></blockquote> <p>「読む」というインプット行為を、「書き込み」しながら読むだけでアウトプットに変えられるのはすばらしい。<br/> けど、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Kindle">Kindle</a>派の自分には合わないので、別の方法を実践してみる。(例えば、「本を読みながらブログを書いていく」「本を読みながら手を動かして実装してみる」など)</p> <h2>速く文章を書くコツ</h2> <h3>1. 時間を決めて書く</h3> <blockquote><p>「時間をかけて文章を書けば、よい文章が書ける」と思っている人がほとんどだけどそれは完全に間違っています。ある記事を1時間かけて書くのと、2時間かけて書くのとでは、クオリティが20%はアップするかも知れませんが、2倍にはならないのです。</p></blockquote> <h3>2. 構成を決めて書く</h3> <blockquote><p>文章を書く場合、「考えながら書く」人がほとんどです。一文書いてから「次は何を書こうかな」といちいち考える。 入力している時間よりも、考えている時間がほとんどなのです。</p></blockquote> <p>さっそくこの投稿も時間と構成を決めて書いてみた 🙃</p> <h2>リラックスする時間をつくる</h2> <blockquote><p>特になんの作業もしていない「ぼーっとした状態」「ぼんやりした状態」のとき、脳内では「デフォルトモード・ネットワーク」が活発に稼働しているのです。デフォルトモード・ネットワークは、いうなれば「脳のスタンバイ状態」です。<br/> (中略)<br/> 「ぼーっとしている時間」がもったいないと、暇な時間に<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%DE%A5%DB">スマホ</a>、ゲーム、テレビに時間を使う人が多いですが、脳を絶えず使い続けることは、デフォルトモード・ネットワークを妨害し、脳を疲れさせ、脳の働きを退化させる原因になるのです。たまには何もしないでぼーっとする時間を持ちたいものです。</p></blockquote> <p>暇があれば本を読んだり情報収集したりゲームしたり、、、思い返せば忙しなく脳みそを使っているなぁ。。 🤯 <br/> 公園を散歩したり川辺でのんびりする時間をつくってみようと思う。</p> <h2>教える</h2> <blockquote><p>人に教えることを前提に勉強するだけで、記憶力がアップして学びの効果が上がるということです。人に教えた経験がある人はわかると思いますが、しっかり理解していないと、人に教えることはできません。つまり、教えることで、自分の理解度や不十分な点が明確に見えてきます。そして、実際に「教える」日までしっかり勉強して、その不十分な部分を補います。</p></blockquote> <p>これはすごくわかる。自分の状況では直接人に教えることは少ないので、Qiitaに書くことを意識して勉強している。これは続けていこっと。</p> <h2>やる気スイッチ</h2> <blockquote><p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AF%A5%EC%A5%DA%A5%EA%A5%F3">クレペリン</a>検査で有名な<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C0%BA%BF%C0%B2%CA%B0%E5">精神科医</a>の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AF%A5%EC%A5%DA%A5%EA%A5%F3">クレペリン</a>は、「作業を始めてみると、だんだん気分が上がってきてやる気が出てくる」ことを、「<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BA%EE%B6%C8%B6%BD%CA%B3">作業興奮</a>」と呼びました。今から100年ほど前の話ですが、最近の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C7%BE%B2%CA%B3%D8">脳科学</a>では「<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BA%EE%B6%C8%B6%BD%CA%B3">作業興奮</a>」のメ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AB%A5%CB">カニ</a>ズムが判明しています。脳に「<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C2%A6%BA%C1%B3%CB">側坐核</a>」という部位があります。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C2%A6%BA%C1%B3%CB">側坐核</a>の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BF%C0%B7%D0%BA%D9%CB%A6">神経細胞</a>が活動すると、海馬と<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C1%B0%C6%AC%C1%B0%CC%EE">前頭前野</a>に信号を送り、「やる気」が出て、脳の調子が上がっていきます。しかし、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C2%A6%BA%C1%B3%CB">側坐核</a>の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BF%C0%B7%D0%BA%D9%CB%A6">神経細胞</a>は、「ある程度の強さ」の刺激がないと活動を始めません。その必要時間はたったの5分です。</p></blockquote> <p>これはへぇーとおもった。科学的に説明してもらえるとすごく納得感があるのでありがたい。「まず5分集中」を徹底しようと思う。</p> <h2>眠る</h2> <blockquote><p>「睡眠不足」の状態は、ざっくりいえば、あなたの能力を半分も発揮できないようにリミッターをかけるようなものです。アウトプットをして自己成長するためには7時間以上の睡眠は必須です。</p></blockquote> <p>寝ます 😪</p> <h2>運動する</h2> <blockquote><p>「頭をよくしたい!」と思うなら、運動をすればいいのです。運動量としては、1回1時間程度の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CD%AD%BB%C0%C1%C7%B1%BF%C6%B0">有酸素運動</a>を週2回以上行うと、脳を活性化する効果が十分に得られます。また、わずか20分の運動でも<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C9%A1%BC%A5%D1%A5%DF%A5%F3">ドーパミン</a>が分泌されるため、運動直後から集中力、記憶力、学習機能、モチベーションのアップが認められます。</p></blockquote> <p>ちょうど都内のプール(なんと2時間400円!)で朝活を始めたので継続しよう 💪</p> <h2>おわりに</h2> <p>特に技術書を読むとき、読んで理解して満足するだけのただの自己満足野郎だったなぁ。。🤣 もっと自己成長のために手を動かさなければ!と思った。<br/> まずは<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%EB%A5%B4%A5%EA%A5%BA%A5%E0">アルゴリズム</a>を読み直して<a class="keyword" href="http://d.hatena.ne.jp/keyword/ruby">ruby</a>で実装してみよう。</p> <p>それでは 🕺</p> paranishian 「なっとく!アルゴリズム」を読んだ hatenablog://entry/26006613402278522 2019-09-13T11:21:21+09:00 2019-09-13T11:21:57+09:00 なっとく! アルゴリズム作者: アディティア・Y・バーガバ,株式会社クイープ出版社/メーカー: 翔泳社発売日: 2017/02/01メディア: 単行本(ソフトカバー)この商品を含むブログを見る すごく良かった! アルゴリズムを理解するための導入本としてすばらしい出来で、そのあとの道標もある。 ビッグオー記法の説明から始まり、 二分探索 選択ソート、クイックソート 幅優先探索、貪欲法 動的計画法 NP完全問題 k近傍法 などがわかりやすく紹介されてて、これからアルゴリズムを使うときにこのあたりの知識があると効率が違うなぁという印象。 特にNP完全問題に対する近似アルゴリズムでのアプローチは、新し… <p><div class="hatena-asin-detail"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4798143359/pamazon-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/61muIrGwUTL._SL160_.jpg" class="hatena-asin-detail-image" alt="なっとく! アルゴリズム" title="なっとく! アルゴリズム"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4798143359/pamazon-22/">なっとく! アルゴリズム</a></p><ul><li><span class="hatena-asin-detail-label">作者:</span> アディティア・Y・バーガバ,<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B3%F4%BC%B0%B2%F1%BC%D2%A5%AF%A5%A4%A1%BC%A5%D7">株式会社クイープ</a></li><li><span class="hatena-asin-detail-label">出版社/メーカー:</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%E6%C6%B1%CB%BC%D2">翔泳社</a></li><li><span class="hatena-asin-detail-label">発売日:</span> 2017/02/01</li><li><span class="hatena-asin-detail-label">メディア:</span> 単行本(ソフトカバー)</li><li><a href="http://d.hatena.ne.jp/asin/4798143359/pamazon-22" target="_blank">この商品を含むブログを見る</a></li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>すごく良かった!<br/> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%EB%A5%B4%A5%EA%A5%BA%A5%E0">アルゴリズム</a>を理解するための導入本としてすばらしい出来で、そのあとの道標もある。</p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D3%A5%C3%A5%B0%A5%AA%A1%BC">ビッグオー</a>記法の説明から始まり、</p> <ul> <li>二分探索</li> <li>選択ソート、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AF%A5%A4%A5%C3%A5%AF%A5%BD%A1%BC%A5%C8">クイックソート</a></li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%C9%FD%CD%A5%C0%E8%C3%B5%BA%F7">幅優先探索</a>、貪欲法</li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%C6%B0%C5%AA%B7%D7%B2%E8%CB%A1">動的計画法</a></li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/NP%B4%B0%C1%B4%CC%E4%C2%EA">NP完全問題</a></li> <li>k近傍法</li> </ul> <p>などがわかりやすく紹介されてて、これから<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%EB%A5%B4%A5%EA%A5%BA%A5%E0">アルゴリズム</a>を使うときにこのあたりの知識があると効率が違うなぁという印象。<br/> 特に<a class="keyword" href="http://d.hatena.ne.jp/keyword/NP%B4%B0%C1%B4%CC%E4%C2%EA">NP完全問題</a>に対する近似<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%EB%A5%B4%A5%EA%A5%BA%A5%E0">アルゴリズム</a>でのアプローチは、新しいお仕事に使えそうな考え方だったので知れて良かった。 貪欲法も良い。</p> <p>それでは 🕺</p> <p><blockquote class="twitter-tweet" data-lang="HASH(0x55f6dcb81bf8)"><p lang="ja" dir="ltr">貪欲法とはつまり人生における選択に使えるのでは?というより人生そのものなのでは</p>&mdash; にっしー👨‍💻岡山⇄東京 (@paranishian) <a href="https://twitter.com/paranishian/status/1162934859880206336?ref_src=twsrc%5Etfw">August 18, 2019</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></p> paranishian Audacity, Forecast, Anchorを使ってチャプター付きのpodcastをApple Podcastsに配信する hatenablog://entry/26006613426394518 2019-09-09T22:06:39+09:00 2019-09-10T21:06:16+09:00 ども。最近podcastにハマってるparanishianです。 podcastの配信方法って意外と見つからないのでここにメモっておきます。 いろいろ配信方法を試した結果、現状の収録方法は以下の流れになりました。 1. ボイスメッセージで録音する 2. Audacityで編集する 4. Forecastでチャプターをつける 5. Anchorにアップロードする なんと全部無料!すばらしい時代に感謝 🙏 Audacityは有名なアプリなので記事もいっぱい出てきますが、 - ノイズ低減 - ジングル追加 - m4a書き出し をやってます。 <p><figure class="figure-image figure-image-fotolife" title="Photo by CoWomen on Unsplash"><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20190909/20190909213803.jpg" alt="f:id:paranishian:20190909213803j:plain" title="f:id:paranishian:20190909213803j:plain" class="hatena-fotolife" itemprop="image"></span><figcaption>Photo by CoWomen on Unsplash</figcaption></figure></p> <p>ども。最近<a class="keyword" href="http://d.hatena.ne.jp/keyword/podcast">podcast</a>にハマってるparanishianです。<br/> <a class="keyword" href="http://d.hatena.ne.jp/keyword/podcast">podcast</a>の配信方法って意外と見つからないのでここにメモっておきます。</p> <p>いろいろ配信方法を試した結果、現状の収録方法は以下の流れになりました。</p> <ol> <li>ボイスメッセージで録音する</li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Audacity">Audacity</a>で編集する</li> <li>Forecastでチャプターをつける</li> <li>Anchorにアップロードする</li> </ol> <p>なんと全部無料!すばらしい時代に感謝 🙏</p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Audacity">Audacity</a>は有名なアプリなので記事もいっぱい出てきますが、</p> <ul> <li>ノイズ低減</li> <li>ジングル追加</li> <li>m4a書き出し</li> </ul> <p>をやってます。</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Faudacity.softonic.jp%2Fmac" title="Audacity" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://audacity.softonic.jp/mac">audacity.softonic.jp</a></cite></p> <p>ただ、これでチャプターをつける方法がわからん・・ 🤔</p> <p>Chapter Toolなるものがあるらしいけどめっちゃ古い情報やし、、<a class="keyword" href="http://d.hatena.ne.jp/keyword/GarageBand">GarageBand</a>はよぉわからんし、、なんか有料のアプリでてくるし、、、。</p> <p>・・いろいろ調べた結果、Forecastというアプリを発見!</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fovercast.fm%2Fforecast" title="Forecast: Podcast MP3 Chapter Encoder — Overcast" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://overcast.fm/forecast">overcast.fm</a></cite></p> <p>おお!無料でチャプター追加できるやん!</p> <p>Forecastでは、</p> <ul> <li>m4aインポート</li> <li>チャプター追加</li> <li>mp3書き出し</li> </ul> <p>をやってます。操作もシンプルなのでめっちゃ良い 😊</p> <p>このmp3をAnchorにアップロードして公開すればOKです。</p> <p>ただ、Anchorでいままでやってたジングル挟んだりするやつはできなくなりますね。(チャプター情報つきmp3とジングル組みあせて配信すると、別のmp3ファイルに変更されてチャプター情報が消えちゃうみたい?)<br/> まあそのジングルも<a class="keyword" href="http://d.hatena.ne.jp/keyword/Audacity">Audacity</a>で編集で追加しちゃえばええでしょ。<a class="keyword" href="http://d.hatena.ne.jp/keyword/podcast">podcast</a>を聴くのってAnchorよりも<a class="keyword" href="http://d.hatena.ne.jp/keyword/Apple">Apple</a> Podcastsのほうが圧倒的に多いやろうし。</p> <p>podcasterの方はぜひお試しあれ〜!</p> <p>それでは 🙌</p> paranishian Anchorで収録したポッドキャストをApple Podcastsに配信する方法 hatenablog://entry/26006613402268624 2019-08-22T14:07:30+09:00 2019-09-10T21:07:11+09:00 こんにちは。 最近ポッドキャスト配信にハマってまして、Anchorで収録してます。 Anchorほんますごくて、iPhoneだけでさくっと収録できるし、遠くの人ともリモートで収録できるし、音質もいいしで、めちゃすばらしいサービスです。これからラジオやりたいって人は本当におすすめです。 で、Anchorは自動で各種プラットフォームにも配信手続きしてくれる優れものなんです。 <p><figure class="figure-image figure-image-fotolife" title="Photo by Juja Han on Unsplash"><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20190822/20190822141158.jpg" alt="f:id:paranishian:20190822141158j:plain" title="f:id:paranishian:20190822141158j:plain" class="hatena-fotolife" itemprop="image"></span><figcaption>Photo by Juja Han on Unsplash</figcaption></figure></p> <p>こんにちは。</p> <p>最近<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DD%A5%C3%A5%C9%A5%AD%A5%E3%A5%B9%A5%C8">ポッドキャスト</a>配信にハマってまして、Anchorで収録してます。</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fanchor.fm%2F" title="Anchor - The easiest way to make a podcast" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://anchor.fm/">anchor.fm</a></cite></p> <p>Anchorほんますごくて、<a class="keyword" href="http://d.hatena.ne.jp/keyword/iPhone">iPhone</a>だけでさくっと収録できるし、遠くの人ともリモートで収録できるし、音質もいいしで、めちゃすばらしいサービスです。これからラジオやりたいって人は本当におすすめです。</p> <p>で、Anchorは自動で各種プラットフォームにも配信手続きしてくれる優れものなんです。</p> <p>・・・なんですが、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Apple">Apple</a> Podcastsにだけはなかなか配信されず、いろいろ設定を見直したりサポートと英語でやりとりしたりしてなんとか配信できたので、その手順を書き留めておきます。</p> <h2>Anchorのアカウント情報を編集する</h2> <ul> <li>AnchorのPC webにログインする</li> <li><a href="https://anchor.fm/dashboard/podcast/edit">https://anchor.fm/dashboard/podcast/edit</a> に移動する</li> <li>emailに<a class="keyword" href="http://d.hatena.ne.jp/keyword/Apple">Apple</a>アカウントと同じものを設定する</li> <li>「Display personal email address publicly in <a class="keyword" href="http://d.hatena.ne.jp/keyword/RSS">RSS</a> feed」をONにする</li> </ul> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20190822/20190822140015.png" alt="f:id:paranishian:20190822140015p:plain" title="f:id:paranishian:20190822140015p:plain" class="hatena-fotolife" itemprop="image"></span></p> <ul> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/RSS%A5%D5%A5%A3%A1%BC%A5%C9">RSSフィード</a>のURLをクリックする</li> <li>&lt;<a class="keyword" href="http://d.hatena.ne.jp/keyword/itunes">itunes</a>:email>がそのメールアドレスになっていることを確認する</li> </ul> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20190822/20190822135323.png" alt="f:id:paranishian:20190822135323p:plain" title="f:id:paranishian:20190822135323p:plain" class="hatena-fotolife" itemprop="image"></span></p> <h2>Podcasts Connectからフィード送信する</h2> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/RSS%A5%D5%A5%A3%A1%BC%A5%C9">RSSフィード</a>の設定が完了したら、Podcasts Connectからフィードを度送信すればOK。</p> <p>数日経っても音沙汰がなければ以下から問い合わせたら1日くらいで返事くれます。</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fitunespartner.apple.com%2Fcontact%2F%3Fcontent_type%3Dpodcasts" title="iTunes Connect | Contact Us" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://itunespartner.apple.com/contact/?content_type=podcasts">itunespartner.apple.com</a></cite></p> <p>ちなみに僕はこんな感じの問い合わせを送りました。</p> <pre class="code" data-lang="" data-unlink>Content Type: Podcasts Topic: Status of Podcast Approval Primary Topic: Delivery User entered data: Podcast Created Successfully notification email received:: No Message: I submitted a feed url for my podcast, but it has not been approved yet. Does it still take time? </pre> <p>以上です。</p> <p>これからAnchorもっと盛り上がってくるはずなので、誰かの参考になれば😚</p> paranishian Airbnb Storyを読んだ hatenablog://entry/17680117127161614448 2019-05-25T08:00:00+09:00 2019-05-25T08:18:26+09:00 Airbnb Story 大胆なアイデアを生み、困難を乗り越え、超人気サービスをつくる方法作者: リー・ギャラガー,関美和出版社/メーカー: 日経BP社発売日: 2017/05/25メディア: 単行本この商品を含むブログ (2件) を見る なんだか小説を読んでるみたいにサクサク読めた。サービスが生まれるところから急成長していくところ、そしてこれから、がリアルに書かれていてすごく良かった。 Airbnbはスタートアップの中で異色の存在だということを知ったのと、Airbnbのメンバー、サービスにすごく好感を持った。 あと、創業メンバーがほぼスタートアップ素人だったことには驚いた。そしてチェスキーの… <p><div class="hatena-asin-detail"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4822255190/pamazon-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/51ooIsqXBWL._SL160_.jpg" class="hatena-asin-detail-image" alt="Airbnb Story 大胆なアイデアを生み、困難を乗り越え、超人気サービスをつくる方法" title="Airbnb Story 大胆なアイデアを生み、困難を乗り越え、超人気サービスをつくる方法"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4822255190/pamazon-22/">Airbnb Story 大胆なアイデアを生み、困難を乗り越え、超人気サービスをつくる方法</a></p><ul><li><span class="hatena-asin-detail-label">作者:</span> リー・<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AE%A5%E3%A5%E9%A5%AC">ギャラガ</a>ー,関美和</li><li><span class="hatena-asin-detail-label">出版社/メーカー:</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%C6%FC%B7%D0BP">日経BP</a>社</li><li><span class="hatena-asin-detail-label">発売日:</span> 2017/05/25</li><li><span class="hatena-asin-detail-label">メディア:</span> 単行本</li><li><a href="http://d.hatena.ne.jp/asin/4822255190/pamazon-22" target="_blank">この商品を含むブログ (2件) を見る</a></li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>なんだか小説を読んでるみたいにサクサク読めた。サービスが生まれるところから急成長していくところ、そしてこれから、がリアルに書かれていてすごく良かった。<br/> <a class="keyword" href="http://d.hatena.ne.jp/keyword/Airbnb">Airbnb</a>はスタートアップの中で異色の存在だということを知ったのと、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Airbnb">Airbnb</a>のメンバー、サービスにすごく好感を持った。<br/> あと、創業メンバーがほぼスタートアップ素人だったことには驚いた。そしてチェスキーの学習の姿勢にも感心した。</p> <p>以下、自分用メモをつらつらと。</p> <h3>ひとりめのエンジニアの採用は本当に大事</h3> <p>ただ機能をつくってもらうための採用ではない。今後その人は自分と同じような人材を何百人と呼び込んでくれる存在になる。</p> <h3>最高のUXのプロダクトをつくれば市場を拡大できる</h3> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Airbnb">Airbnb</a>のビジネスモデルはまったく新しいものではなく、当時からクレイグスリストや地元の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B7%C7%BC%A8">掲示</a>板には載っていた。その市場をこじあけて、身近で手早く使いやすいプラットフォームを作ったのが<a class="keyword" href="http://d.hatena.ne.jp/keyword/Airbnb">Airbnb</a>。<br/> 創業者の3人はほんますごい。特にエンジニアのブレチャージク、天才やで・・・</p> <h3>危機のときは代表者が意思決定する</h3> <p>コンセンサスで決めると中途半端なことになるのでちゃんと代表者が右か左か意思決定する。</p> <h3>人に教えを請うときは、自分よりも数年先を行ってる人を選ぶのがコツ</h3> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Airbnb">Airbnb</a>が成功したのはこの部分が大きいのでは。Y<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%D3%A5%CD%A1%BC%A5%BF">コンビネータ</a>ーに入ったのもそう。人に教えを請うのがうまい。貪欲さと素直さ。</p> <h3>その時がくるべくしてきたア<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%C7%A5%A2">イデア</a>を殺すことはできない</h3> <p>チェスキーが引用したビクトル・ユーゴの言葉。<br/> いろんな規制や反対活動があっても、結局は「みんながそのサービスを使いたいと思うかどうか」だ。それさえ実現していれば、賢い人材と時間とお金があれば最後にはすべて解決できる。</p> <h3>文化が壊れるってことは、プロダクトをつくる機械が壊れるってこと</h3> <p>文化が強力であればあるほど、社員を信頼でき、その分正式な規則や手続きが少なくて済む。 手続きが少なければそれだけ管理も軽くなり、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%CE%A5%D9%A1%BC%A5%B7%A5%E7%A5%F3">イノベーション</a>が生まれやすい環境ができる。</p> <p>.<br/> .<br/> .<br/> .<br/> .<br/> .<br/> 最後に文中に出てきた印象的な言葉を。</p> <blockquote><p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%C8%E1%B4%D1%BC%E7%B5%C1">悲観主義</a>者はだいたい正しい。<br/> だが、世界を変えるのは楽観主義者だ。</p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C8%A1%BC%A5%DE%A5%B9%A1%A6%A5%D5%A5%EA%A1%BC%A5%C9%A5%DE%A5%F3">トーマス・フリードマン</a></p></blockquote> <p>おあとがよろしいようで🤗</p> paranishian Macのスクリーンセーバーでいいの見ーつけた hatenablog://entry/17680117127031290346 2019-04-16T08:00:00+09:00 2019-12-28T22:54:40+09:00 Apple TVスクリーンセーバーをベースにしたMacのスクリーンセーバー。 github.com zipファイルをDL→解凍して、インストールするだけでOK。 めちゃめちゃキレイ。癒やされる。4K動画もある。 職業柄、あんまし外に出ない生活してるので外出欲が湧いてきて良い。 他のもついでにぺたり↓↓ 海外に行きたいでござる 🤗 <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20190415/20190415224748.jpg" alt="f:id:paranishian:20190415224748j:plain" title="f:id:paranishian:20190415224748j:plain" class="hatena-fotolife" itemprop="image"></span></p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Apple">Apple</a> TV<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%EA%A1%BC%A5%F3%A5%BB%A1%BC%A5%D0%A1%BC">スクリーンセーバー</a>をベースにした<a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac">Mac</a>の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%EA%A1%BC%A5%F3%A5%BB%A1%BC%A5%D0%A1%BC">スクリーンセーバー</a>。</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fgithub.com%2FJohnCoates%2FAerial" title="JohnCoates/Aerial" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://github.com/JohnCoates/Aerial">github.com</a></cite></p> <p>zipファイルをDL→解凍して、インストールするだけでOK。</p> <p>めちゃめちゃキレイ。癒やされる。4K動画もある。</p> <p>職業柄、あんまし外に出ない生活してるので外出欲が湧いてきて良い。</p> <p>他のもついでにぺたり↓↓</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20190415/20190415224912.jpg" alt="f:id:paranishian:20190415224912j:plain" title="f:id:paranishian:20190415224912j:plain" class="hatena-fotolife" itemprop="image"></span> <span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20190415/20190415224931.jpg" alt="f:id:paranishian:20190415224931j:plain" title="f:id:paranishian:20190415224931j:plain" class="hatena-fotolife" itemprop="image"></span> <span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20190415/20190415224948.jpg" alt="f:id:paranishian:20190415224948j:plain" title="f:id:paranishian:20190415224948j:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>海外に行きたいでござる 🤗</p> paranishian WiFiルーターを刷新したらダウンロード速度6.8倍、アップロード速度15.9倍になった hatenablog://entry/17680117126987772890 2019-03-04T20:12:36+09:00 2019-12-28T22:56:34+09:00 実家でのリモートワーク中、インターネットが遅くて開発に影響が出てきそうだったので対応することにしました。 回線はドコモ光を契約してる*1し速いはずやのになぁ。。🤔 調べてみると、どうやらルーターに問題がある気配がした*2ので、こいつを購入してbefore/afterを比較してみました。*3 TP-Link Wi-Fi 無線LAN ルーター 11ac AC2600 1733 + 800 Mbps MU-MIMO IPv6 デュアルバンド ギガビット Archer A10 3年保証発売日: 2018/11/28メディア: Personal Computers before 遅すぎぃ。。。。 aft… <p>実家でのリモートワーク中、インターネットが遅くて開発に影響が出てきそうだったので対応することにしました。</p> <p>回線はドコモ光を契約してる<a href="#f-e6e77c94" name="fn-e6e77c94" title="そもそもドコモ光を契約していたのになぞのソフトバンクairなるルーターを使っていた事件もありました(実家あるある)">*1</a>し速いはずやのになぁ。。🤔</p> <p>調べてみると、どうやら<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EB%A1%BC%A5%BF%A1%BC">ルーター</a>に問題がある気配がした<a href="#f-094374c4" name="fn-094374c4" title="結構前のbuffaloルーターだった">*2</a>ので、こいつを購入してbefore/afterを比較してみました。<a href="#f-0a1f7c4a" name="fn-0a1f7c4a" title="「google speedtest」と検索して出てくるやつで実施">*3</a></p> <p><div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07JHBBW9H/pamazon-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/41TerdYAs8L._SL160_.jpg" class="hatena-asin-detail-image" alt="TP-Link Wi-Fi 無線LAN ルーター 11ac AC2600 1733 + 800 Mbps MU-MIMO IPv6 デュアルバンド ギガビット Archer A10 3年保証" title="TP-Link Wi-Fi 無線LAN ルーター 11ac AC2600 1733 + 800 Mbps MU-MIMO IPv6 デュアルバンド ギガビット Archer A10 3年保証"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07JHBBW9H/pamazon-22/">TP-Link Wi-Fi 無線LAN ルーター 11ac AC2600 1733 + 800 Mbps MU-MIMO IPv6 デュアルバンド ギガビット Archer A10 3年保証</a></p><ul><li><span class="hatena-asin-detail-label">発売日:</span> 2018/11/28</li><li><span class="hatena-asin-detail-label">メディア:</span> Personal Computers</li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <h2>before</h2> <p>遅すぎぃ。。。。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20190304/20190304192049.png" alt="f:id:paranishian:20190304192049p:plain" title="f:id:paranishian:20190304192049p:plain" class="hatena-fotolife" itemprop="image"></span></p> <h2>after</h2> <p>5G速すぎーー!!</p> <table> <thead> <tr> <th>2G </th> <th> 5G</th> </tr> </thead> <tbody> <tr> <td><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20190304/20190304192046.png" alt="f:id:paranishian:20190304192046p:plain" title="f:id:paranishian:20190304192046p:plain" class="hatena-fotolife" itemprop="image"></span> </td> <td> <span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20190304/20190304192042.png" alt="f:id:paranishian:20190304192042p:plain" title="f:id:paranishian:20190304192042p:plain" class="hatena-fotolife" itemprop="image"></span></td> </tr> </tbody> </table> <p>どこの実家もこういう問題ありそうですね。<a href="#f-0b2a6d2f" name="fn-0b2a6d2f" title="そして代理店に搾取されてそう。。">*4</a></p> <p>これで快適に開発できるぞ!💪</p> <p>以上です🤗</p> <div class="footnote"> <p class="footnote"><a href="#fn-e6e77c94" name="f-e6e77c94" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">そもそもドコモ光を契約していたのになぞの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BD%A5%D5%A5%C8%A5%D0%A5%F3%A5%AF">ソフトバンク</a><a class="keyword" href="http://d.hatena.ne.jp/keyword/air">air</a>なる<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EB%A1%BC%A5%BF%A1%BC">ルーター</a>を使っていた事件もありました(実家あるある)</span></p> <p class="footnote"><a href="#fn-094374c4" name="f-094374c4" class="footnote-number">*2</a><span class="footnote-delimiter">:</span><span class="footnote-text">結構前のbuffalo<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EB%A1%BC%A5%BF%A1%BC">ルーター</a>だった</span></p> <p class="footnote"><a href="#fn-0a1f7c4a" name="f-0a1f7c4a" class="footnote-number">*3</a><span class="footnote-delimiter">:</span><span class="footnote-text">「<a class="keyword" href="http://d.hatena.ne.jp/keyword/google">google</a> speedtest」と検索して出てくるやつで実施</span></p> <p class="footnote"><a href="#fn-0b2a6d2f" name="f-0b2a6d2f" class="footnote-number">*4</a><span class="footnote-delimiter">:</span><span class="footnote-text">そして代理店に搾取されてそう。。</span></p> </div> paranishian assets:precompileしたアセットのサイズをbundlesizeを使ってPR上に通知する hatenablog://entry/10257846132677119949 2018-12-07T08:00:00+09:00 2019-12-28T22:57:08+09:00 アセットは放置しておくと膨らんでいくばかりなのでチェックできる仕組みをつくります。 今回は、assets:precompileしたアセットのサイズ(とmasterとの差分)をPR上に通知するようにしました。 bundlesizeのセットアップ bundlesizeの使い方はREADMEを見ていただければと。 siddharthkp/bundlesize: Keep your bundle size in check 今回は、precompileしたアセットを対象にするので以下のようにしました 👇 // package.json ... "bundlesize": [ { "path": "./… <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20181204/20181204173858.png" alt="f:id:paranishian:20181204173858p:plain" title="f:id:paranishian:20181204173858p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>アセットは放置しておくと膨らんでいくばかりなのでチェックできる仕組みをつくります。<br/> 今回は、assets:precompileしたアセットのサイズ(と<code>master</code>との差分)をPR上に通知するようにしました。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20181206/20181206183903.png" alt="f:id:paranishian:20181206183903p:plain" title="f:id:paranishian:20181206183903p:plain" class="hatena-fotolife" itemprop="image"></span></p> <h2>bundlesizeのセットアップ</h2> <p>bundlesizeの使い方はREADMEを見ていただければと。<br/> <a href="https://github.com/siddharthkp/bundlesize">siddharthkp/bundlesize: Keep your bundle size in check</a></p> <p>今回は、precompileしたアセットを対象にするので以下のようにしました 👇</p> <pre class="code lang-json" data-lang="json" data-unlink><span class="synError">// package.json</span> ... &quot;<span class="synStatement">bundlesize</span>&quot;: <span class="synSpecial">[</span> <span class="synSpecial">{</span> &quot;<span class="synStatement">path</span>&quot;: &quot;<span class="synConstant">./public/assets/application.js.gz</span>&quot;, &quot;<span class="synStatement">maxSize</span>&quot;: &quot;<span class="synConstant">150 kB</span>&quot; <span class="synSpecial">}</span>, <span class="synSpecial">{</span> &quot;<span class="synStatement">path</span>&quot;: &quot;<span class="synConstant">./public/assets/application.css.gz</span>&quot;, &quot;<span class="synStatement">maxSize</span>&quot;: &quot;<span class="synConstant">30 kB</span>&quot; <span class="synSpecial">}</span> <span class="synSpecial">]</span>, ... </pre> <p>bundlesizeには、PR上で同じファイル名のもののサイズ差分を教えてくれる便利な機能があります。<br/> が、rails4からはdigestが必ずついてしまうのでアセットが別名になってしまってサイズの比較ができない。。🤔</p> <p>ので、compile後のアセットをnon-digestなファイル名にコピーすることで対応しました。</p> <p>non-digestなアセットをつくるgemもありますが、testのためにconfig/initializersに手を加えるのは大げさすぎるのでやめました 😪<br/> <a href="https://github.com/alexspeller/non-stupid-digest-assets">alexspeller/non-stupid-digest-assets: Fix the Rails 4 asset pipeline to generate non-digest along with digest assets</a></p> <h2>CircleCIに導入する</h2> <p><code>BUNDLESIZE_GITHUB_TOKEN</code>は別途CircleCIの「Environment Variables」に設定しておきます。 <span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20181204/20181204165558.png" alt="f:id:paranishian:20181204165558p:plain" title="f:id:paranishian:20181204165558p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>細かいのはすっ飛ばして今回の箇所だけ。 (実はassetsのキャッシュ部分とか省略している)</p> <pre class="code lang-yaml" data-lang="yaml" data-unlink><span class="synComment"># config.yml</span> <span class="synIdentifier">version</span><span class="synSpecial">:</span> <span class="synConstant">2</span> <span class="synIdentifier">jobs</span><span class="synSpecial">:</span> <span class="synIdentifier">build</span><span class="synSpecial">:</span> <span class="synIdentifier">docker</span><span class="synSpecial">:</span> ... <span class="synIdentifier">steps</span><span class="synSpecial">:</span> <span class="synStatement">- </span>checkout ... <span class="synStatement">- </span><span class="synIdentifier">run</span><span class="synSpecial">:</span> <span class="synIdentifier">name</span><span class="synSpecial">:</span> assets:precompile <span class="synIdentifier">command</span><span class="synSpecial">:</span> | <span class="synComment"> # bundlesizeで邪魔になるのでcacheされた古いassetsは削除する</span> rm -rf public/assets public/packs-test bundle exec rake assets:precompile <span class="synComment"> # bundlesizeで比較するためにdigestなしでファイルをコピーしておく</span> <span class="synStatement">- </span><span class="synIdentifier">run</span><span class="synSpecial">:</span> | cp public/assets/application{-*,}.js.gz cp public/assets/application{-*,}.css.gz <span class="synStatement">- </span><span class="synIdentifier">run</span><span class="synSpecial">:</span> npx bundlesize </pre> <p>どんどん自動化していくでぇ〜 💪</p> <p>以上です 🤗</p> paranishian CSS削除の前後でレイアウト崩れがないかどうかチェックするスクリプトを書いた hatenablog://entry/10257846132673748576 2018-11-29T08:00:00+09:00 2019-12-28T23:00:02+09:00 はじめに 「よっしゃあ、サイト高速化するぞ!」 「むむ、CSSサイズが大きいなぁ。軽量化しよう!」 「このCSS使われてないやん、、削除ー!」 ・・・・・ 他のページのレイアウト崩れてるやん 😇 CSSの構造が複雑になっていたので、削除の影響範囲わかんない。どうしよう。 ってことで、対応の前後でレイアウト崩れがないかどうかをチェックできるスクリプトをつくりました。 あんましnode使ったことなかったんですが、puppeteerでさくっと作れました。 流れとしては、 対応の前後でサイトのスクショを撮る スクショ画像の差分をチェックする っていう手順です。 サイトのスクショを撮る PATHSにスク… <h2>はじめに</h2> <p>「よっしゃあ、サイト高速化するぞ!」</p> <p>「むむ、<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>サイズが大きいなぁ。軽量化しよう!」</p> <p>「この<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>使われてないやん、、削除ー!」</p> <p>・・・・・</p> <p>他のページのレイアウト崩れてるやん 😇</p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>の構造が複雑になっていたので、削除の影響範囲わかんない。どうしよう。</p> <p>ってことで、対応の前後でレイアウト崩れがないかどうかをチェックできる<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%EA%A5%D7%A5%C8">スクリプト</a>をつくりました。</p> <p>あんましnode使ったことなかったんですが、puppeteerでさくっと作れました。</p> <p>流れとしては、</p> <ol> <li>対応の前後でサイトのスクショを撮る</li> <li>スクショ画像の差分をチェックする</li> </ol> <p>っていう手順です。</p> <h2>サイトのスクショを撮る</h2> <p><code>PATHS</code>にスクショ撮影対象のパスを入れてます。<br/> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%DE%A5%DB">スマホ</a>サイトにするためにUserAgentも設定。<br/> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%A3%A5%EC%A5%AF%A5%C8">ディレクト</a>リつくってそこに一括で画像保存してます。</p> <pre class="code lang-javascript" data-lang="javascript" data-unlink><span class="synComment">// main.js</span> <span class="synComment">// iPhone X に合わせた</span> <span class="synStatement">const</span> DEFAULT_VIEWPORT = <span class="synIdentifier">{</span> width: 375, height: 812, deviceScaleFactor: 1, <span class="synIdentifier">}</span>; <span class="synStatement">const</span> puppeteer = require(<span class="synConstant">'puppeteer'</span>); <span class="synStatement">const</span> fs = require(<span class="synConstant">'fs'</span>); <span class="synStatement">const</span> DEFAULT_HOST = <span class="synConstant">'https://qiita.com'</span>; <span class="synStatement">const</span> PATHS = <span class="synIdentifier">[</span> <span class="synConstant">'/'</span>, <span class="synConstant">'/paranishian'</span>, <span class="synConstant">'/tags/aws'</span>, <span class="synConstant">'/tags/ruby'</span> <span class="synIdentifier">]</span> <span class="synStatement">const</span> date = <span class="synStatement">new</span> <span class="synType">Date</span>(); <span class="synStatement">const</span> timestamp = date.getTime().toString(); async <span class="synIdentifier">function</span> run()<span class="synIdentifier">{</span> <span class="synComment">// ブラウザを起動する</span> <span class="synStatement">const</span> browser = await puppeteer.launch(<span class="synIdentifier">{</span> <span class="synComment">// headless: false,</span> defaultViewport: DEFAULT_VIEWPORT, <span class="synIdentifier">}</span>); <span class="synComment">// ページつくる</span> <span class="synStatement">const</span> context = await browser.createIncognitoBrowserContext(); <span class="synStatement">const</span> page = await context.newPage(); <span class="synComment">// スマホのUserAgentにする</span> await page.setUserAgent(<span class="synConstant">'Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.96 Mobile Safari/537.36 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)'</span>) <span class="synComment">// ディレクトリ作成</span> fs.mkdirSync(timestamp); <span class="synStatement">for</span>(<span class="synStatement">const</span> path of PATHS) <span class="synIdentifier">{</span> <span class="synStatement">const</span> url = DEFAULT_HOST + path; await page.<span class="synStatement">goto</span>(url, <span class="synIdentifier">{</span>waitUntil: <span class="synConstant">'networkidle2'</span><span class="synIdentifier">}</span>); console.log(`Done! : $<span class="synIdentifier">{</span>url<span class="synIdentifier">}</span>`); <span class="synStatement">const</span> filename = path.replace(<span class="synConstant">/\//g</span>, <span class="synConstant">'_'</span>) + <span class="synConstant">'.png'</span>; <span class="synComment">// スクリーンショットを保存</span> await page.screenshot(<span class="synIdentifier">{</span>path: timestamp + <span class="synConstant">'/'</span> + filename, fullPage: <span class="synConstant">true</span><span class="synIdentifier">}</span>) <span class="synIdentifier">}</span> <span class="synComment">// 終了</span> await browser.close() <span class="synIdentifier">}</span> run() </pre> <p>さっそく実行。</p> <pre class="code lang-sh" data-lang="sh" data-unlink>❯ node main Done! : https://qiita.com/ Done! : https://qiita.com/paranishian Done! : https://qiita.com/tags/aws Done! : https://qiita.com/tags/ruby ❯ <span class="synStatement">ls</span> <span class="synSpecial">-l</span> <span class="synConstant">1542803191786</span> total <span class="synConstant">12144</span> -rw-r--r-- <span class="synConstant">1</span> paranishian www <span class="synConstant">657027</span> <span class="synConstant">11</span> <span class="synConstant">21</span> 21:26 _.png -rw-r--r-- <span class="synConstant">1</span> paranishian www <span class="synConstant">749702</span> <span class="synConstant">11</span> <span class="synConstant">21</span> 21:26 _paranishian.png -rw-r--r-- <span class="synConstant">1</span> paranishian www <span class="synConstant">2202719</span> <span class="synConstant">11</span> <span class="synConstant">21</span> 21:26 _tags_aws.png -rw-r--r-- <span class="synConstant">1</span> paranishian www <span class="synConstant">2599285</span> <span class="synConstant">11</span> <span class="synConstant">21</span> 21:26 _tags_ruby.png </pre> <p>こんな感じで画像保存してます。</p> <h2>差分をチェックする</h2> <p><code>pixel-diff</code>で差分をチェックします。</p> <pre class="code lang-javascript" data-lang="javascript" data-unlink><span class="synComment">// diff.js</span> <span class="synStatement">const</span> DIFF_DIRECTORY = <span class="synConstant">'diff'</span>; <span class="synStatement">const</span> fs = require(<span class="synConstant">'fs'</span>); <span class="synStatement">const</span> PixelDiff = require(<span class="synConstant">'pixel-diff'</span>); <span class="synStatement">const</span> PNG = require(<span class="synConstant">'pngjs'</span>).PNG; <span class="synStatement">const</span> path = require(<span class="synConstant">'path'</span>); <span class="synStatement">const</span> argv = require(<span class="synConstant">'yargs'</span>) .options(<span class="synIdentifier">{</span> <span class="synConstant">'a'</span>: <span class="synIdentifier">{</span> describe: <span class="synConstant">'比較対象画像のディレクトリA'</span>, type: <span class="synConstant">'string'</span>, demandOption: <span class="synConstant">true</span> <span class="synIdentifier">}</span>, <span class="synConstant">'b'</span>: <span class="synIdentifier">{</span> describe: <span class="synConstant">'比較対象画像のディレクトリB'</span>, type: <span class="synConstant">'string'</span>, demandOption: <span class="synConstant">true</span> <span class="synIdentifier">}</span>, <span class="synIdentifier">}</span>) .help() .argv; async <span class="synIdentifier">function</span> checkDiff(filename) <span class="synIdentifier">{</span> <span class="synComment">// NOTE: 同じファイル名の画像がある前提なのでファイルの存在チェックはしていない</span> <span class="synStatement">const</span> imageA = `$<span class="synIdentifier">{</span>argv.a<span class="synIdentifier">}</span>/$<span class="synIdentifier">{</span>filename<span class="synIdentifier">}</span>`; <span class="synStatement">const</span> imageB = `$<span class="synIdentifier">{</span>argv.b<span class="synIdentifier">}</span>/$<span class="synIdentifier">{</span>filename<span class="synIdentifier">}</span>`; <span class="synStatement">const</span> pngA = await PNG.sync.read(fs.readFileSync(imageA)); <span class="synStatement">const</span> diff = <span class="synStatement">new</span> PixelDiff(<span class="synIdentifier">{</span> imageAPath: imageA, imageBPath: imageB, thresholdType: PixelDiff.THRESHOLD_PERCENT, <span class="synComment">// thresholdType: PixelDiff.RESULT_DIFFERENT,</span> threshold: 0.01, <span class="synComment">// 1% threshold</span> imageOutputPath: `$<span class="synIdentifier">{</span>DIFF_DIRECTORY<span class="synIdentifier">}</span>/$<span class="synIdentifier">{</span>filename<span class="synIdentifier">}</span>`, cropImageB: <span class="synIdentifier">{</span> x: 0, y: 0, width: pngA.width, height: pngA.height, <span class="synIdentifier">}</span>, <span class="synIdentifier">}</span>); <span class="synStatement">const</span> result = await diff.runWithPromise(); console.log(`Found $<span class="synIdentifier">{</span>result.differences<span class="synIdentifier">}</span> pixels differences <span class="synStatement">in</span> $<span class="synIdentifier">{</span>filename<span class="synIdentifier">}</span>.`); <span class="synIdentifier">}</span> async <span class="synIdentifier">function</span> run()<span class="synIdentifier">{</span> <span class="synComment">// diff保存用ディレクトリ作成</span> <span class="synStatement">if</span> (!fs.existsSync(DIFF_DIRECTORY))<span class="synIdentifier">{</span> fs.mkdirSync(DIFF_DIRECTORY); <span class="synIdentifier">}</span> <span class="synStatement">if</span> (!fs.existsSync(argv.a) || !fs.existsSync(argv.b))<span class="synIdentifier">{</span> <span class="synStatement">throw</span> <span class="synStatement">new</span> Error(<span class="synConstant">'ディレクトリが見つかりません!'</span>); <span class="synIdentifier">}</span> fs.readdir(argv.a, (err, files) =&gt; <span class="synIdentifier">{</span> files.forEach(file =&gt; <span class="synIdentifier">{</span> <span class="synComment">// pngファイル以外は無視する</span> <span class="synStatement">if</span>(path.extname(file) != <span class="synConstant">'.png'</span>) <span class="synIdentifier">{</span> <span class="synStatement">return</span>; <span class="synIdentifier">}</span> checkDiff(file) <span class="synIdentifier">}</span>); <span class="synIdentifier">}</span>) <span class="synIdentifier">}</span> run() </pre> <p>引数に対象<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%A3%A5%EC%A5%AF%A5%C8">ディレクト</a>リ名を指定して実行すると、diff<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%A3%A5%EC%A5%AF%A5%C8">ディレクト</a>リが作成されて差分画像が保存されます。</p> <pre class="code lang-sh" data-lang="sh" data-unlink>❯ node diff <span class="synSpecial">-a</span> <span class="synConstant">12345</span> <span class="synSpecial">-b</span> <span class="synConstant">67890</span> ... </pre> <p>最終的にはCIに導入してmasterとの差分チェックを自動化するのが目標です。</p> <p>それにしてもpuppeteerは簡単で最高ですね 🤤</p> <p>どなたかの参考になれば幸いです 🤗</p> <h2>参考</h2> <ul> <li><a href="https://support.google.com/webmasters/answer/1061943?hl=ja">Google のクローラ(ユーザー エージェント) - Search Console ヘルプ</a></li> <li><a href="https://github.com/GoogleChrome/puppeteer">GoogleChrome/puppeteer: Headless Chrome Node API</a></li> <li><a href="https://github.com/GoogleChromeLabs/puppeteer-examples">GoogleChromeLabs/puppeteer-examples: Use case-driven examples for using Puppeteer and headless chrome</a></li> </ul> paranishian アセットの変更がない場合、assets:precompileをスキップすることでCIの速度を改善した hatenablog://entry/10257846132672934674 2018-11-20T15:25:27+09:00 2019-12-28T22:57:29+09:00 assets:precompileに毎回1分ほどかかっていたので嬉しい速度改善 😋 以下の記事を参考にさせていただきました 🙏 CircleCI 2.0に移行して新機能を活用したらCIの実行時間が半分になった話 - クラウドワークス エンジニアブログ 仕組みとしては、precompile対象のアセットの変更をgitのrevisionを使ってチェックして、変更があればprecompile、なければスキップする、という流れです。 自分のプロジェクトではwebpacker + react-railsを使ってるので以下を考慮しました。 compile対象のディレクトリ(app/javascript)の… <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20181120/20181120150741.png" alt="f:id:paranishian:20181120150741p:plain" title="f:id:paranishian:20181120150741p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p><code>assets:precompile</code>に毎回1分ほどかかっていたので嬉しい速度改善 😋</p> <p>以下の記事を参考にさせていただきました 🙏<br/> <a href="http://engineer.crowdworks.jp/entry/2017/04/04/202719">CircleCI 2.0に移行して新機能を活用したらCIの実行時間が半分になった話 - クラウドワークス エンジニアブログ</a></p> <p>仕組みとしては、precompile対象のアセットの変更をgitのrevisionを使ってチェックして、変更があれば<code>precompile</code>、なければスキップする、という流れです。</p> <p>自分のプロジェクトではwebpacker + react-<a class="keyword" href="http://d.hatena.ne.jp/keyword/rails">rails</a>を使ってるので以下を考慮しました。</p> <ul> <li>compile対象の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%A3%A5%EC%A5%AF%A5%C8">ディレクト</a>リ(<code>app/javascript</code>)の変更もチェックする</li> <li>compile後のassets(<code>public/packs-test</code>)もキャッシュする</li> </ul> <p>.circleci/config.yml</p> <pre class="code lang-yaml" data-lang="yaml" data-unlink><span class="synPreProc">...</span> <span class="synIdentifier">steps</span><span class="synSpecial">:</span> ... <span class="synComment"> # precompile対象のassetsのgitのrevisionをkeyにする</span> <span class="synStatement">- </span><span class="synIdentifier">run</span><span class="synSpecial">:</span> <span class="synIdentifier">name</span><span class="synSpecial">:</span> create key for cashing assets <span class="synIdentifier">command</span><span class="synSpecial">:</span> | git rev-parse $(git log --oneline -n <span class="synConstant">1</span> app/assets lib/assets vendor/assets Gemfile.lock app/javascript | awk <span class="synConstant">'{{print $1}}'</span>) &gt; VERSION <span class="synStatement">- </span><span class="synIdentifier">restore_cache</span><span class="synSpecial">:</span> <span class="synIdentifier">keys</span><span class="synSpecial">:</span> <span class="synStatement">- </span>asset-cache-{{ arch }}-{{ .Branch }}-{{ checksum <span class="synConstant">&quot;VERSION&quot;</span> }} <span class="synStatement">- </span>asset-cache-{{ arch }}-{{ .Branch }} <span class="synStatement">- </span>asset-cache <span class="synComment"> # assetsのrevisionが変わってなければキャッシュから使う。変わっていればprecompile</span> <span class="synStatement">- </span><span class="synIdentifier">run</span><span class="synSpecial">:</span> <span class="synIdentifier">name</span><span class="synSpecial">:</span> assets:precompile <span class="synIdentifier">command</span><span class="synSpecial">:</span> | current_revision=VERSION previous_revision=public/assets/VERSION if <span class="synSpecial">[</span> ! -e $previous_revision <span class="synSpecial">]</span> || <span class="synType">!</span> diff $previous_revision $current_revision; then bundle exec rake assets:precompile cp -f $current_revision $previous_revision else echo <span class="synConstant">&quot;Skipped.&quot;</span> fi <span class="synStatement">- </span><span class="synIdentifier">save_cache</span><span class="synSpecial">:</span> <span class="synIdentifier">key</span><span class="synSpecial">:</span> asset-cache-{{ arch }}-{{ .Branch }}-{{ checksum <span class="synConstant">&quot;VERSION&quot;</span> }} <span class="synIdentifier">paths</span><span class="synSpecial">:</span> <span class="synStatement">- </span>public/assets <span class="synStatement">- </span>public/packs-test <span class="synStatement">- </span>tmp/cache/assets/sprockets </pre> <p>どんどん改善していくでー 💪</p> <h2>参考</h2> <ul> <li><a href="https://github.com/rails/webpacker">rails/webpacker: Use Webpack to manage app-like JavaScript modules in Rails</a></li> <li><a href="https://github.com/reactjs/react-rails">reactjs/react-rails: Integrate React.js with Rails views and controllers, the asset pipeline, or webpacker.</a></li> </ul> paranishian Amazon CloudFront & Lambda@Edge でリクエストに応じて自動で画像リサイズする仕組みを試してみた hatenablog://entry/10257846132670343691 2018-11-16T08:00:00+09:00 2019-12-28T22:57:42+09:00 Webページをすばやく表示するにはページ内画像のlazyloadや圧縮は不可欠。 けど、毎回画像を圧縮するのは手間だし自動化したい。 そして、なんかモダンな方法でやってみたい。 ってことで、調べていたらこの記事を見つけました。 Amazon CloudFront & Lambda@Edge で画像をリサイズする | Amazon Web Services ブログ 参照記事によると、 リクエストのクエリパラメータに応じて画像をリサイズしてレスポンスを返す webp対応のブラウザには画像をwebpに変換してレスポンスを返す が実現できるとのこと。 お、これ使えば画像の圧縮も簡単にできそう!! しか… <p>Webページをすばやく表示するにはページ内画像のlazyloadや圧縮は不可欠。<br/> けど、毎回画像を圧縮するのは手間だし自動化したい。<br/> そして、なんかモダンな方法でやってみたい。</p> <p>ってことで、調べていたらこの記事を見つけました。<br/> <a href="https://aws.amazon.com/jp/blogs/news/resizing-images-with-amazon-cloudfront-lambdaedge-aws-cdn-blog/">Amazon CloudFront &amp; Lambda@Edge で画像をリサイズする | Amazon Web Services ブログ</a></p> <p>参照記事によると、</p> <ol> <li>リク<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%B9">エス</a>トのクエリパラメータに応じて画像をリサイズしてレスポンスを返す</li> <li>webp対応のブラウザには画像をwebpに変換してレスポンスを返す</li> </ol> <p>が実現できるとのこと。</p> <p>お、これ使えば画像の圧縮も簡単にできそう!!<br/> しかもS3にオリジナルファイルを残した上で実現できるやーん 😆<br/> さらに動的にリサイズできるからサイズ変更とか追加も簡単そう 💪</p> <p>ひとまず動作検証したかったので、カスタマイズせずに記事通りにやってみました。<br/> (画像の圧縮はOrigin-Response関数に手を加えればできるはず)</p> <p>Lambda@EdgeやCloudFrontの細かい説明は参照記事におまかせするとして、参照記事では詳細な実装手順がわからなかったりつまづくポイントがあったので流れをまとめます。</p> <h2>Dockerで環境構築</h2> <p>まずはDockerでLambda@Edge関数を<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%D1%A5%A4%A5%EB">コンパイル</a>するための環境を構築します。</p> <h3>Dockerfileを作成する</h3> <p>参照記事のままのDockerfileだとさっそくコケるので注意 😂<br/> <code>tar</code>, <code>gzip</code>がなくてbuildが通らないので追加しています。</p> <pre class="code dockerfile" data-lang="dockerfile" data-unlink>FROM amazonlinux WORKDIR /tmp #install the dependencies RUN yum -y install gcc-c++ findutils tar gzip RUN touch ~/.bashrc &amp;&amp; chmod +x ~/.bashrc RUN curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.5/install.sh | bash RUN source ~/.bashrc &amp;&amp; nvm install 6.10 WORKDIR /build</pre> <h3>docker buildする</h3> <pre class="code lang-sh" data-lang="sh" data-unlink>docker build <span class="synSpecial">--tag</span> amazonlinux:nodejs . </pre> <h2>Lambda@Edge関数の作成</h2> <h3>View-Request関数をつくる</h3> <p>これは参照記事のままでOK。<br/> <code>lambda/viewer-request-function/index.js</code>に保存しました。</p> <h3>Origin-Request関数を作る</h3> <p>これも参照記事のままでOK。<br/> <code>lambda/origin-response-function/index.js</code>に保存しました。</p> <h3>関数の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%D1%A5%A4%A5%EB">コンパイル</a>&パッケージング</h3> <p>Origin-Response 関数</p> <pre class="code lang-sh" data-lang="sh" data-unlink>$ docker run <span class="synSpecial">--rm</span> <span class="synSpecial">--volume</span> <span class="synPreProc">${PWD}</span>/lambda/origin-response-function:/build amazonlinux:nodejs /bin/bash <span class="synSpecial">-c</span> <span class="synStatement">&quot;</span><span class="synConstant">source ~/.bashrc; npm init -f -y; npm install sharp --save; npm install querystring --save; npm install --only=prod</span><span class="synStatement">&quot;</span> $ <span class="synStatement">mkdir</span> <span class="synSpecial">-p</span> dist &amp;&amp; <span class="synStatement">cd</span> lambda/origin-response-function &amp;&amp; zip <span class="synSpecial">-FS</span> <span class="synSpecial">-q</span> <span class="synSpecial">-r</span> ../../dist/origin-response-function.zip * &amp;&amp; <span class="synStatement">cd</span> ../.. </pre> <p>Viewer-Request 関数</p> <pre class="code lang-sh" data-lang="sh" data-unlink>$ docker run <span class="synSpecial">--rm</span> <span class="synSpecial">--volume</span> <span class="synPreProc">${PWD}</span>/lambda/viewer-request-function:/build amazonlinux:nodejs /bin/bash <span class="synSpecial">-c</span> <span class="synStatement">&quot;</span><span class="synConstant">source ~/.bashrc; npm init -f -y; npm install querystring --save; npm install --only=prod</span><span class="synStatement">&quot;</span> $ <span class="synStatement">mkdir</span> <span class="synSpecial">-p</span> dist &amp;&amp; <span class="synStatement">cd</span> lambda/viewer-request-function &amp;&amp; zip <span class="synSpecial">-FS</span> <span class="synSpecial">-q</span> <span class="synSpecial">-r</span> ../../dist/viewer-request-function.zip * &amp;&amp; <span class="synStatement">cd</span> ../.. </pre> <h2>CloudFormationの実行</h2> <h3>zipファイルのUPLOAD</h3> <p>まずはS3<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%B1%A5%C3%A5%C8">バケット</a>を作成し、先ほど作成したzipファイルをUPLOADします。</p> <p><a href="https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/lambda-requirements-limits.html">Lambda 関数の要件と制限 - Amazon CloudFront</a></p> <blockquote><p>トリガーを追加できるのは、米国東部(<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A1%BC%A5%B8%A5%CB%A5%A2">バージニア</a>北部) リージョンの関数のみです。</p></blockquote> <p>とあるので、この<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%B1%A5%C3%A5%C8">バケット</a>のRegionも<code>us-east-1</code>を使います。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20181115/20181115180417.png" alt="f:id:paranishian:20181115180417p:plain" title="f:id:paranishian:20181115180417p:plain" class="hatena-fotolife" itemprop="image"></span></p> <h3><a class="keyword" href="http://d.hatena.ne.jp/keyword/yaml">yaml</a>ファイルの作成</h3> <p>これも参照記事のままです。<br/> <code>cloudformation.yaml</code>として保存しました。<br/> テンプレート内の<code>&lt;code-bucket&gt;</code>は上記で作成したS3<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%B1%A5%C3%A5%C8">バケット</a>名を設定してください。</p> <h3>スタックの作成</h3> <p>リージョンを<code>us-east-1</code>に切り替えて、CloudFormationを実行します。</p> <p>スタックの作成 > テンプレートを <a class="keyword" href="http://d.hatena.ne.jp/keyword/Amazon%20S3">Amazon S3</a>にアップロード で、先ほどの<a class="keyword" href="http://d.hatena.ne.jp/keyword/yaml">yaml</a>ファイルを指定します。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20181115/20181115180451.png" alt="f:id:paranishian:20181115180451p:plain" title="f:id:paranishian:20181115180451p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>スタックがじゃんじゃん作成されて、完了。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20181115/20181115180511.png" alt="f:id:paranishian:20181115180511p:plain" title="f:id:paranishian:20181115180511p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>あとは、作成されたS3<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%B1%A5%C3%A5%C8">バケット</a>(<code>image-resize-${AWS::AccountId}-${AWS::Region}</code>)に画像をUPLOADして、CloudFront経由でアクセスすればOKです。</p> <p><code>https://{cloudfront-domain}/images/image.jpg?d=100x100</code></p> <p>アクセスすると、画像が表示されるのと、S3にフォルダが作成されて、リサイズ後の画像が保存されています。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20181115/20181115182206.png" alt="f:id:paranishian:20181115182206p:plain" title="f:id:paranishian:20181115182206p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>・・・</p> <p>なんか急に説明が雑になってしまった 😇</p> <h2>考えないといけないこと</h2> <p>ステキな仕組みやけど考えないといけないこと。</p> <h3>初回アクセスが遅い</h3> <p>まあわかってはいたけど。。画像処理してるわけですし 🍣 <a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AF%A5%ED%A1%BC%A5%E9%A1%BC">クローラー</a>つくってクロールさせるとか、なんかシステムで自動化したいところ。</p> <h3>S3への画像UPLOADが遅い</h3> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%B1%A5%C3%A5%C8">バケット</a>が<code>us-east-1</code>になっているのでしゃあないけど実際運用するとなるとひと手間必要かなぁ。<br/> UPLOAD用の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%B1%A5%C3%A5%C8">バケット</a>は東京Regionに作成して、<code>us-east-1</code>の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%B1%A5%C3%A5%C8">バケット</a>にsyncするとかかなぁ 🤔</p> <p>ってことで、いろいろやるべきことが多そうだし今回は見送りました。</p> <p>はじめてLambda@EdgeやCloudFormationを使ったので良い勉強になりました。<br/> 実際運用できる仕組みを作ったらまた記事にします 😋</p> <p>おしまい。</p> paranishian Resource Hintsの対応をしてWebPageTestの点数を改善した hatenablog://entry/10257846132663059823 2018-11-02T18:37:24+09:00 2019-12-28T22:57:50+09:00 はじめに いま開発チームでサイト速度改善に取り組んでいて、 その一環でResource Hintsの対応をしたので、調べたこととリリース後の効果をまとめます🙌 調べたこと まずはResource Hintsについて ふむふむ。いろんな種類があるなぁ。 <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20181102/20181102183456.jpg" alt="f:id:paranishian:20181102183456j:plain" title="f:id:paranishian:20181102183456j:plain" class="hatena-fotolife" itemprop="image"></span> Photo by rawpixel on Unsplash</p> <h2>はじめに</h2> <p>いま開発チームでサイト速度改善に取り組んでいて、 その一環でResource Hintsの対応をしたので、調べたこととリリース後の効果をまとめます🙌</p> <h2>調べたこと</h2> <p>まずはResource Hintsについて<br/> <a href="https://www.w3.org/TR/resource-hints/">Resource Hints</a></p> <p>ふむふむ。いろんな種類があるなぁ。🤔</p> <p><a href="https://developer.mozilla.org/ja/docs/Controlling_DNS_prefetching">DNS プリフェッチの制御 | MDN</a></p> <blockquote><p>特にモバイル環境においては、 <a class="keyword" href="http://d.hatena.ne.jp/keyword/DNS">DNS</a> プリフェッチによりページの読み込みにかかる時間が劇的に改善されます。例えば、多数の画像が表示されるページにおいて、画像が要求される前に名前解決が行われている場合では読み込み時間が 5% 以上削減されるでしょう。</p></blockquote> <p>ほうほう、すばらしい!😆</p> <p><a href="http://www.chromium.org/developers/design-documents/dns-prefetching">DNS Prefetching - The Chromium Projects</a></p> <p>注意点として、<code>dns-prefetch</code>は、<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTTPS">HTTPS</a>ページではデフォルトで機能しない😇 けど、<code>&lt;meta http-equiv="x-dns-prefetch-control" content="on"&gt;</code>と記述することで<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTTPS">HTTPS</a>ページでも使えるようになるとのこと。</p> <p>他ではどういう対応をしているのか見てみよう。</p> <h4>日経</h4> <p><code>preconnect</code>を使っている。 <img src="https://user-images.githubusercontent.com/1123224/47697940-9b8cf200-dc50-11e8-87c2-68d158e27c6d.png" alt="2018-10-30 14 32 00" /></p> <h4><a class="keyword" href="http://d.hatena.ne.jp/keyword/twitter">twitter</a></h4> <p><code>preconnect</code>, <code>dns-prefetch</code>を併用している 👀 <code>preload</code>も使ってるなぁ。 <img src="https://user-images.githubusercontent.com/1123224/47697876-59fc4700-dc50-11e8-862c-150df7f218f4.png" alt="image" /></p> <h4><a class="keyword" href="http://d.hatena.ne.jp/keyword/amazon">amazon</a></h4> <p><code>dns-prefetch</code>のみ <img src="https://user-images.githubusercontent.com/1123224/47697908-75ffe880-dc50-11e8-94d5-ff6c83b0951e.png" alt="2018-10-30 14 31 05" /></p> <p>この記事によると<code>preconnect</code>と<code>dns-prefetch</code>を併記したほうが良さそう👇<br/> <a href="https://stackoverflow.com/questions/47875337/dns-prefetch-and-preconnect-one-or-both-fallback">html - DNS-Prefetch and Preconnect - One, or Both? Fallback? - Stack Overflow</a></p> <p>なるほどなるほど。</p> <h2>やったこと</h2> <p>いろいろ調べた結果、</p> <ul> <li>確実に必要なものには<code>preconnect</code>, <code>dns-prefetch</code>を併記 <ul> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Google">Google</a> Tag Managerとか<a class="keyword" href="http://d.hatena.ne.jp/keyword/Google%20Analytics">Google Analytics</a>とか</li> </ul> </li> <li>そうでないものには<code>dns-prefetch</code>のみ記述 <ul> <li>広告系のタグとか</li> </ul> </li> </ul> <p>という方針で実装しました。</p> <p>こんなかんじ。slimファイルです</p> <pre class="code slim" data-lang="slim" data-unlink>head meta http-equiv=&#39;x-dns-prefetch-control&#39; content=&#39;on&#39; link rel=&#39;preconnect dns-prefetch&#39; href=&#39;//cdn.sotoasobi.net&#39; link rel=&#39;preconnect dns-prefetch&#39; href=&#39;//www.googletagmanager.com&#39; link rel=&#39;preconnect dns-prefetch&#39; href=&#39;//www.google-analytics.com&#39; link rel=&#39;dns-prefetch&#39; href=&#39;//maps.google.com&#39; link rel=&#39;dns-prefetch&#39; href=&#39;//www.googleadservices.com&#39; link rel=&#39;dns-prefetch&#39; href=&#39;//googleads.g.doubleclick.net&#39; ...</pre> <h2>リリース後の効果</h2> <p>WebPageTestの点数が改善しました!🎉</p> <table> <thead> <tr> <th style="text-align:center;">start render </th> <th style="text-align:center;"> speed index</th> </tr> </thead> <tbody> <tr> <td style="text-align:center;">1.900s → 1.500s </td> <td style="text-align:center;"> 2.080s → 1.818s</td> </tr> </tbody> </table> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/dns">dns</a> lookup (緑の部分)が飛び飛びで先読みしていることがわかります😙</p> <table> <thead> <tr> <th>before </th> <th> after</th> </tr> </thead> <tbody> <tr> <td><img src="https://user-images.githubusercontent.com/1123224/47702504-77d1a800-dc60-11e8-89ab-b9e8b7965157.png" alt="2018-10-30 16 25 33" /> </td> <td> <img src="https://user-images.githubusercontent.com/1123224/47702462-52dd3500-dc60-11e8-9b92-486640a4b39a.png" alt="2018-10-30 16 24 18" /></td> </tr> </tbody> </table> <p>この他にも、</p> <ul> <li>アセットの軽量化 <ul> <li>画像の圧縮 <ul> <li>lambdaでの自動化も考えている</li> </ul> </li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/css">css</a>, jsの不要部分削除 <ul> <li>地味にしんどいやつ</li> </ul> </li> </ul> </li> <li>画像のlazyload</li> </ul> <p>あたりを地道にやっていって、さらに改善中です😋</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20181101/20181101163913.png" alt="f:id:paranishian:20181101163913p:plain" title="f:id:paranishian:20181101163913p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>まだまだこれから!チームでがんばるでぃ💪</p> paranishian iOSショートカットでちょっとしたライフハックをしてる話 hatenablog://entry/10257846132658099438 2018-10-24T08:00:00+09:00 2019-12-28T22:58:10+09:00 iOS12から登場したショートカットをつくるのが楽しすぎて時間が溶ける・・・🤤 自分は最近Google Mapを使うことが多いので、そのときに使えるショートカットをつくりました。 iCloudの共有リンクも置いてるので良ければ使ってみてください🙌 ※ショートカットAppはプリインストールではないのでAppStoreからインストールする必要があります ショートカットの使い方はこの記事が詳しいです👇 iOS 12で「ショートカット」アプリを使ってみよう:iPhone Tips - Engadget 日本版 お店の他の口コミを調べる Google Mapでお店を見つけて、 「Google以外の他のサ… <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20181024/20181024100856.png" alt="f:id:paranishian:20181024100856p:plain" title="f:id:paranishian:20181024100856p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>iOS12から登場したショートカットをつくるのが楽しすぎて時間が溶ける・・・🤤<br/> 自分は最近<a class="keyword" href="http://d.hatena.ne.jp/keyword/Google">Google</a> Mapを使うことが多いので、そのときに使えるショートカットをつくりました。</p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/iCloud">iCloud</a>の共有リンクも置いてるので良ければ使ってみてください🙌</p> <p>※ショートカットAppはプリインストールではないのでAppStoreからインストールする必要があります<br/> ショートカットの使い方はこの記事が詳しいです👇<br/> <a href="https://japanese.engadget.com/2018/09/28/ios-12-iphone-tips/">iOS 12で「ショートカット」アプリを使ってみよう:iPhone Tips - Engadget 日本版</a></p> <h2>お店の他の口コミを調べる</h2> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Google">Google</a> Mapでお店を見つけて、<br/> 「<a class="keyword" href="http://d.hatena.ne.jp/keyword/Google">Google</a>以外の他のサイトの口コミも見てみたいなー🧐」<br/> そんなときに使います。</p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Google">Google</a> Mapで、<br/> 共有 > ショートカット > 〇〇で調べる<br/> で検索できます。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20181023/20181023112237.gif" alt="f:id:paranishian:20181023112237g:plain" title="f:id:paranishian:20181023112237g:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>ページを直接開くショートカットも作ってみたのですが、速度がなんとも遅かったのでシンプルに<a class="keyword" href="http://d.hatena.ne.jp/keyword/Google">Google</a>検索するだけにしました💡</p> <ul> <li><a href="https://www.icloud.com/shortcuts/655876e07d9444f1b314a0aa5eb3bb91">食べログで調べる</a></li> <li><a href="https://www.icloud.com/shortcuts/fdb0156841b445afaa0eb7cab22bbe37">Rettyで調べる</a> ← Retty版もつくった</li> </ul> <h2>バス停の場所を調べる</h2> <p>例えば渋谷駅。<br/> 「乗り換え案内でバス経由で表示されてもバス停の場所がわからん。。。🤮」<br/> そんなときに使います。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20181023/20181023112219.gif" alt="f:id:paranishian:20181023112219g:plain" title="f:id:paranishian:20181023112219g:plain" class="hatena-fotolife" itemprop="image"></span></p> <p><a href="https://www.icloud.com/shortcuts/3e19210cf7a14ca990747095ab3340c5">バス停の場所を調べる</a></p> <h2><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A6%A5%A3%A5%B8%A5%A7%A5%C3%A5%C8">ウィジェット</a>からワンタップで</h2> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A6%A5%A3%A5%B8%A5%A7%A5%C3%A5%C8">ウィジェット</a>に表示するとさらに捗る。<br/> いまんとここの2つを重宝してます😎 <span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20181023/20181023191202.png" alt="f:id:paranishian:20181023191202p:plain" title="f:id:paranishian:20181023191202p:plain" class="hatena-fotolife" itemprop="image"></span></p> <table> <thead> <tr> <th>目覚ましをセットする </th> <th> 嫁にLINE電話する</th> </tr> </thead> <tbody> <tr> <td><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20181023/20181023185520.jpg" alt="f:id:paranishian:20181023185520j:plain" title="f:id:paranishian:20181023185520j:plain" class="hatena-fotolife" itemprop="image"></span> </td> <td> <span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20181023/20181023185525.png" alt="f:id:paranishian:20181023185525p:plain" title="f:id:paranishian:20181023185525p:plain" class="hatena-fotolife" itemprop="image"></span></td> </tr> </tbody> </table> <p>LINE電話をショートカットに表示するには、まず一度LINEで電話すればショートカットAppに表示されるようになります👌</p> <p>もっといろいろ種類が出てくるとおもしろいなぁ〜。</p> <p>おしまい🤗</p> paranishian nginx.confを8万行削除した話 hatenablog://entry/10257846132650352858 2018-10-20T08:00:00+09:00 2019-12-28T22:59:36+09:00 強い気持ちでやりました😇 自分が関わる前からあったnginx.conf。 それはそれは大きく膨らんでおりました🐷 デプロイはchefで行っていたんですが、dry-runでも時間がかかりすぎて差分確認するのも一苦労、、という状態😢 少しでも快適な開発環境にすべく、やっていき!💪 TL;DR 大したことはやってなくて、アクセスログと照らし合わせて地道に削除していっただけなのであしからず🙇 削除の方針 nginx.confの中身を見ると、ほとんどがもはや機能しているかわからないリダイレクトのコードだったので、今回はそれらを削除していくことにしました。 今は使っていないURLでもどこかのブログやサイト… <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20181010/20181010192436.png" alt="f:id:paranishian:20181010192436p:plain" title="f:id:paranishian:20181010192436p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>強い気持ちでやりました😇</p> <p>自分が関わる前からあったnginx.conf。</p> <p>それはそれは大きく膨らんでおりました🐷</p> <p>デプロイはchefで行っていたんですが、dry-runでも時間がかかりすぎて差分確認するのも一苦労、、という状態😢</p> <p>少しでも快適な開発環境にすべく、やっていき!💪</p> <h2>TL;DR</h2> <p>大したことはやってなくて、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%AF%A5%BB%A5%B9%A5%ED%A5%B0">アクセスログ</a>と照らし合わせて地道に削除していっただけなのであしからず🙇</p> <h2>削除の方針</h2> <p>nginx.confの中身を見ると、ほとんどがもはや機能しているかわからないリダイレクトのコードだったので、今回はそれらを削除していくことにしました。</p> <p>今は使っていないURLでもどこかのブログやサイトで昔のURLが残っていることがあります 🤔💦</p> <p>ただ、そのURLをどこまで面倒見るの?って話で、今回はプロダクトオーナーと相談して、</p> <p>「直近3ヶ月でアクセス数がxxに満たない場合は<a class="keyword" href="http://d.hatena.ne.jp/keyword/SEO">SEO</a>的にも価値がないので削除する」</p> <p>という方針にしました。<br/> (特に意味はないけど一応数字を伏せておいた😇)</p> <h2><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%AF%A5%BB%A5%B9%A5%ED%A5%B0">アクセスログ</a>の保存と解析</h2> <p>サイトへのアクセスはすべてALBを経由してnginxに流れているので、ALBの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%AF%A5%BB%A5%B9%A5%ED%A5%B0">アクセスログ</a>を見ていきます。</p> <ul> <li>ALBの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%AF%A5%BB%A5%B9%A5%ED%A5%B0">アクセスログ</a>をS3に格納する</li> <li>S3の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%AF%A5%BB%A5%B9%A5%ED%A5%B0">アクセスログ</a>をAthenaと連携する</li> <li>Athenaから所定の期間のアクセスを取得する</li> </ul> <p>という流れで<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%AF%A5%BB%A5%B9%A5%ED%A5%B0">アクセスログ</a>データを取得します。</p> <h3>ALBの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%AF%A5%BB%A5%B9%A5%ED%A5%B0">アクセスログ</a>をS3に格納する</h3> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%AF%A5%BB%A5%B9%A5%ED%A5%B0">アクセスログ</a>のS3への格納作業自体はポチポチするだけで完了します👌<br/> <a href="https://docs.aws.amazon.com/ja_jp/elasticloadbalancing/latest/application/load-balancer-access-logs.html">Application Load Balancer のアクセスログ - Elastic Load Balancing</a></p> <p>(この作業を3ヶ月以上前にやってたので、現時点ですでにログデータがたまった状態です)</p> <h3>Athenaの連携とデータ取得</h3> <p>Athenaはこのへんのドキュメントとサイトを参考にしました👇</p> <ul> <li><a href="https://docs.aws.amazon.com/ja_jp/athena/latest/ug/language-reference.html">DDL ステートメント - Amazon Athena</a></li> <li><a href="https://docs.aws.amazon.com/ja_jp/athena/latest/ug/partitions.html">データのパーティション分割 - Amazon Athena</a></li> <li><a href="https://dev.classmethod.jp/cloud/amazon-athena-sql-for-elb/">Amazon AthenaでELBのログを調査するときに使ったSQL | Developers.IO</a></li> </ul> <p>では、さっそくテーブルを作成していきます。</p> <p>あらかじめ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D1%A1%BC%A5%C6%A5%A3%A5%B7%A5%E7%A5%F3">パーティション</a>(今回は<code>dt</code>にした)を設定して作成します。</p> <pre class="code lang-sql" data-lang="sql" data-unlink><span class="synStatement">CREATE</span> EXTERNAL <span class="synSpecial">TABLE</span> <span class="synSpecial">IF</span> <span class="synStatement">NOT</span> <span class="synStatement">EXISTS</span> alb_logs ( <span class="synSpecial">type</span> string, time string, elb string, client_ip string, client_port int, target_ip string, target_port int, request_processing_time double, target_processing_time double, response_processing_time double, elb_status_code string, target_status_code string, received_bytes bigint, sent_bytes bigint, request_verb string, request_url string, request_proto string, user_agent string, ssl_cipher string, ssl_protocol string, target_group_arn string, trace_id string, domain_name string, chosen_cert_arn string, matched_rule_priority string, request_creation_time string, actions_executed string, redirect_url string, new_field string ) PARTITIONED <span class="synSpecial">BY</span> (dt string) <span class="synSpecial">ROW</span> FORMAT SERDE <span class="synSpecial">'</span><span class="synConstant">org.apache.hadoop.hive.serde2.RegexSerDe</span><span class="synSpecial">'</span> <span class="synSpecial">WITH</span> SERDEPROPERTIES ( <span class="synSpecial">'</span><span class="synConstant">serialization.format</span><span class="synSpecial">'</span> = <span class="synSpecial">'</span><span class="synConstant">1</span><span class="synSpecial">'</span>, <span class="synSpecial">'</span><span class="synConstant">input.regex</span><span class="synSpecial">'</span> = <span class="synSpecial">'</span><span class="synConstant">([^ ]*) ([^ ]*) ([^ ]*) ([^ ]*):([0-9]*) ([^ ]*)[:-]([0-9]*) ([-.0-9]*) ([-.0-9]*) ([-.0-9]*) (|[-0-9]*) (-|[-0-9]*) ([-0-9]*) ([-0-9]*) \&quot;([^ ]*) ([^ ]*) (- |[^ ]*)\&quot; \&quot;([^\&quot;]*)\&quot; ([A-Z0-9-]+) ([A-Za-z0-9.-]*) ([^ ]*) \&quot;([^\&quot;]*)\&quot; \&quot;([^\&quot;]*)\&quot; \&quot;([^\&quot;]*)\&quot; ([-.0-9]*) ([^ ]*) \&quot;([^\&quot;]*)\&quot;($| \&quot;[^ ]*\&quot;)(.*)</span><span class="synSpecial">'</span>) LOCATION <span class="synSpecial">'</span><span class="synConstant">s3://&lt;your-alb-logs-directory&gt;/AWSLogs/&lt;ACCOUNT-ID&gt;/elasticloadbalancing/&lt;region&gt;</span><span class="synSpecial">'</span>; </pre> <p>(locationの&lt;>部分はよしなに変更してください。)</p> <p>Athenaでは各クエリでスキャンされるデータ量に基づいて課金されるので、対象を絞るために<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D1%A1%BC%A5%C6%A5%A3%A5%B7%A5%E7%A5%F3">パーティション</a>つくっておきます。<br/> 今回は直近3ヶ月のデータだけで十分だったので手動で<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D1%A1%BC%A5%C6%A5%A3%A5%B7%A5%E7%A5%F3">パーティション</a>を作りました。<br/> (なので<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D1%A1%BC%A5%C6%A5%A3%A5%B7%A5%E7%A5%F3">パーティション</a>の自動化も今回はしていません)</p> <pre class="code lang-sql" data-lang="sql" data-unlink><span class="synStatement">ALTER</span> <span class="synSpecial">TABLE</span> alb_logs <span class="synSpecial">ADD</span> PARTITION (dt=<span class="synSpecial">'</span><span class="synConstant">2018-07</span><span class="synSpecial">'</span>) LOCATION <span class="synSpecial">'</span><span class="synConstant">s3://&lt;your-alb-logs-directory&gt;/AWSLogs/&lt;ACCOUNT-ID&gt;/elasticloadbalancing/&lt;region&gt;/2018/07</span><span class="synSpecial">'</span> PARTITION (dt=<span class="synSpecial">'</span><span class="synConstant">2018-08</span><span class="synSpecial">'</span>) LOCATION <span class="synSpecial">'</span><span class="synConstant">s3://&lt;your-alb-logs-directory&gt;/AWSLogs/&lt;ACCOUNT-ID&gt;/elasticloadbalancing/&lt;region&gt;/2018/08</span><span class="synSpecial">'</span> PARTITION (dt=<span class="synSpecial">'</span><span class="synConstant">2018-09</span><span class="synSpecial">'</span>) LOCATION <span class="synSpecial">'</span><span class="synConstant">s3://&lt;your-alb-logs-directory&gt;/AWSLogs/&lt;ACCOUNT-ID&gt;/elasticloadbalancing/&lt;region&gt;/2018/09</span><span class="synSpecial">'</span> </pre> <h4><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D1%A1%BC%A5%C6%A5%A3%A5%B7%A5%E7%A5%F3">パーティション</a>の確認</h4> <pre class="code lang-sql" data-lang="sql" data-unlink>show partitions alb_logs </pre> <h4>リク<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%B9">エス</a>トの取得</h4> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D1%A1%BC%A5%C6%A5%A3%A5%B7%A5%E7%A5%F3">パーティション</a>を指定してデータ取得します。</p> <pre class="code lang-sql" data-lang="sql" data-unlink><span class="synStatement">SELECT</span> <span class="synIdentifier">count</span>(*) <span class="synSpecial">AS</span> request_count, request_url <span class="synSpecial">FROM</span> alb_logs <span class="synSpecial">WHERE</span> dt &gt;= <span class="synSpecial">'</span><span class="synConstant">2018-07</span><span class="synSpecial">'</span> <span class="synStatement">AND</span> dt &lt;= <span class="synSpecial">'</span><span class="synConstant">2018-09</span><span class="synSpecial">'</span> <span class="synSpecial">GROUP</span> <span class="synSpecial">BY</span> request_url <span class="synSpecial">ORDER</span> <span class="synSpecial">BY</span> request_count <span class="synSpecial">DESC</span> </pre> <p>結果ファイルを<a class="keyword" href="http://d.hatena.ne.jp/keyword/csv">csv</a>でダウンロードすると、以下のようなデータが確認できます。</p> <pre class="code csv" data-lang="csv" data-unlink>&#34;request_count&#34;,&#34;request_url&#34; &#34;12345&#34;,&#34;https://sample.com:443/path/to/hoge&#34; &#34;10000&#34;,&#34;https://sample.com:443/path/to/fuga&#34; &#34;8000&#34;,&#34;http://sample.com:80/path/to/piyo&#34; ...</pre> <p>あとは、<code>grep</code>や<code>sed</code>などのコマンドを駆使してリク<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%B9">エス</a>ト数を確認し、nginx.confと照らし合わせて削除していくだけです。(つらそう😇)</p> <p>例えば、ポート番号が邪魔なのでこんなことをしてパスだけ確認したりとか。</p> <pre class="code lang-sh" data-lang="sh" data-unlink><span class="synStatement">egrep</span> <span class="synStatement">'</span><span class="synConstant">:\d+\/path\/to\/</span><span class="synStatement">'</span> results.csv | <span class="synStatement">sed</span> <span class="synSpecial">-E</span> <span class="synStatement">&quot;</span><span class="synConstant">s/http.+:(443|80)</span><span class="synSpecial">\/</span><span class="synConstant">/</span><span class="synSpecial">\/</span><span class="synConstant">/g</span><span class="synStatement">&quot;</span> </pre> <p>今回はじめて<code>awk</code>や<code>sed</code>を使いましたが、まだまだ使いこなせてない感😪</p> <p>気の遠くなるような作業かと思いましたが、意外とトッ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D7%A5%EC%A5%D9">プレベ</a>ルで削除できるものが多かったのでなんとかなりました。<br/> (たとえば <code>/path/to/hoge</code>が<a class="keyword" href="http://d.hatena.ne.jp/keyword/grep">grep</a>で引っかからなかったら<code>/path/to/hoge/1</code>や<code>/path/to/hoge/2</code>など、配下のURLに関するコードも一気に削除できるよね、みたいな。)</p> <p>地道な削除作業が完了し、QAを経て無事リリースできました🎉</p> <p>リリース後は特に障害も起きず、chefでのデプロイもスムーズになったので頑張った甲斐がありました。よかった。</p> <p>幸せに開発するためには自分で環境を変えて行かなあかんのや!という強い気持ち。</p> <p>以上です🤗</p> paranishian 技術書典で買った「さわって学べる!iOSテスト駆動開発」を読んだのでその感想と3章の誤植の共有 hatenablog://entry/10257846132653074572 2018-10-16T14:46:30+09:00 2019-12-28T22:59:27+09:00 今年の技術書典ではboothでiOS中心に10冊ほど買いました。 今回読んだ本はこれ👇 shindyu.booth.pm swiftでテストを書いたことがなかったので、TDDを勉強するというよりは、その書き方や導入が把握できればいいかなー、と思って読んでみました。 結果、とてもわかりやすく体系的に学べたので無事テストを書いていけそうです。 これで1,000円とは、お買い得な世の中ですね🤗 TDDをやっていて一つ気になったのが、 「プロパティや関数名をまだ宣言してないのでコード補完が効かなくてつらい問題」 特にtableviewまわりはメソッド名長すぎてtypoがつらい😢 こういうのってどうして… <p>今年の技術書典ではboothで<a class="keyword" href="http://d.hatena.ne.jp/keyword/iOS">iOS</a>中心に10冊ほど買いました。</p> <p>今回読んだ本はこれ👇</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fshindyu.booth.pm%2Fitems%2F1040471" title="さわって学べる!iOSテスト駆動開発 - shindyu - BOOTH" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://shindyu.booth.pm/items/1040471">shindyu.booth.pm</a></cite></p> <p>swiftでテストを書いたことがなかったので、TDDを勉強するというよりは、その書き方や導入が把握できればいいかなー、と思って読んでみました。<br/> 結果、とてもわかりやすく体系的に学べたので無事テストを書いていけそうです。<br/> これで1,000円とは、お買い得な世の中ですね🤗</p> <p>TDDをやっていて一つ気になったのが、<br/> 「プロパティや関数名をまだ宣言してないのでコード補完が効かなくてつらい問題」<br/> 特にtableviewまわりはメソッド名長すぎて<a class="keyword" href="http://d.hatena.ne.jp/keyword/typo">typo</a>がつらい😢</p> <p>こういうのってどうしてんだろうなーと思って友人のエンジニアに聞いてみたら、</p> <blockquote><p>まずは「tableviewがあること」みたいなテストを書いてプロパティつくっていくかなー。 そのテストが通ってればtableviewのコード補完も効くしね。</p></blockquote> <p>と言われて、なるほど!!と思った💡</p> <h2>その他メモ</h2> <ul> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Dependency">Dependency</a> Injectionの中にはConstructor InjectionとSetter Injectionなるものがある</li> <li>初耳の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A1%BC%A5%AD%A5%C6%A5%AF%A5%C1%A5%E3">アーキテクチャ</a>があった <ul> <li>MVP, VIPER</li> </ul> </li> <li>既存アプリにTDDを導入する手順は参考になった <ul> <li>ビルド時間の計測 <ul> <li>BuildTimeAnalyzerはそのうち使ってみる</li> </ul> </li> <li>Carthageへの移行</li> <li>Embedded Frameworkの利用</li> <li>CIの導入 <ul> <li>CircleCIは経験済みなのでbitrise使ってみる</li> </ul> </li> </ul> </li> </ul> <h2>3章の誤植の共有</h2> <p>3章は実際にアプリをつくっていく流れだったので、理解のために写経しました。<br/> 途中でビルドやテストが通らなくて困ったので、「こうやったら進行できたよ」という共有です。<br/> 同じように写経する人の参考になれば😉</p> <hr /> <p>p.38 ファイル名が間違っている</p> <p><code>ArticleListViewControllerTests.swift</code> → <code>ArticleListViewController.swift</code></p> <p>p.39 宣言文が間違っていてテストが通らない</p> <pre class="code lang-swift" data-lang="swift" data-unlink><span class="synComment">// この部分を</span> <span class="synPreProc">let</span> <span class="synIdentifier">vc</span> ArticleListViewController() <span class="synComment">// こう書き換える</span> <span class="synPreProc">let</span> <span class="synIdentifier">article</span> <span class="synIdentifier">=</span> Article(title<span class="synSpecial">:</span> <span class="synConstant">&quot;記事タイトル&quot;</span>) <span class="synPreProc">let</span> <span class="synIdentifier">client</span> <span class="synIdentifier">=</span> FakeArticleListAPIClient(fakeResponse<span class="synSpecial">:</span> <span class="synPreProc">[article]</span>) <span class="synPreProc">let</span> <span class="synIdentifier">vc</span> <span class="synIdentifier">=</span> ArticleListViewController(client<span class="synSpecial">:</span> <span class="synType">client</span>) </pre> <p>p.41 itemsの初期化をしていないのでビルドが通らない</p> <pre class="code lang-swift" data-lang="swift" data-unlink><span class="synComment">// この部分を</span> <span class="synPreProc">var</span> <span class="synIdentifier">items</span><span class="synSpecial">:</span> <span class="synPreProc">[Article]</span> <span class="synComment">// こう書き換える</span> <span class="synPreProc">var</span> <span class="synIdentifier">items</span><span class="synSpecial">:</span> <span class="synPreProc">[Article]</span> <span class="synIdentifier">=</span> [] </pre> <p>p.42 tableviewにcellを登録してないので落ちる</p> <pre class="code lang-swift" data-lang="swift" data-unlink><span class="synComment">// この一行をviewDidLoadに追加する</span> tableView.register(ArticleListCell.<span class="synIdentifier">self</span>, forCellReuseIdentifier<span class="synSpecial">:</span> <span class="synConstant">&quot;ArticleListCell&quot;</span>) </pre> <p>p.45 moduleをimportしてないのでテストできない</p> <pre class="code lang-swift" data-lang="swift" data-unlink><span class="synComment">// ArticleListViewControllerTests.swiftに追加する</span> <span class="synPreProc">import</span> SafariServices </pre> <p>以上です。<br/> swiftやってくぞ!💪</p> paranishian nginx+wordpressのdocker環境を構築する hatenablog://entry/10257846132643037611 2018-10-01T12:59:57+09:00 2019-12-28T22:59:14+09:00 はじめに localにwordpressが動く環境がすでにあったのですが、メンバーの新規参入時など環境構築が大変だったのでdockerで環境を構築できるようにしました。 dockerはこの本を読んで勉強しました👇 プログラマのためのDocker教科書 インフラの基礎知識&コードによる環境構築の自動化作者:阿佐 志保出版社/メーカー: 翔泳社発売日: 2015/11/20メディア: 大型本 とおもったらもう第二版が出ていた😮 プログラマのためのDocker教科書 第2版 インフラの基礎知識&コードによる環境構築の自動化作者:WINGSプロジェクト 阿佐 志保出版社/メーカー: 翔泳社発売日: 2… <h2>はじめに</h2> <p>localに<a class="keyword" href="http://d.hatena.ne.jp/keyword/wordpress">wordpress</a>が動く環境がすでにあったのですが、メンバーの新規参入時など環境構築が大変だったのでdockerで環境を構築できるようにしました。</p> <p>dockerはこの本を読んで勉強しました👇 <div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/479814102X/pamazon-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/51G1TiUZprL._SL160_.jpg" class="hatena-asin-detail-image" alt="プログラマのためのDocker教科書 インフラの基礎知識&amp;コードによる環境構築の自動化" title="プログラマのためのDocker教科書 インフラの基礎知識&amp;コードによる環境構築の自動化"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/479814102X/pamazon-22/">プログラマのためのDocker教科書 インフラの基礎知識&amp;コードによる環境構築の自動化</a></p><ul><li><span class="hatena-asin-detail-label">作者:</span><a href="http://d.hatena.ne.jp/keyword/%B0%A4%BA%B4%20%BB%D6%CA%DD" class="keyword">阿佐 志保</a></li><li><span class="hatena-asin-detail-label">出版社/メーカー:</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%E6%C6%B1%CB%BC%D2">翔泳社</a></li><li><span class="hatena-asin-detail-label">発売日:</span> 2015/11/20</li><li><span class="hatena-asin-detail-label">メディア:</span> 大型本</li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>とおもったらもう第二版が出ていた😮 <div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/4798153222/pamazon-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/5130HDgosML._SL160_.jpg" class="hatena-asin-detail-image" alt="プログラマのためのDocker教科書 第2版 インフラの基礎知識&amp;コードによる環境構築の自動化" title="プログラマのためのDocker教科書 第2版 インフラの基礎知識&amp;コードによる環境構築の自動化"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/4798153222/pamazon-22/">プログラマのためのDocker教科書 第2版 インフラの基礎知識&amp;コードによる環境構築の自動化</a></p><ul><li><span class="hatena-asin-detail-label">作者:</span><a href="http://d.hatena.ne.jp/keyword/WINGS%A5%D7%A5%ED%A5%B8%A5%A7%A5%AF%A5%C8%20%B0%A4%BA%B4%20%BB%D6%CA%DD" class="keyword">WINGSプロジェクト 阿佐 志保</a></li><li><span class="hatena-asin-detail-label">出版社/メーカー:</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%E6%C6%B1%CB%BC%D2">翔泳社</a></li><li><span class="hatena-asin-detail-label">発売日:</span> 2018/04/11</li><li><span class="hatena-asin-detail-label">メディア:</span> 単行本(ソフトカバー)</li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>dockerで<a class="keyword" href="http://d.hatena.ne.jp/keyword/wordpress">wordpress</a>環境をつくるサンプルはたくさんあったのですが、一から<a class="keyword" href="http://d.hatena.ne.jp/keyword/wordpress">wordpress</a>をつくっていくものだったり<a class="keyword" href="http://d.hatena.ne.jp/keyword/apache">apache</a>前提だったりとちょっと要件が違う・・・🤔</p> <p>今回は「既存のnginx+<a class="keyword" href="http://d.hatena.ne.jp/keyword/wordpress">wordpress</a>環境をdockerで構築する」をやっていきます💪</p> <p>主にこの記事を参考にしました。とてもわかりやすかったです🙏<br/> <a href="https://tech.recruit-mp.co.jp/infrastructure/post-13086/">docker-compose で作る nginx + PHP-FPM7 + HTTP/2 に対応したモダンな WordPress 開発環境 – PSYENCE:MEDIA</a></p> <p>ってことでまとめます。</p> <h2>移行の方針</h2> <ul> <li>nginx, <a class="keyword" href="http://d.hatena.ne.jp/keyword/wordpress">wordpress</a>の動く環境をdockerで構築する <ul> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/apache">apache</a>が入っていないイメージを使う</li> </ul> </li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/mysql">mysql</a>はlocalで動いているものをそのまま使う <ul> <li>のちのち本番をdocker化するにしてもRDSを使うので問題ないはず🤔</li> </ul> </li> </ul> <h3><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%A3%A5%EC%A5%AF%A5%C8">ディレクト</a>リ構成</h3> <pre class="code" data-lang="" data-unlink>❯ tree . -L 2 . ├── docker-compose.yml ├── nginx │   └── default.conf └── my_wordpress ├── index.php ├── ...</pre> <h3>docker-compose.yml</h3> <p>読んだ本ではversion2の書き方でしたが、version3で書いてみました😉<br/> 記述がいろいろ省略されてたりしていたけどそんなに大変じゃなかった💪<br/> イメージのバージョンは既存の環境に合わせてるだけなので、最新を使えるなら最新を使ったほうがいいです👌<br/> <a class="keyword" href="http://d.hatena.ne.jp/keyword/wordpress">wordpress</a>のイメージはtagを指定して<a class="keyword" href="http://d.hatena.ne.jp/keyword/apache">apache</a>が入っていないものを使います。</p> <pre class="code yml:docker-compose.yml" data-lang="yml:docker-compose.yml" data-unlink>version: &#39;3&#39; services: nginx: image: nginx:1.15.3-alpine restart: always ports: - &#34;8082:80&#34; depends_on: - wordpress volumes: - ./nginx/default.conf:/etc/nginx/conf.d/default.conf - ./my_wordpress:/var/www/html wordpress: image: wordpress:4.9.8-php5.6-fpm-alpine restart: always volumes: - ./my_wordpress:/var/www/html</pre> <h3>nginx.conf</h3> <p><code>fastcgi_pass</code>にはdocker-compose.ymlに記述したservice名を指定します。(今回は<code>wordpress</code>)</p> <pre class="code conf:nginx/default.conf" data-lang="conf:nginx/default.conf" data-unlink>server { listen 80; server_name _; root /var/www/html; index index.php; access_log /var/log/nginx/access.log; error_log /var/log/nginx/error.log; location / { try_files $uri $uri/ /index.php$is_args$args; } location ~ \.php$ { fastcgi_split_path_info ^(.+\.php)(\.+)$; fastcgi_pass wordpress:9000; fastcgi_index index.php; include fastcgi_params; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; fastcgi_param PATH_INFO $fastcgi_path_info; } }</pre> <h3>いざdockerを起動</h3> <pre class="code lang-sh" data-lang="sh" data-unlink>$ docker-compose up <span class="synSpecial">-d</span> </pre> <p>で起動して、 <a href="http://localhost:8082">http://localhost:8082</a> で既存の<a class="keyword" href="http://d.hatena.ne.jp/keyword/wordpress">wordpress</a>ページが表示されればOK👍</p> <h2>おまけ</h2> <h3>よく使うコマンド</h3> <h4>コンテナを起動する</h4> <pre class="code lang-sh" data-lang="sh" data-unlink>$ docker-compose up <span class="synSpecial">-d</span> </pre> <h4>コンテナを停止する</h4> <pre class="code lang-sh" data-lang="sh" data-unlink>$ docker-compose <span class="synStatement">stop</span> </pre> <h4>コンテナを再起動する</h4> <pre class="code lang-sh" data-lang="sh" data-unlink>$ docker-compose <span class="synStatement">restart</span> </pre> <h4>logを見とく</h4> <pre class="code lang-sh" data-lang="sh" data-unlink>$ docker-compose logs <span class="synSpecial">-f</span> </pre> <h4>コンテナに入る</h4> <pre class="code lang-sh" data-lang="sh" data-unlink>$ docker <span class="synStatement">exec</span> <span class="synSpecial">-it</span> <span class="synSpecial">{</span>container_name<span class="synSpecial">}</span> sh </pre> <h4>dockerイメージの履歴を見る</h4> <pre class="code lang-sh" data-lang="sh" data-unlink>$ docker <span class="synStatement">history</span> <span class="synSpecial">{</span>image<span class="synSpecial">}</span> </pre> <p>今回、<a class="keyword" href="http://d.hatena.ne.jp/keyword/wordpress">wordpress</a>イメージの違いを見るために使いました。</p> <pre class="code lang-sh" data-lang="sh" data-unlink>❯ docker <span class="synStatement">history</span> wordpress IMAGE CREATED CREATED BY SIZE COMMENT 41e689eea0cd <span class="synConstant">3</span> weeks ago /bin/sh <span class="synSpecial">-c</span> <span class="synComment">#(nop) CMD [&quot;apache2-foreground&quot;] 0B</span> <span class="synStatement">&lt;</span>missing<span class="synStatement">&gt;</span> <span class="synConstant">3</span> weeks ago /bin/sh <span class="synSpecial">-c</span> <span class="synComment">#(nop) ENTRYPOINT [&quot;docker-entry… 0B</span> <span class="synStatement">&lt;</span>missing<span class="synStatement">&gt;</span> <span class="synConstant">3</span> weeks ago /bin/sh <span class="synSpecial">-c</span> <span class="synComment">#(nop) COPY file:40bd880f26da3ada… 7.62kB</span> <span class="synStatement">&lt;</span>missing<span class="synStatement">&gt;</span> <span class="synConstant">3</span> weeks ago /bin/sh <span class="synSpecial">-c</span> <span class="synStatement">set</span><span class="synIdentifier"> </span><span class="synSpecial">-ex</span>; curl <span class="synSpecial">-o</span> wordpress.tar.g… <span class="synConstant">27</span>.3MB <span class="synStatement">&lt;</span>missing<span class="synStatement">&gt;</span> <span class="synConstant">3</span> weeks ago /bin/sh <span class="synSpecial">-c</span> <span class="synComment">#(nop) ENV WORDPRESS_SHA1=0945ba… 0B</span> <span class="synStatement">&lt;</span>missing<span class="synStatement">&gt;</span> <span class="synConstant">3</span> weeks ago /bin/sh <span class="synSpecial">-c</span> <span class="synComment">#(nop) ENV WORDPRESS_VERSION=4.9… 0B</span> <span class="synStatement">&lt;</span>missing<span class="synStatement">&gt;</span> <span class="synConstant">3</span> weeks ago /bin/sh <span class="synSpecial">-c</span> <span class="synComment">#(nop) VOLUME [/var/www/html] 0B</span> <span class="synStatement">&lt;</span>missing<span class="synStatement">&gt;</span> <span class="synConstant">3</span> weeks ago /bin/sh <span class="synSpecial">-c</span> a2enmod rewrite expires 60B <span class="synStatement">&lt;</span>missing<span class="synStatement">&gt;</span> <span class="synConstant">3</span> weeks ago /bin/sh <span class="synSpecial">-c</span> <span class="synSpecial">{</span> <span class="synStatement">echo</span><span class="synConstant"> </span><span class="synStatement">'</span><span class="synConstant">opcache.memory_consumpt… 171B</span> <span class="synConstant">&lt;missing&gt; 3 weeks ago /bin/sh -c set -ex; savedAptMark=&quot;$(apt-ma… 3.5MB</span> <span class="synConstant">&lt;missing&gt; 5 weeks ago /bin/sh -c #(nop) CMD [&quot;apache2-foreground&quot;] 0B</span> <span class="synConstant">&lt;missing&gt; 5 weeks ago /bin/sh -c #(nop) EXPOSE 80/tcp 0B</span> <span class="synConstant">&lt;missing&gt; 5 weeks ago /bin/sh -c #(nop) WORKDIR /var/www/html 0B</span> <span class="synConstant">&lt;missing&gt; 5 weeks ago /bin/sh -c #(nop) COPY file:24613ecbb1ce6a09… 1.35kB</span> <span class="synConstant">&lt;missing&gt; 5 weeks ago /bin/sh -c #(nop) ENTRYPOINT [&quot;docker-php-e… 0B</span> <span class="synConstant">&lt;missing&gt; 5 weeks ago /bin/sh -c docker-php-ext-enable sodium 20B</span> <span class="synConstant">&lt;missing&gt; 5 weeks ago /bin/sh -c #(nop) COPY multi:c925dfb355ea16b… 6.44kB</span> <span class="synConstant">&lt;missing&gt; 5 weeks ago /bin/sh -c set -eux; savedAptMark=&quot;$(apt-m… 56.9MB</span> <span class="synConstant">&lt;missing&gt; 5 weeks ago /bin/sh -c #(nop) COPY file:207c686e3fed4f71… 587B</span> <span class="synConstant">&lt;missing&gt; 5 weeks ago /bin/sh -c set -xe; fetchDeps=</span><span class="synStatement">'</span><span class="synConstant"> wget </span><span class="synStatement">'</span><span class="synConstant">;… 13.4MB</span> <span class="synConstant">&lt;missing&gt; 5 weeks ago /bin/sh -c #(nop) ENV PHP_SHA256=3585c1222e… 0B</span> <span class="synConstant">&lt;missing&gt; 5 weeks ago /bin/sh -c #(nop) ENV PHP_URL=https://secur… 0B</span> <span class="synConstant">&lt;missing&gt; 5 weeks ago /bin/sh -c #(nop) ENV PHP_VERSION=7.2.9 0B</span> <span class="synConstant">&lt;missing&gt; 2 months ago /bin/sh -c #(nop) ENV GPG_KEYS=1729F83938DA… 0B</span> <span class="synConstant">&lt;missing&gt; 2 months ago /bin/sh -c #(nop) ENV PHP_LDFLAGS=-Wl,-O1 -… 0B</span> <span class="synConstant">&lt;missing&gt; 2 months ago /bin/sh -c #(nop) ENV PHP_CPPFLAGS=-fstack-… 0B</span> <span class="synConstant">&lt;missing&gt; 2 months ago /bin/sh -c #(nop) ENV PHP_CFLAGS=-fstack-pr… 0B</span> <span class="synConstant">&lt;missing&gt; 2 months ago /bin/sh -c #(nop) ENV PHP_EXTRA_CONFIGURE_A… 0B</span> <span class="synConstant">&lt;missing&gt; 2 months ago /bin/sh -c #(nop) ENV PHP_EXTRA_BUILD_DEPS=… 0B</span> <span class="synConstant">&lt;missing&gt; 2 months ago /bin/sh -c { echo </span><span class="synStatement">'&lt;</span>FilesMatch <span class="synSpecial">\.</span>php$<span class="synStatement">&gt;'</span><span class="synConstant">; … 237B</span> <span class="synConstant">&lt;missing&gt; 2 months ago /bin/sh -c set -ex &amp;&amp; . &quot;$APACHE_ENVVARS&quot; … 33B</span> <span class="synConstant">&lt;missing&gt; 2 months ago /bin/sh -c a2dismod mpm_event &amp;&amp; a2enmod mpm… 68B</span> <span class="synConstant">&lt;missing&gt; 2 months ago /bin/sh -c set -ex &amp;&amp; sed -ri </span><span class="synStatement">'</span>s/^<span class="synStatement">export</span><span class="synIdentifier"> (… 1.92kB</span> <span class="synStatement">&lt;</span>missing<span class="synStatement">&gt;</span> <span class="synConstant">2</span> months ago /bin/sh <span class="synSpecial">-c</span> <span class="synComment">#(nop) ENV APACHE_ENVVARS=/etc/a… 0B</span> <span class="synStatement">&lt;</span>missing<span class="synStatement">&gt;</span> <span class="synConstant">2</span> months ago /bin/sh <span class="synSpecial">-c</span> <span class="synComment">#(nop) ENV APACHE_CONFDIR=/etc/a… 0B</span> <span class="synStatement">&lt;</span>missing<span class="synStatement">&gt;</span> <span class="synConstant">2</span> months ago /bin/sh <span class="synSpecial">-c</span> apt-get update <span class="synStatement">&amp;&amp;</span> apt-get instal… <span class="synConstant">42</span>.3MB <span class="synStatement">&lt;</span>missing<span class="synStatement">&gt;</span> <span class="synConstant">2</span> months ago /bin/sh <span class="synSpecial">-c</span> <span class="synStatement">mkdir</span> <span class="synSpecial">-p</span> <span class="synPreProc">$PHP_INI_DIR</span>/conf.d 0B <span class="synStatement">&lt;</span>missing<span class="synStatement">&gt;</span> <span class="synConstant">2</span> months ago /bin/sh <span class="synSpecial">-c</span> <span class="synComment">#(nop) ENV PHP_INI_DIR=/usr/loca… 0B</span> <span class="synStatement">&lt;</span>missing<span class="synStatement">&gt;</span> <span class="synConstant">2</span> months ago /bin/sh <span class="synSpecial">-c</span> apt-get update <span class="synStatement">&amp;&amp;</span> apt-get install… 209MB <span class="synStatement">&lt;</span>missing<span class="synStatement">&gt;</span> <span class="synConstant">2</span> months ago /bin/sh <span class="synSpecial">-c</span> <span class="synComment">#(nop) ENV PHPIZE_DEPS=autoconf … 0B</span> <span class="synStatement">&lt;</span>missing<span class="synStatement">&gt;</span> <span class="synConstant">2</span> months ago /bin/sh <span class="synSpecial">-c</span> <span class="synStatement">set</span><span class="synIdentifier"> </span><span class="synSpecial">-eux</span><span class="synStatement">;</span> <span class="synSpecial">{</span> <span class="synStatement">echo</span><span class="synConstant"> </span><span class="synStatement">'</span><span class="synConstant">Package: php… 46B</span> <span class="synConstant">&lt;missing&gt; 2 months ago /bin/sh -c #(nop) CMD [&quot;bash&quot;] 0B</span> <span class="synConstant">&lt;missing&gt; 2 months ago /bin/sh -c #(nop) ADD file:919939fa022472751… 55.3MB</span> </pre> <p>あー、<a class="keyword" href="http://d.hatena.ne.jp/keyword/apache">apache</a>入ってるなー。🧐</p> <pre class="code lang-sh" data-lang="sh" data-unlink>❯ docker <span class="synStatement">history</span> wordpress:4.<span class="synConstant">9</span>.8-php5.6-fpm-alpine IMAGE CREATED CREATED BY SIZE COMMENT 7d3fe91e2ab2 <span class="synConstant">3</span> weeks ago /bin/sh <span class="synSpecial">-c</span> <span class="synComment">#(nop) CMD [&quot;php-fpm&quot;] 0B</span> <span class="synStatement">&lt;</span>missing<span class="synStatement">&gt;</span> <span class="synConstant">3</span> weeks ago /bin/sh <span class="synSpecial">-c</span> <span class="synComment">#(nop) ENTRYPOINT [&quot;docker-entry… 0B</span> <span class="synStatement">&lt;</span>missing<span class="synStatement">&gt;</span> <span class="synConstant">3</span> weeks ago /bin/sh <span class="synSpecial">-c</span> <span class="synComment">#(nop) COPY file:40bd880f26da3ada… 7.62kB</span> <span class="synStatement">&lt;</span>missing<span class="synStatement">&gt;</span> <span class="synConstant">3</span> weeks ago /bin/sh <span class="synSpecial">-c</span> <span class="synStatement">set</span><span class="synIdentifier"> </span><span class="synSpecial">-ex</span>; curl <span class="synSpecial">-o</span> wordpress.tar.g… <span class="synConstant">27</span>.3MB <span class="synStatement">&lt;</span>missing<span class="synStatement">&gt;</span> <span class="synConstant">3</span> weeks ago /bin/sh <span class="synSpecial">-c</span> <span class="synComment">#(nop) ENV WORDPRESS_SHA1=0945ba… 0B</span> <span class="synStatement">&lt;</span>missing<span class="synStatement">&gt;</span> <span class="synConstant">3</span> weeks ago /bin/sh <span class="synSpecial">-c</span> <span class="synComment">#(nop) ENV WORDPRESS_VERSION=4.9… 0B</span> <span class="synStatement">&lt;</span>missing<span class="synStatement">&gt;</span> <span class="synConstant">3</span> weeks ago /bin/sh <span class="synSpecial">-c</span> <span class="synComment">#(nop) VOLUME [/var/www/html] 0B</span> <span class="synStatement">&lt;</span>missing<span class="synStatement">&gt;</span> <span class="synConstant">3</span> weeks ago /bin/sh <span class="synSpecial">-c</span> <span class="synSpecial">{</span> <span class="synStatement">echo</span><span class="synConstant"> </span><span class="synStatement">'</span><span class="synConstant">opcache.memory_consumpt… 171B</span> <span class="synConstant">&lt;missing&gt; 3 weeks ago /bin/sh -c set -ex; apk add --no-cache --v… 3.52MB</span> <span class="synConstant">&lt;missing&gt; 3 weeks ago /bin/sh -c apk add --no-cache bash sed 1.5MB</span> <span class="synConstant">&lt;missing&gt; 3 weeks ago /bin/sh -c #(nop) CMD [&quot;php-fpm&quot;] 0B</span> <span class="synConstant">&lt;missing&gt; 3 weeks ago /bin/sh -c #(nop) EXPOSE 9000/tcp 0B</span> <span class="synConstant">&lt;missing&gt; 3 weeks ago /bin/sh -c set -ex &amp;&amp; cd /usr/local/etc &amp;&amp;… 23.4kB</span> <span class="synConstant">&lt;missing&gt; 3 weeks ago /bin/sh -c #(nop) WORKDIR /var/www/html 0B</span> <span class="synConstant">&lt;missing&gt; 3 weeks ago /bin/sh -c #(nop) ENTRYPOINT [&quot;docker-php-e… 0B</span> <span class="synConstant">&lt;missing&gt; 3 weeks ago /bin/sh -c #(nop) COPY multi:af8a06a5cfc82b1… 6.43kB</span> <span class="synConstant">&lt;missing&gt; 3 weeks ago /bin/sh -c set -xe &amp;&amp; apk add --no-cache --… 34.7MB</span> <span class="synConstant">&lt;missing&gt; 3 weeks ago /bin/sh -c #(nop) COPY file:207c686e3fed4f71… 587B</span> <span class="synConstant">&lt;missing&gt; 3 weeks ago /bin/sh -c set -xe; apk add --no-cache --v… 13.8MB</span> <span class="synConstant">&lt;missing&gt; 3 weeks ago /bin/sh -c #(nop) ENV PHP_SHA256=5000d82610… 0B</span> <span class="synConstant">&lt;missing&gt; 3 weeks ago /bin/sh -c #(nop) ENV PHP_URL=https://secur… 0B</span> <span class="synConstant">&lt;missing&gt; 3 weeks ago /bin/sh -c #(nop) ENV PHP_VERSION=5.6.37 0B</span> <span class="synConstant">&lt;missing&gt; 3 weeks ago /bin/sh -c #(nop) ENV GPG_KEYS=0BD78B5F9750… 0B</span> <span class="synConstant">&lt;missing&gt; 3 weeks ago /bin/sh -c #(nop) ENV PHP_LDFLAGS=-Wl,-O1 -… 0B</span> <span class="synConstant">&lt;missing&gt; 3 weeks ago /bin/sh -c #(nop) ENV PHP_CPPFLAGS=-fstack-… 0B</span> <span class="synConstant">&lt;missing&gt; 3 weeks ago /bin/sh -c #(nop) ENV PHP_CFLAGS=-fstack-pr… 0B</span> <span class="synConstant">&lt;missing&gt; 3 weeks ago /bin/sh -c #(nop) ENV PHP_EXTRA_CONFIGURE_A… 0B</span> <span class="synConstant">&lt;missing&gt; 3 weeks ago /bin/sh -c mkdir -p $PHP_INI_DIR/conf.d 0B</span> <span class="synConstant">&lt;missing&gt; 3 weeks ago /bin/sh -c #(nop) ENV PHP_INI_DIR=/usr/loca… 0B</span> <span class="synConstant">&lt;missing&gt; 3 weeks ago /bin/sh -c set -x &amp;&amp; addgroup -g 82 -S www-… 4.85kB</span> <span class="synConstant">&lt;missing&gt; 3 weeks ago /bin/sh -c apk add --no-cache --virtual .per… 2.69MB</span> <span class="synConstant">&lt;missing&gt; 3 weeks ago /bin/sh -c #(nop) ENV PHPIZE_DEPS=autoconf … 0B</span> <span class="synConstant">&lt;missing&gt; 2 months ago /bin/sh -c #(nop) CMD [&quot;/bin/sh&quot;] 0B</span> <span class="synConstant">&lt;missing&gt; 2 months ago /bin/sh -c #(nop) ADD file:25f61d70254b9807a… 4.41MB</span> </pre> <p>こっちは<a class="keyword" href="http://d.hatena.ne.jp/keyword/apache">apache</a>入ってない。採用!</p> <p>以上です🤗</p> paranishian 開発合宿@河口湖がすごく良かったというお話 hatenablog://entry/10257846132633827366 2018-09-18T09:00:15+09:00 2019-12-28T22:59:03+09:00 先日行った開発合宿@河口湖がすごく良かったのでブログに記録していきます。 文才がみじんこなのでそこは写真で補うスタイル🤗 今回はここにお邪魔しました。 www.c-ban.com 金曜夜から出発し、22時頃に河口湖カントリーコテージに到着。 まずは買い込んだお酒とボドゲを堪能し、夜更かし気味で就寝。 タイムボムおもしろい 翌朝からさっそく活動開始! 敷地内にあるカフェで朝飯(朝食セット:800円)を平らげ、 ポトフがうめぇ。。。 チェックアウトを済ませ、そのままカフェで開発スタート! カフェの貸し切りって普段はしてないらしいのですが、交渉の末?、開発合宿で利用できることになりました。 そういえ… <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20180915/20180915082219.jpg" alt="f:id:paranishian:20180915082219j:plain" title="f:id:paranishian:20180915082219j:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>先日行った開発合宿@河口湖がすごく良かったのでブログに記録していきます。</p> <p>文才がみじんこなのでそこは写真で補うスタイル🤗</p> <p>今回はここにお邪魔しました。</p> <p><iframe src="https://hatenablog-parts.com/embed?url=http%3A%2F%2Fwww.c-ban.com%2F" title="河口湖カントリーコテージBan【公式サイト】" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="http://www.c-ban.com/">www.c-ban.com</a></cite></p> <p>金曜夜から出発し、22時頃に河口湖カントリーコテージに到着。</p> <p>まずは買い込んだお酒と<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DC%A5%C9%A5%B2">ボドゲ</a>を堪能し、夜更かし気味で就寝。</p> <p><figure class="figure-image figure-image-fotolife" title="タイムボムおもしろい"><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20180915/20180915003750.jpg" alt="f:id:paranishian:20180915003750j:plain" title="f:id:paranishian:20180915003750j:plain" class="hatena-fotolife" itemprop="image"></span><figcaption>タイムボムおもしろい</figcaption></figure></p> <p>翌朝からさっそく活動開始!</p> <p>敷地内にあるカフェで朝飯(朝食セット:800円)を平らげ、</p> <p><figure class="figure-image figure-image-fotolife" title="ポトフがうめぇ。。。"><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20180915/20180915090647.jpg" alt="f:id:paranishian:20180915090647j:plain" title="f:id:paranishian:20180915090647j:plain" class="hatena-fotolife" itemprop="image"></span><figcaption>ポトフがうめぇ。。。</figcaption></figure></p> <p>チェックアウトを済ませ、そのままカフェで開発スタート!</p> <p>カフェの貸し切りって普段はしてないらしいのですが、交渉の末?、開発合宿で利用できることになりました。</p> <p>そういえば、施設の人に「今日はどういうことするの?」って聞かれて、 「世界を少しでも幸せにするもの作りに来ました」ってゆったらなんかハマってめっちゃ気に入られた。</p> <p>あと、<a class="keyword" href="http://d.hatena.ne.jp/keyword/spotify">spotify</a>でてきとーに音楽流してたら「まるで東京のカフェみたいだね」って嬉しそうに笑ってくれた。</p> <p>なにこの癒し空間、、、すてき。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20180915/20180915111431.jpg" alt="f:id:paranishian:20180915111431j:plain" title="f:id:paranishian:20180915111431j:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>カフェには<a class="keyword" href="http://d.hatena.ne.jp/keyword/WIFI">WIFI</a>も電源もあるのでどこで開発してもよし。</p> <p>あいにくのお天気やったけど、景色が最高。のどかすぎる。。こういうとこでずっと開発していたい。。</p> <p>開発メンバーみんな1週間くらいここでリモートしたいってずーっとゆってた。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20180915/20180915123322.jpg" alt="f:id:paranishian:20180915123322j:plain" title="f:id:paranishian:20180915123322j:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>ランチにはカレーが提供されたので、なんだか林間学校気分。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20180915/20180915123047.jpg" alt="f:id:paranishian:20180915123047j:plain" title="f:id:paranishian:20180915123047j:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>カレーのあとはオーバークックで遊んでリフレッシュ。 <span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20180915/20180915132014.jpg" alt="f:id:paranishian:20180915132014j:plain" title="f:id:paranishian:20180915132014j:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>このゲーム最高すぎやしませんかね。。 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fec.nintendo.com%2FJP%2Fja%2Ftitles%2F70010000000884" title="Nintendo Switch|ダウンロード購入|Overcooked® - オーバークック スペシャルエディション" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://ec.nintendo.com/JP/ja/titles/70010000000884">ec.nintendo.com</a></cite></p> <p>休憩はほどほどに、開発を再開し、あっというまに17時。</p> <p>そこから各々開発したものを発表していきました。</p> <p><figure class="figure-image figure-image-fotolife" title="Elixir + Phoenixでツール作ってみた"><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20180918/20180918093329.jpg" alt="f:id:paranishian:20180918093329j:plain" title="f:id:paranishian:20180918093329j:plain" class="hatena-fotolife" itemprop="image"></span><figcaption>Elixir + <a class="keyword" href="http://d.hatena.ne.jp/keyword/Phoenix">Phoenix</a>でツール作ってみた</figcaption></figure></p> <p><figure class="figure-image figure-image-fotolife" title="Reactでwebサービス作ってみた"><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20180915/20180915174437.jpg" alt="f:id:paranishian:20180915174437j:plain" title="f:id:paranishian:20180915174437j:plain" class="hatena-fotolife" itemprop="image"></span><figcaption>Reactで<a class="keyword" href="http://d.hatena.ne.jp/keyword/web%A5%B5%A1%BC%A5%D3%A5%B9">webサービス</a>作ってみた</figcaption></figure></p> <p><figure class="figure-image figure-image-fotolife" title="こ、、こいつは・・・!!"><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/paranishian/20180915/20180915171035.jpg" alt="f:id:paranishian:20180915171035j:plain" title="f:id:paranishian:20180915171035j:plain" class="hatena-fotolife" itemprop="image"></span><figcaption>こ、、こいつは・・・!!</figcaption></figure></p> <p>途中でデモが動かなくなって、みんなでモブプロみたいに解決したのもおもしろかった。</p> <p>僕は個人開発の塩漬けになりかけたものをswift + firebaseで復活させるべく奮闘しました。NoSQLにまだ慣れない/(^o^)\</p> <p>実はやりたいことがあるけど腰が重くてなかなか手が出せないでいる。。。みたいなものの背中を押してあげるのに、開発合宿ってちょうどいいなとおもった。</p> <p>こういうきっかけ作りに貢献できるの素敵やし、将来田舎に移住する予定なので、地方でなにかそういった活動ができたらいいなとふんわり思った。</p> <p>なにはともあれ、リリースするまでが勝負なのでこのまま勢いを落とさず頑張るゾイ!</p> <p>それでは👋</p> paranishian swiftを一から勉強してTODOアプリをつくるまでの過程 hatenablog://entry/10257846132611011545 2018-08-15T17:02:50+09:00 2019-12-28T22:58:51+09:00 仕事でしばらくwebで活動していたのですが、フリーランスになったことだし、アプリ開発をまた再開しようと思い、swiftを勉強してみることにしました。 また、今回swiftを勉強するにあたり、その過程もメモしていきました。 学習の過程って意外と忘れがちですよね 😪 最終成果物はgithubにおいてます 😃 paranishian/iOSToDoApp: iOS TODO app using Realm まずはswiftの言語仕様を理解する iOSアプリを開発していたのはObjective-C全盛期?の4年前くらいなので、swift自体初めて触るわけで、、、まずはswiftの言語仕様をおおまかに理… <p>仕事でしばらくwebで活動していたのですが、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D5%A5%EA%A1%BC%A5%E9%A5%F3%A5%B9">フリーランス</a>になったことだし、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%D7%A5%EA%B3%AB%C8%AF">アプリ開発</a>をまた再開しようと思い、swiftを勉強してみることにしました。</p> <p>また、今回swiftを勉強するにあたり、その過程もメモしていきました。<br/> 学習の過程って意外と忘れがちですよね 😪</p> <p>最終成果物は<a class="keyword" href="http://d.hatena.ne.jp/keyword/github">github</a>においてます 😃<br/> <a href="https://github.com/paranishian/iOSToDoApp">paranishian/iOSToDoApp: iOS TODO app using Realm</a></p> <h2>まずはswiftの言語仕様を理解する</h2> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/iOS">iOS</a>アプリを開発していたのは<a class="keyword" href="http://d.hatena.ne.jp/keyword/Objective-C">Objective-C</a>全盛期?の4年前くらいなので、swift自体初めて触るわけで、、、まずはswiftの言語仕様をおおまかに理解するために、公式docに目を通しました。</p> <ul> <li><a href="https://docs.swift.org/swift-book/GuidedTour/GuidedTour.html">A Swift Tour — The Swift Programming Language (Swift 4.2)</a></li> <li><a href="https://docs.swift.org/swift-book/LanguageGuide/TheBasics.html">The Basics — The Swift Programming Language (Swift 4.2)</a></li> </ul> <p>↓こちらはswift4には追いついていませんでしたが、英語での理解不足を補うために一緒に読みました。感謝 🙏</p> <ul> <li><a href="https://github.com/hatena/Hatena-Textbook/blob/master/swift-programming-language.md">Hatena-Textbook/swift-programming-language.md at master · hatena/Hatena-Textbook </a></li> <li><a href="https://github.com/mixi-inc/iOSTraining/blob/master/Swift/pages/day1/1-1_swift-basics.md">iOSTraining/1-1_swift-basics.md at master · mixi-inc/iOSTraining </a></li> </ul> <p>ちょっと手元で試してみたい、ってときはpaizaを使いました。web上で手軽に試せて便利 😆</p> <p><a href="https://paiza.io/ja">ブラウザでプログラミング・実行ができる「オンライン実行環境」| paiza.IO</a></p> <h3>ここで理解したこと</h3> <ul> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AF%A5%ED%A1%BC%A5%B8%A5%E3">クロージャ</a>ーの構文</li> <li>defer</li> <li>where</li> <li>try?</li> <li>??</li> <li>error handling</li> <li>tuple</li> <li>guard/else</li> <li>stride</li> </ul> <p>このときの印象は、、、「swiftめっちゃ引数わかりにくい...!!! 😇 」 どれがkey??どれが<a class="keyword" href="http://d.hatena.ne.jp/keyword/value">value</a>??どれが返却値??みたいな 🤣</p> <h2>TODOアプリをつくる</h2> <p>swiftの仕様はおおまかに理解できたので、なにかアプリをつくって学習するのが手っ取り早いなーと思い、仕様で迷うことが少なそうなTODOアプリを作ることにしました。<br/> データを扱う上で、CoreDataかRealmかで迷いましたが、「使ったことがなくて触ってみたかった」という理由でRealmを採用しました。</p> <h3>まずはRealmのリファレンス通りにつくっていく</h3> <p>ありがたいことにRealmにTODOアプリのdocがあったのでそこを見ながら進めました。</p> <ul> <li><a href="https://realm.io/docs/tutorials/realmtasks/">Building Your First Realm Platform iOS App</a></li> <li><a href="https://realm.io/jp/docs/tutorials/realmtasks/">初めてのRealm Mobile Platformアプリ開発</a></li> </ul> <h3>ライブラリ管理ツールを決める</h3> <p>CocoaPodsかCarthageか迷いましたが、ライブラリ数ではまだまだCocoaPodsが優勢、との話を友人から聞いたのでCocoaPodsにしました。</p> <ul> <li><a href="https://github.com/CocoaPods/CocoaPods">CocoaPods/CocoaPods: The Cocoa Dependency Manager.</a></li> <li><a href="https://github.com/Carthage/Carthage">Carthage/Carthage: A simple, decentralized dependency manager for Cocoa</a></li> </ul> <h3>ちょっとした変更と修正</h3> <p>Realmのdocではサーバ同期ありきで書かれているのですが、今回はローカルだけで使いたかったのでsetup部分を少し変更しました。<br/> また、ドキュメントどおりだとどうしてもうまくいかない部分があったのでゴニョゴニョしました。 (<code>if realm.objects(TaskList.self).count == 0</code>の部分)</p> <pre class="code lang-swift" data-lang="swift" data-unlink><span class="synPreProc">func</span> <span class="synIdentifier">setupRealm</span>() { <span class="synPreProc">let</span> <span class="synIdentifier">config</span> <span class="synIdentifier">=</span> Realm.Configuration(schemaVersion<span class="synSpecial">:</span> <span class="synConstant">1</span>) <span class="synIdentifier">self</span>.realm <span class="synIdentifier">=</span> try<span class="synIdentifier">!</span> Realm(configuration<span class="synSpecial">:</span> <span class="synType">config</span>) <span class="synPreProc">func</span> <span class="synIdentifier">updateList</span>() { <span class="synComment">// まだTaskListが存在しない場合は追加する</span> <span class="synStatement">if</span> realm.objects(TaskList.<span class="synIdentifier">self</span>).count <span class="synIdentifier">==</span> <span class="synConstant">0</span> { try<span class="synIdentifier">!</span> realm.write { realm.add(TaskList()) } } <span class="synStatement">if</span> <span class="synPreProc">let</span> <span class="synIdentifier">list</span> <span class="synIdentifier">=</span> realm.objects(TaskList.<span class="synIdentifier">self</span>).first { items <span class="synIdentifier">=</span> list.items } tableView.reloadData() } updateList() <span class="synComment">// Notify us when Realm changes</span> <span class="synIdentifier">self</span>.notificationToken <span class="synIdentifier">=</span> <span class="synIdentifier">self</span>.realm.observe { _,_ <span class="synStatement">in</span> updateList() } } </pre> <p>ってなかんじでTODOアプリが完成! 🎉<br/> (ほぼサンプルのままだけど)</p> <p><a href="https://github.com/paranishian/iOSToDoApp">paranishian/iOSToDoApp: iOS TODO app using Realm</a></p> <p>とりあえず動くものが完成したので、あとは</p> <ul> <li>TODOアプリに機能追加</li> <li>別のアプリつくる</li> <li>fastlaneでbuild自動化</li> </ul> <p>あたりかな〜。</p> <p>それではまた 👋</p> paranishian 開発用.devがhttpsに強制リダイレクトされて困った件 hatenablog://entry/8599973812325835772 2017-12-12T12:02:39+09:00 2019-12-28T23:00:51+09:00 pow使ってて開発してたら、急にSafariやChromeでhttpsに強制リダイレクトされるようになったので対応。 (Chromeはv63からこの仕様になったぽい) 対応 インストールし直せばOK。 (ver0.6.0から、トップレベルドメインが.devではなく.testがデフォルトになってる) Pow User's Manual Switch top-level domain from .dev to .test. Google owns .dev and enabled HSTS on it, breaking non-HTTPS sites. The .dev TLD is still… <p>pow使ってて開発してたら、急に<a class="keyword" href="http://d.hatena.ne.jp/keyword/Safari">Safari</a>や<a class="keyword" href="http://d.hatena.ne.jp/keyword/Chrome">Chrome</a>で<a class="keyword" href="http://d.hatena.ne.jp/keyword/https">https</a>に強制リダイレクトされるようになったので対応。 (<a class="keyword" href="http://d.hatena.ne.jp/keyword/Chrome">Chrome</a>はv63からこの仕様になったぽい)</p> <h3>対応</h3> <p>インストールし直せばOK。<br/> (ver0.6.0から、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C8%A5%C3%A5%D7%A5%EC%A5%D9%A5%EB%A5%C9%A5%E1%A5%A4%A5%F3">トップレベルドメイン</a>が<code>.dev</code>ではなく<code>.test</code>がデフォルトになってる)</p> <p><a href="http://pow.cx/manual.html#section_6">Pow User's Manual</a></p> <blockquote><p>Switch top-level domain from .dev to .test. <a class="keyword" href="http://d.hatena.ne.jp/keyword/Google">Google</a> owns .dev and enabled HSTS on it, breaking non-<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTTPS">HTTPS</a> sites. The .dev <a class="keyword" href="http://d.hatena.ne.jp/keyword/TLD">TLD</a> is still enabled for backward compatibility, but .test is the new default.</p></blockquote> <pre class="code lang-zsh" data-lang="zsh" data-unlink>$ curl get.pow.cx/uninstall.sh <span class="synStatement">|</span> sh $ curl get.pow.cx <span class="synStatement">|</span> sh </pre> <p>powder使ってる場合はコマンドでもOK。 (やってることは同じ)</p> <pre class="code lang-zsh" data-lang="zsh" data-unlink>$ powder uninstall $ powder install </pre> <h3>参考</h3> <ul> <li><a href="https://qiita.com/lara_bell/items/f7f3c5189530090229ed">Google Chromeで.devなどの開発DomainがHTTPSに変更される。 - Qiita</a></li> <li><a href="https://ma.ttias.be/chrome-force-dev-domains-https-via-preloaded-hsts/">Chrome to force .dev domains to HTTPS via preloaded HSTS</a></li> </ul> paranishian