2024-02-13T00:00:00Z
takanorip
1991-07-16T00:00:00Z
/posts/1991-07-16-init/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#sample">Sample</a></li></ul></details><p></p>
<p>こんにちは。Hello.</p>
<ul>
<li>Blog</li>
<li>作りました
<ul>
<li>code</li>
</ul>
</li>
</ul>
<p>これは<code>code</code>です</p>
<h2 id="sample" tabindex="-1">Sample</h2>
<pre class="language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">takanoripFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
2018-09-03T07:37:53Z
/posts/2018-09-03_GDG-DevFest-Tokyo-2018--------4b02e7203c1d/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#%E3%81%8D%E3%81%A3%E3%81%8B%E3%81%91">きっかけ</a></li><li><a href="#pwa%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E8%A9%B1%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F">PWAについて話しました</a></li><li><a href="#%E4%BB%8A%E5%BE%8C">今後</a></li></ul></details><p></p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*uCFlbsM8hk-x4-ycOcdTjQ.png" alt="" loading="lazy" /></p>
<p>9月1日に行われたGDG DevFest Tokyo 2018で登壇してPWAの話をしてきました。大きなカンファレンスでの登壇は初めてでとても緊張してましたが、無事に終わってほっとしています。僕に登壇の機会をくれた関係者のみなさん、聴きに来てくれた参加者の方々、ありがとうございました!</p>
<p>他にも普段あまり触らないFlutterとかGCPの面白い話をたくさん聞けてとても楽しかったです。</p>
<h2 id="%E3%81%8D%E3%81%A3%E3%81%8B%E3%81%91" tabindex="-1">きっかけ</h2>
<p>僕が所属しているPolymer JapanというコミュニティがDevFestのお手伝いをすることになっていて、そこから登壇の話をいただきました。Polymer Japanは規模小さいけどいい人ばかりで、このコミュニティにいて良かったなと思うことしかないくらいです。<strong>今度イベントやるのでよろしくお願いします!(イベントページ作成中)</strong></p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*hjyrIfHAuJyK0osoZSLzUA.png" alt="" loading="lazy" /></p>
<h2 id="pwa%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E8%A9%B1%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F" tabindex="-1">PWAについて話しました</h2>
<p>今回はPWAについて話しました。ウェブエンジニア以外の人も多いかなと思ったので、具体的なコードの解説とかはせずPWAの動向とかが中心の内容になっています。<br />
もうちょっと踏み込んだ話は今度どっかにまとめようかなと思います。(App-shellの話とかプッシュ通知の実装の話とか)</p>
<p><a href="https://slides.com/takanorip/pwa-now-and-future/fullscreen" title="https://slides.com/takanorip/pwa-now-and-future/fullscreen" target="_blank" rel="noopener noreferrer"><strong>PWA - Now and Future -</strong><br />
_A presentation created with Slides._slides.com</a><a href="https://slides.com/takanorip/pwa-now-and-future/fullscreen" target="_blank" rel="noopener noreferrer"></a></p>
<p>PWA Japanやりたいよねみたいなのを飲み会の席で話していたので、もしかしたらやるかもしれません笑。</p>
<h2 id="%E4%BB%8A%E5%BE%8C" tabindex="-1">今後</h2>
<p>11月にあるVue Fes Japan 2018にも登壇する予定なのでよろしくお願いします!</p>
2018-09-14T12:55:30Z
/posts/2018-09-14_-------------------883795468d2/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#%E3%82%84%E3%81%A3%E3%81%A6%E3%81%9F%E3%81%93%E3%81%A8">やってたこと</a></li><li><a href="#%E4%BB%8A%E5%BE%8C">今後</a></li><li><a href="#%E3%82%A6%E3%82%A3%E3%83%83%E3%82%B7%E3%83%A5%E3%83%AA%E3%82%B9%E3%83%88%E3%81%AF%E3%81%93%E3%81%A1%E3%82%89%E3%81%A7%E3%81%99%EF%BC%81%EF%BC%81%EF%BC%81">ウィッシュリストはこちらです!!!</a></li></ul></details><p></p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*lVo86uYtPGd-mNyflNiI0Q.png" alt="" loading="lazy" /></p>
<p>いわゆる退職エントリってやつです。書いてみたかったので書きます。</p>
<p>タイトルの通り、株式会社スマートドライブを退職します。9月14日最終出社、9月末で退職です。</p>
<h2 id="%E3%82%84%E3%81%A3%E3%81%A6%E3%81%9F%E3%81%93%E3%81%A8" tabindex="-1">やってたこと</h2>
<p>スマートドライブではこんな感じのことをやってました。</p>
<ul>
<li><a href="https://smartdrive-fleet.jp/" target="_blank" rel="noopener noreferrer">SmartDrive Fleet</a>のフロントエンド開発(React)</li>
<li><a href="https://www.smartdrive-cars.jp/" target="_blank" rel="noopener noreferrer">SmartDrive Cars</a>のフロントエンド開発(Nuxt.js/GraphQL)</li>
<li>コーポレートサイトまわりの運用(Wordpress/Netlify)</li>
</ul>
<p>サービス開発に初期の初期から関わったりGraphQL使ったりコーポレートサイトをNetlifyに突っ込んだり、本当にいろいろやらせてもらって、とても楽しかったし面白かったです。</p>
<p>フロントエンドエンジニアとして、とても成長できた1年だったなと思うと同時にスマートドライブの人々には本当に圧倒的に感謝しています。</p>
<h2 id="%E4%BB%8A%E5%BE%8C" tabindex="-1">今後</h2>
<p>次は10月からFOLIOで働きます。</p>
<p>2週間は有給消化期間なんですが、優雅にバカンスにいくわけでもなく、一人さみしく技術書典5に向けて本を書きます。今回は2冊+1冊改訂版という詰め詰めな感じなのでがんばります。</p>
<p>基本僕家にいるので、暇な人は遊びに来てください。</p>
<h2 id="%E3%82%A6%E3%82%A3%E3%83%83%E3%82%B7%E3%83%A5%E3%83%AA%E3%82%B9%E3%83%88%E3%81%AF%E3%81%93%E3%81%A1%E3%82%89%E3%81%A7%E3%81%99%EF%BC%81%EF%BC%81%EF%BC%81" tabindex="-1">ウィッシュリストはこちらです!!!</h2>
<p><a href="http://amzn.asia/8ArJUvd" target="_blank" rel="noopener noreferrer">http://amzn.asia/8ArJUvd</a></p>
2018-10-23T16:28:41Z
/posts/2018-10-23_------UI-----------b0115d43bd2c/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#ui%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%92%E9%81%BF%E3%81%91%E3%81%9F%E3%81%8F%E3%81%AA%E3%81%84">UIデザインを避けたくない</a></li><li><a href="#ui%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E4%BD%95%E3%81%AA%E3%81%AE%E3%81%8B%E3%82%8F%E3%81%8B%E3%82%89%E3%81%AA%E3%81%84%E5%95%8F%E9%A1%8C">UIデザイン何なのかわからない問題</a></li></ul></details><p></p>
<p>2018年10月8日に開催された技術書典5で「エンジニアのためのUIデザインブックス」という本を頒布しました。</p>
<p>これは、エンジニア3人で書いた本で、タイトルの通りエンジニア向けにUIデザインについてあこれ書いた本です。(中身が気になる人は買って読んでくれると嬉しいです。)</p>
<p><a href="https://inutetraplus.booth.pm/items/1043041" target="_blank" rel="noopener noreferrer">https://inutetraplus.booth.pm/items/1043041</a></p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*CgostBOPtrSOq_xiy09Aqw.jpeg" alt="" loading="lazy" /></p>
<p>僕は「エンジニアのためのUIデザイン概論」という章の執筆を担当しました。今回はなんで僕がこれを書きたいと思ったのかについて書きます。</p>
<h2 id="ui%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%92%E9%81%BF%E3%81%91%E3%81%9F%E3%81%8F%E3%81%AA%E3%81%84" tabindex="-1">UIデザインを避けたくない</h2>
<p>僕らWebエンジニアの仕事は「<strong>ユーザーインターフェースを作ること</strong>」です。これはバックエンドとかフロントエンドとか関係なくそうです。</p>
<p>なので僕は、ユーザーインターフェースを作っているエンジニアこそ、UIデザインについて理解する必要があるのではないかと思っています。</p>
<p>しかし、エンジニアの多くは「UIデザインがわからない」と言います。</p>
<p>自分の作っているものの良し悪しがわからないなんて、とても残念なことだと思うのです。</p>
<h2 id="ui%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E4%BD%95%E3%81%AA%E3%81%AE%E3%81%8B%E3%82%8F%E3%81%8B%E3%82%89%E3%81%AA%E3%81%84%E5%95%8F%E9%A1%8C" tabindex="-1">UIデザイン何なのかわからない問題</h2>
<p>UIデザインが避けられがちな理由の一つにUIデザイン何なのかわからないということがあると思います。</p>
<p>UIデザインという言葉はよく聞くけど、実際なんなのかわからない。なのでますますわからない。</p>
<p>そこで、UIデザインとは何かを整理し、良し悪しを判断する基準をまとめれば、少しはこの心理的障壁を取り除けるんじゃないかと思い、この本を書きました。</p>
<p>UIデザインの中に含まれているものを整理し、判断基準を理解し、論理的にその基準に照らし合わせて考えることが重要なのです。</p>
<p>何事も基準を知ることが、理解への第一歩だと思っています。</p>
<p>ということでこの本買ってくれたら泣いて喜ぶのでよろしくお願いします。この本の売上で叙々苑行くのが夢です。</p>
<p><a href="https://inutetraplus.booth.pm/items/1043041" target="_blank" rel="noopener noreferrer">https://inutetraplus.booth.pm/items/1043041</a></p>
2018-12-02T05:12:55Z
/posts/2018-12-02_---------------2128f49fb04f/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#1.-%E8%A1%A8%E7%8F%BE%E3%81%AE%E5%B9%85%E3%81%8C%E5%BA%83%E3%81%8C%E3%82%8B">1. 表現の幅が広がる</a></li><li><a href="#2.-%E8%A1%A8%E7%A4%BA%E3%82%92%E7%B5%B1%E4%B8%80%E3%81%A7%E3%81%8D%E3%82%8B">2. 表示を統一できる</a></li><li><a href="#3.-%E6%A5%BD%E3%81%97%E3%81%84">3. 楽しい</a></li><li><a href="#%E6%9C%80%E5%BE%8C%E3%81%AB">最後に</a></li></ul></details><p></p>
<p>これは <a href="https://adventar.org/calendars/2911" target="_blank" rel="noopener noreferrer">ウェブフォント Advent Calendar 2018</a> 1日目の記事です。全然埋まってなので誰か書いてください。</p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*hXCAjMlBmMZwWgU7DRavhA.png" alt="" loading="lazy" /></p>
<h2 id="1.-%E8%A1%A8%E7%8F%BE%E3%81%AE%E5%B9%85%E3%81%8C%E5%BA%83%E3%81%8C%E3%82%8B" tabindex="-1">1. 表現の幅が広がる</h2>
<p>当たり前の話ではありますが、ウェブフォントを使うとウェブサイト全体の表現の幅を大きく広げることができます。</p>
<p>なぜなら、Webの世界は<strong>文字</strong>を中心に構築されているからです。</p>
<p>文字には意味があって、フォントはそれを味付けする調味料のようなものです。</p>
<p>力強い言葉も丸くて可愛いフォントにすると語気が弱まるし、何気ない一言でも特徴的なフォントと組み合わさることで強い意味をもつこともあります。</p>
<p>そのため、フォントの選定は非常に重要だし、デザイナーの人もそのウェブサイトに最適なフォントを使いたいと思ってるはずです。</p>
<p>それをエンジニア都合で諦めるべきではないと思います。</p>
<p>たしかにウェブフォントには様々な制約がありますが、どれも技術で解決できるもので、エンジニアの怠慢によって文字の持つ可能性を潰してしまうことは本当にもったいないと思います。</p>
<h2 id="2.-%E8%A1%A8%E7%A4%BA%E3%82%92%E7%B5%B1%E4%B8%80%E3%81%A7%E3%81%8D%E3%82%8B" tabindex="-1">2. 表示を統一できる</h2>
<p>ウェブフォントを使わない場合、ブラウザに表示されるフォントはデバイスに依存していました。</p>
<p>そのため、同じウェブサイトでも利用者によって違うフォントが表示され、字幅や行間が違うために崩れが生じてしまったり、こちらが意図していない印象を与えてしまうなどの問題がありました。</p>
<p>そしてそのような問題の発生を抑えるために font-family の指定を工夫したり文字画像を使用したりしていました。</p>
<p>ウェブフォントを使えば、そういった工夫をしなくても表示を統一できます。誰がどのタイミングで見ても同じフォントで同じように表示されるのです。</p>
<h2 id="3.-%E6%A5%BD%E3%81%97%E3%81%84" tabindex="-1">3. 楽しい</h2>
<p>これはとても主観的な理由なんですが、ウェブフォントを使うとWebがもっと楽しくなると僕は思っています。</p>
<p>ちょっと話変わりますが、僕はフォントが大好きで、フリーフォントを収集したりフォント買ったりしてます。LTするときのスライドのフォントも毎回考えていて、そのLTの雰囲気に合うフォント選びたいなと思っています。</p>
<p>フォントはとても奥深くて、同じ文字でもフォントが違うと全然印象が違ってくるし、少しの違いでも沢山あつまると全然違って見えて、いろんな発見や驚きがあります。</p>
<p>そういった楽しさをWebでは気軽に感じることができないのが残念だなと思っていました。</p>
<p>しかしウェブフォントを使うことでその楽しさを誰もが気軽に感じることができるようになったのがとても嬉しいです。</p>
<h2 id="%E6%9C%80%E5%BE%8C%E3%81%AB" tabindex="-1">最後に</h2>
<p>ウェブフォントを良い感じに使うためにいろいろまとめた本を書いたので、よかったら買って読んでみてください!</p>
<p><a href="http://amzn.asia/d/e3DFuMr" title="http://amzn.asia/d/e3DFuMr" target="_blank" rel="noopener noreferrer"><strong>誰でもつかえる!ウェブフォント実践マニュアル (技術書典シリーズ(NextPublishing))</strong><br />
_Amazonで大木 尊紀の{ProductTitle}。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただけます。_amzn.asia</a><a href="http://amzn.asia/d/e3DFuMr" target="_blank" rel="noopener noreferrer"></a></p>
2018-12-03T11:47:26Z
/posts/2018-12-03_Seeking-Side-jobs-7c6537a174fc/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#%E3%83%97%E3%83%AD%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB">プロフィール</a></li><li><a href="#%E5%8B%9F%E9%9B%86%E3%81%97%E3%81%9F%E3%81%84%E4%BB%95%E4%BA%8B">募集したい仕事</a></li><li><a href="#%E6%9D%A1%E4%BB%B6">条件</a></li><li><a href="#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A0%85">注意事項</a></li></ul></details><p></p>
<p>来年2月くらいから副業再開しようかなと思うので、面白そうなお仕事を探しています。</p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*NsD7ULCXtQdyeGbT1Rew5A.png" alt="" loading="lazy" /></p>
<h3 id="%E3%83%97%E3%83%AD%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB" tabindex="-1">プロフィール</h3>
<p>都内でフロントエンドエンジニアとして働いています。普段は React を使用してコンシューマー向けウェブアプリケーションを開発しています。</p>
<p>フォント・ウェブフォントが好きです。</p>
<p>得意な領域は、デザインを意識した実装・設計です。たぶん。</p>
<p>ポートフォリオサイトを作っているので、よかったらご覧ください。</p>
<p><a href="https://takanorip.com" title="https://takanorip.com" target="_blank" rel="noopener noreferrer"><strong>Takanori Oki</strong><br />
_Portfolio - Takanori Oki_takanorip.com</a><a href="https://takanorip.com" target="_blank" rel="noopener noreferrer"></a></p>
<h3 id="%E5%8B%9F%E9%9B%86%E3%81%97%E3%81%9F%E3%81%84%E4%BB%95%E4%BA%8B" tabindex="-1">募集したい仕事</h3>
<ul>
<li>Vue.js / Nuxt.js を使用したウェブアプリケーション開発</li>
<li>Web Components を使用したウェブアプリケーション開発</li>
<li><strong>ウェブフォントに関する仕事(ウェブフォント関連の調査、コンサルティング、実装改善など)</strong></li>
</ul>
<p>本業やその他登壇などとの兼ね合いにより、あまり長い時間副業に割くことができないため、具体的な機能開発よりも実装改善やレビュー、技術相談などが良いかなと考えています。</p>
<p>コミットの方法や関わり方などは相談させてください。</p>
<h3 id="%E6%9D%A1%E4%BB%B6" tabindex="-1">条件</h3>
<ul>
<li>稼働できる時間:8〜16時間 / 週</li>
<li>時給:応相談</li>
<li>開始時期:2019年2月初旬</li>
</ul>
<p>単発の案件も募集していますが、長期間携わることのできるお仕事だと嬉しいです。</p>
<h3 id="%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A0%85" tabindex="-1">注意事項</h3>
<ul>
<li>あくまでも副業なのでコミットできる時間は多くありません。そのため、締切が短い案件やボリュームの大きい案件はお引受けできない場合があります。</li>
<li>ミーティングはオンラインかつ平日夜間でお願いしたいです。出社は基本的にできません。(平日夜間ならたまに可能です。)</li>
</ul>
<p>お仕事のご相談は <a href="https://twitter.com/takanoripe" target="_blank" rel="noopener noreferrer"><strong>Twitter</strong></a> のDMでお願いします。</p>
<p>よろしくお願いいたします。</p>
2018-12-03T14:09:23Z
/posts/2018-12-03_My-last-favorite-d4a545647cb4/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#basi-%2F-%E6%84%9B%E3%81%AE%E3%81%BE%E3%81%BE%E3%81%AB-feat.%E5%94%BE%E5%A5%87">BASI / 愛のままに feat.唾奇</a></li></ul></details><p></p>
<p>お気に入りの曲って忘れちゃうなと思ったのでメモしとく。</p>
<h3 id="basi-%2F-%E6%84%9B%E3%81%AE%E3%81%BE%E3%81%BE%E3%81%AB-feat.%E5%94%BE%E5%A5%87" tabindex="-1">BASI / 愛のままに feat.唾奇</h3>
<p>イントロ最高。BASIの曲はリズムと音が詰め込まれてない感じが好き。歌詞も良い。</p>
<p><a href="https://www.youtube.com/embed/3hPI3xjsNKE?feature=oembed" target="_blank" rel="noopener noreferrer">https://www.youtube.com/embed/3hPI3xjsNKE?feature=oembed</a></p>
<h2 id="suchmos-%2F-funny-gold" tabindex="-1">Suchmos / FUNNY GOLD</h2>
<p>Suchmosの曲はどれもおしゃれでかっこいいけど、これはちょっとエロティックでいい感じ。</p>
<p><a href="https://www.youtube.com/embed/EVG-RuaqIXY?feature=oembed" target="_blank" rel="noopener noreferrer">https://www.youtube.com/embed/EVG-RuaqIXY?feature=oembed</a></p>
<h2 id="bim-%2F-buddy-feat.-punpee" tabindex="-1">BIM / BUDDY feat. PUNPEE</h2>
<p>サビのこの歌詞の部分が特に好き。</p>
<blockquote>
<p>君はミーハーな上にお喋り<br />
また僕は隣で置き去り<br />
だけどそんなもん慣れっこでお決まり<br />
君は僕のBUDDY</p>
</blockquote>
<p><a href="https://www.youtube.com/embed/b3_ax_7_3JQ?feature=oembed" target="_blank" rel="noopener noreferrer">https://www.youtube.com/embed/b3_ax_7_3JQ?feature=oembed</a></p>
<h3 id="%E3%82%B5%E3%82%AB%E3%83%8A%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3-%2F-mellow" tabindex="-1">サカナクション / mellow</h3>
<blockquote>
<p>クラップ鳴って踊る<br />
土曜のダンスホールは<br />
まるでスローモーションだった<br />
まるで君は夜の海月</p>
</blockquote>
<p>ってとこが最高。</p>
<p><a href="https://open.spotify.com/embed/track/1otmfAjzGbgs4Vye4qbdNc" target="_blank" rel="noopener noreferrer">https://open.spotify.com/embed/track/1otmfAjzGbgs4Vye4qbdNc</a></p>
2018-12-03T15:01:00Z
/posts/2018-12-03_Font-Loading-API-----5a739af3c281/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#%E4%BD%BF%E3%81%84%E6%96%B9">使い方</a></li><li><a href="#%E8%A3%9C%E8%B6%B3">補足</a></li></ul></details><p></p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*G-RrNppUi7a2aWGlkRliog.png" alt="" loading="lazy" /></p>
<p>これは<a href="https://adventar.org/calendars/2911" target="_blank" rel="noopener noreferrer">ウェブフォントアドベントカレンダー</a> 4日目の記事です。</p>
<p>これを使えば、ウェブフォントの読み込みを JavaScript から制御することができます。</p>
<p>CSS の font-face を定義し操作すること、それらのロード状況を追跡すること、デフォルトの遅延読み込み動作をオーバーライドすることが可能です。</p>
<p>IE と Microsoft Edge 以外のブラウザで動作します。</p>
<p><a href="https://caniuse.com/#feat=font-loading" title="https://caniuse.com/#feat=font-loading" target="_blank" rel="noopener noreferrer"><strong>Can I use... Support tables for HTML5, CSS3, etc</strong><br />
_"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile…_caniuse.com</a><a href="https://caniuse.com/#feat=font-loading" target="_blank" rel="noopener noreferrer"></a></p>
<h3 id="%E4%BD%BF%E3%81%84%E6%96%B9" tabindex="-1">使い方</h3>
<p><a href="https://gist.github.com/takanorip/2e895488820caff942fc83a555e9acc3" target="_blank" rel="noopener noreferrer">https://gist.github.com/takanorip/2e895488820caff942fc83a555e9acc3</a></p>
<p><a href="https://codepen.io/takanorip/embed/preview/JezmVZ?height=600&slug-hash=JezmVZ&default-tabs=js,result&host=https://codepen.io" target="_blank" rel="noopener noreferrer">https://codepen.io/takanorip/embed/preview/JezmVZ?height=600&slug-hash=JezmVZ&default-tabs=js,result&host=https://codepen.io</a></p>
<h3 id="%E8%A3%9C%E8%B6%B3" tabindex="-1">補足</h3>
<p>Abobe Fonts はこの API の Polyfill である <a href="https://github.com/typekit/webfontloader" target="_blank" rel="noopener noreferrer">webfontloader</a> を使用しています。</p>
<p>Google Fonts はユニコードサブセットをしており、ユニコードごとにダウンロードするフォントファイルが決まっています。<br />
そのため、この API を使用して制御することは難しいかもしれないです。</p>
<p>その他のウェブフォント配信サービスはダイナミックサブセッティングを採用しているので、この API や webfontloader を使用して制御するのは難しいと思います。<br />
サービスによっては制御用のAPIを公開しているのでそちらを利用するのが良いと思います。(例:Typesquare)</p>
<p><a href="https://typesquare.com/service/api_reference" title="https://typesquare.com/service/api_reference" target="_blank" rel="noopener noreferrer"><strong>API References | TypeSquare</strong><br />
_URL tag options enable you to change actions during loading a web font by adding parameters to typesquare.js which is a…_typesquare.com</a><a href="https://typesquare.com/service/api_reference" target="_blank" rel="noopener noreferrer"></a></p>
2018-12-04T13:52:12Z
/posts/2018-12-04_---JavaScript-----------647b2425d450/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul></ul></details><p></p>
<p>という話を <a href="https://twitter.com/better_than_i_w" target="_blank" rel="noopener noreferrer">JSおじさん</a> と最近した。</p>
<p>JSおじさんいわく、</p>
<blockquote>
<p>「技術のことを書くならブログやQiitaで十分で、わざわざ紙の本にする必要はない。紙に印刷するなら紙でしかできないことをやりたい。」</p>
</blockquote>
<p>ということらしい。(間違っていたらごめんなさい。)</p>
<p>僕も同人誌を何冊か書いているけどそれはそのとおりだと思う。</p>
<p>そもそも紙の本だと内容のアップデートしづらいし、コードとか読みにくいし、サンプルを触ってもらうのも容易ではないので、わざわざ紙にする必要はない。</p>
<p>なので、わざわざ紙に印刷するのだから、紙でしかできないレイアウトやデザイン、情報の伝え方をしよう!ってことになった気がする。</p>
<p>同人誌っていうより同人雑誌、ボリュームはそんなに多くなくて(A4サイズで4ページとかそんなもん)、月イチでJavaScriptに関することを書く。</p>
<p>有名な人呼んで対談しても面白そうだし、その月のトレンドをまとめたりしても良い。</p>
<p>どうせ作るなら、代官山にある蔦屋書店に並んでもおかしくないくらいおしゃれでイケてるやつ作りたくて、深夜におじさん二人で蔦屋書店に行き、雑誌やペーパーをいろいろ見て、あれがいいこれがいいとか言い合った。めちゃ楽しかった。</p>
<p>この盛り上がりを忘れてしまうのはもったいないと思ったので、メモ程度にここに記しつつ、具体的に動いていけたらいいなって思ってる。</p>
<p>あと2人でやってくのはちょっと厳しいので、一緒にやってくれる書き手とかデザイナーとかも探してる。</p>
<p>興味がある人いたらTwitterにDMください。</p>
2018-12-05T00:17:09Z
/posts/2018-12-05_--------------------3-------8f2b5d6bdced/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#1.-%E3%82%B5%E3%83%96%E3%82%BB%E3%83%83%E3%83%88%E5%8C%96%E3%81%97%E3%81%A6%E3%81%AA%E3%81%84">1. サブセット化してない</a></li><li><a href="#2.-woff2%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%AA%E3%81%84">2. woff2を使ってない</a></li><li><a href="#3.-preload-%E3%81%97%E3%81%A6%E3%81%AA%E3%81%84">3. preload してない</a></li><li><a href="#%E3%81%95%E3%81%84%E3%81%94%E3%81%AB">さいごに</a></li></ul></details><p></p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*cDMyKLd2XR0_ZVmooqV4DQ.png" alt="" loading="lazy" /></p>
<p>これは <a href="https://adventar.org/calendars/2911" target="_blank" rel="noopener noreferrer">ウェブフォントアドベントカレンダー</a> 5日目の記事です。</p>
<p>「ウェブフォントは重いから良くない」みたいな意見が散見されますが、それは使い方を誤っているだけのことがほとんどです。</p>
<p>正しい使い方をすればそこまで重く感じることはないでしょう。(それでもたしかに日本語フォントは重いですが。)</p>
<p>ウェブフォントが重いな、と感じたら次の3つのポイントを重点的にチェックしましょう。</p>
<h2 id="1.-%E3%82%B5%E3%83%96%E3%82%BB%E3%83%83%E3%83%88%E5%8C%96%E3%81%97%E3%81%A6%E3%81%AA%E3%81%84" tabindex="-1">1. サブセット化してない</h2>
<p>ウェブフォント使うときはきちんとサブセット化しましょう。これで大きくファイルサイズを減らすことができます。</p>
<p>サブセット化とは、もとのフォントファイルからよく使う文字だけ抜き出して新しいフォントファイルを作ることを指します。</p>
<p>技術ブログとかであれば**「ひらがな+かたかな+記号+第一水準漢字」**でサブセット化しておけば大丈夫だと思います。</p>
<p><a href="https://www.npmjs.com/package/subfont" target="_blank" rel="noopener noreferrer">subfont</a> というライブラリを使ってページを解析してサブセット化することもできます。紹介記事書きます。</p>
<h2 id="2.-woff2%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%AA%E3%81%84" tabindex="-1">2. woff2を使ってない</h2>
<p>ウェブフォントとして使うフォントファイルは <strong>woff2</strong> 形式に変換して使いましょう。</p>
<p><a href="https://www.w3.org/TR/WOFF20ER/" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/WOFF20ER/</a></p>
<p>もともとwoff形式のフォントがウェブフォントとして使われていましたが、woff2はwoffよりも10%〜30%もファイルサイズを小さくすることができます。</p>
<p>残念ながらIEではwoff2がサポートされていないので、もしIEでもウェブフォントを使用する必要があればwoff形式のフォントも用意する必要があります。</p>
<p>拡張子の話はどこかで詳しく書きます。</p>
<h2 id="3.-preload-%E3%81%97%E3%81%A6%E3%81%AA%E3%81%84" tabindex="-1">3. preload してない</h2>
<p>ウェブフォントが遅く感じる理由の一つに、フォントファイルのロード開始が遅いということがあります。</p>
<p>ウェブフォントはリソースのパスがCSSファイルに書かれているため、そのCSSファイルが読み込まれてからロードが開始されます。</p>
<p>フォントのダウンロード中はテキストの表示がブロックされたりブラウザデフォルトのフォントが表示されたりするので、ちらつきが生じフォントのロードが遅く感じるのです。</p>
<p>preload を使えばHTMLをパースした段階でコンテンツを先読みすることができるので、CSSファイルの読み込みを待たずにフォントをダウンロードすることができます。</p>
<p><a href="https://gist.github.com/takanorip/957e64cf597a5b6b5fa11b6d94150357" target="_blank" rel="noopener noreferrer">https://gist.github.com/takanorip/957e64cf597a5b6b5fa11b6d94150357</a></p>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content" target="_blank" rel="noopener noreferrer"><strong>Preloading content with rel="preload"</strong><br />
_The preload value of the link element's rel attribute allows you to write declarative fetch requests in your HTML head…_developer.mozilla.org</a><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content" target="_blank" rel="noopener noreferrer"></a></p>
<h2 id="%E3%81%95%E3%81%84%E3%81%94%E3%81%AB" tabindex="-1">さいごに</h2>
<p>この本に詳しく載ってるらしいですよ。</p>
<p><a href="https://www.amazon.co.jp/dp/4844398385" title="https://www.amazon.co.jp/dp/4844398385" target="_blank" rel="noopener noreferrer"><strong>誰でもつかえる! ウェブフォント実践マニュアル (技術書典シリーズ(NextPublishing))</strong><br />
_Amazonで大木 尊紀の誰でもつかえる! ウェブフォント実践マニュアル (技術書典シリーズ(NextPublishing))。アマゾンならポイント還元本が多数。大木 尊紀作品ほか、お急ぎ便対象商品は当日お届けも可能。また誰でもつかえる…_www.amazon.co.jp</a><a href="https://www.amazon.co.jp/dp/4844398385" target="_blank" rel="noopener noreferrer"></a></p>
2018-12-06T09:23:40Z
/posts/2018-12-06_--------------507e2f378a1c/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#%E3%82%A6%E3%82%A7%E3%83%96%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%81%AE%E6%89%B1%E3%81%84">ウェブフォントの扱い</a></li><li><a href="#%E3%82%A6%E3%82%A7%E3%83%96%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%81%A8%E3%81%97%E3%81%A6%E5%88%A9%E7%94%A8%E5%8F%AF%E8%83%BD%E3%81%AA%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9">ウェブフォントとして利用可能なライセンス</a><ul><li><a href="#sil-open-font-license%EF%BC%88ofl%EF%BC%89">SIL Open Font License(OFL)</a></li><li><a href="#apache-license-2.0">Apache License 2.0</a></li><li><a href="#m%2B-font-license">M+ FONT LICENSE</a></li><li><a href="#%E3%81%9D%E3%81%AE%E4%BB%96%E3%81%AE%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9">その他のライセンス</a></li><li><a href="#%E3%83%91%E3%83%96%E3%83%AA%E3%83%83%E3%82%AF%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3">パブリックドメイン</a></li></ul></li><li><a href="#%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%83%AA%E3%82%B9%E3%83%88">ライセンスチェックリスト</a></li><li><a href="#%E8%A3%9C%E8%B6%B3%EF%BC%9Aipa%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9v1.0%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">補足:IPAフォントライセンスv1.0について</a></li></ul></details><p></p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*va6rAOwdUe1bCsxYnbpEOQ.png" alt="" loading="lazy" /></p>
<p>これは <a href="https://adventar.org/calendars/2911" target="_blank" rel="noopener noreferrer">ウェブフォントアドベントカレンダー</a> 6日目の記事です。</p>
<p>今日はライセンスの話を書きます。</p>
<p>ウェブフォントを利用する上で注意しなければならないのが<strong>フォントのライセンス</strong>です。</p>
<p>フォントのライセンスは意外とめんどくさく、「フリーフォントだけどウェブフォントとしての利用はNG」みたいなこともざらにあります。</p>
<p>したがって、フォントをウェブフォント利用する前にライセンスについてしっかり確認しておく必要があります。</p>
<h2 id="%E3%82%A6%E3%82%A7%E3%83%96%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%81%AE%E6%89%B1%E3%81%84" tabindex="-1">ウェブフォントの扱い</h2>
<p>フォントをウェブフォントとして利用することは**「フォントの再配布」**にあたります。</p>
<p>ウェブフォントを利用することは<strong>フォントファイルをインターネットに公開するのと同じ</strong>なので、制作者側から見ると再配布と変わりません。</p>
<p>さらに、フォントをサブセット化したり圧縮形式を変えたりすると**「フォントの改変」**にあたる可能性もあります。</p>
<p>この2点がライセンスで認められていなければウェブフォントとして利用することができません。</p>
<h2 id="%E3%82%A6%E3%82%A7%E3%83%96%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%81%A8%E3%81%97%E3%81%A6%E5%88%A9%E7%94%A8%E5%8F%AF%E8%83%BD%E3%81%AA%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9" tabindex="-1">ウェブフォントとして利用可能なライセンス</h2>
<p>次の3つのライセンスのいずれかが適用されていればウェブフォントとして利用できます。</p>
<ul>
<li><a href="https://ja.osdn.net/projects/opensource/wiki/SIL_Open_Font_License_1.1" target="_blank" rel="noopener noreferrer">SIL Open Font License(OFL)</a></li>
<li><a href="https://osdn.jp/projects/opensource/wiki/licenses%2FApache_License_2.0" target="_blank" rel="noopener noreferrer">Apache License 2.0</a></li>
<li><a href="http://mplus-fonts.osdn.jp/about.html#license" target="_blank" rel="noopener noreferrer">M+ FONT LICENSE</a></li>
</ul>
<h3 id="sil-open-font-license%EF%BC%88ofl%EF%BC%89" tabindex="-1">SIL Open Font License(OFL)</h3>
<p>SILインターナショナルによって制定されたオープンソースライセンスです。</p>
<p>ライセンスを明示すれば、改変や再配布など自由に利用できます。</p>
<p><strong>フォント単体での販売はできません。</strong></p>
<blockquote>
<p>OFLは、ライセンスを付与されたフォントの使用、研究、改変、再配布を、それ自体を販売しない限り自由に行うことを許可します。フォント(派生的著作物を含む)は、予約済みの名称を派生的著作物で使用していない限り、任意のソフトウェアとバンドル、埋め込み、再配布および販売が行えます。ただしフォントおよび派生物を別の種類のライセンスに基づいてリリースすることはできません。フォントをこのライセンスに基づいた状態に保つという要件は、フォントまたはその派生物を使って作成されたいかなるドキュメントにも適用されません。</p>
</blockquote>
<p>明示するには次のようなコメントをCSSに書きます。</p>
<p><a href="https://gist.github.com/takanorip/bde9fb60fb810fd7c9ada29688a0a484" target="_blank" rel="noopener noreferrer">https://gist.github.com/takanorip/bde9fb60fb810fd7c9ada29688a0a484</a></p>
<h3 id="apache-license-2.0" tabindex="-1">Apache License 2.0</h3>
<p>Apacheソフトウェア財団(ASF)によって制定されたソフトウェア向けオープンソースライセンスです。</p>
<p>これはウェブフォントに限らずさまざまななソフトウェアに適用されます。</p>
<p>OFL同様、ライセンスを明示すれば改変や再配布など自由に利用できます。</p>
<p><a href="https://gist.github.com/takanorip/7ad1b05f731063b49e6838c5cf7e4431" target="_blank" rel="noopener noreferrer">https://gist.github.com/takanorip/7ad1b05f731063b49e6838c5cf7e4431</a></p>
<h3 id="m%2B-font-license" tabindex="-1">M+ FONT LICENSE</h3>
<p>フリーフォントであるM+ FONTの独自ライセンスで、無料でどんな用途でも使用することができます。</p>
<p>ライセンスの明示も必要ありません。</p>
<h3 id="%E3%81%9D%E3%81%AE%E4%BB%96%E3%81%AE%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9" tabindex="-1">その他のライセンス</h3>
<p>各フォント独自のライセンスを設定、適用している場合もあります。</p>
<p>ウェブサイトなどに詳しく記載があることがほとんどだと思いますが、不明な点がある場合は作者の方に直接問い合わせてみると良いでしょう。</p>
<h3 id="%E3%83%91%E3%83%96%E3%83%AA%E3%83%83%E3%82%AF%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3" tabindex="-1">パブリックドメイン</h3>
<p>パブリックドメインとは**「著作権や商標権などが消滅したもの、または放棄されたもの」**を指す言葉です。</p>
<p>制作者によって著作権の放棄が宣言された場合などがこれに該当します。</p>
<p>「誰の所有物でもない」状態なので、個人利用・商用利用にかかわらず無償で利用することができ、あらゆる用途に利用できます。</p>
<h2 id="%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%83%AA%E3%82%B9%E3%83%88" tabindex="-1">ライセンスチェックリスト</h2>
<ul>
<li>「フォントの再配布」が認められているか</li>
<li>「フォントの改変」が認められているか</li>
<li>(表記が必要な場合)ライセンスをきちんと表記しているか?</li>
<li>不明な点がある場合は、必ず作者やライセンスを管理している組織に問い合わせる</li>
</ul>
<h2 id="%E8%A3%9C%E8%B6%B3%EF%BC%9Aipa%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9v1.0%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" tabindex="-1">補足:IPAフォントライセンスv1.0について</h2>
<p><a href="https://ipafont.ipa.go.jp/ipa_font_license_v1-html" target="_blank" rel="noopener noreferrer"><strong>IPAフォントライセンスv1.0</strong></a>はIPA(独立行政法人 情報処理推進機構)が公開しているIPAフォントのために制定されたオープンソースライセンスです。</p>
<p><strong>このライセンスについて、「ウェブフォントとして使用可能である」と書いている記事がインターネット上に存在しますが、それは完全に誤りです。</strong></p>
<p><strong>このライセンスが適用されているフォントはウェブフォントとして利用できません。</strong></p>
<p>IPAに問い合わせたところ、次のような回答をいただいたので記載しておきます。</p>
<blockquote>
<p>IPAフォント(IPAexフォントおよびIPAフォントVer.3)のご使用にあたっては、IPAフォントライセンスv1.0に同意いただく必要があります。</p>
</blockquote>
<blockquote>
<p>ウェブフォントとして利用についてですが、IPAフォントからツール等で文字を抜き出す、または変換してWebフォントを作成した場合は、「派生プログラム」の作成となります。</p>
</blockquote>
<blockquote>
<p>「派生プログラム」の再配布につきましては、FAQ「3.3 派生プログラムの再配布条件に記載の 3.3.1 ~ 3.3.5 のすべてを満たしていただく必要があります。幣機構では、Webフォントは上記条件を満たさないと考えております。</p>
</blockquote>
<blockquote>
<p>IPAフォントの利用については、FAQにおいて事例を示させて頂いておりますので、こちらを参考にして頂ければ幸いです。</p>
</blockquote>
<blockquote>
<p>IPAフォントのご使用に関しましてご判断が困難な場合は、IPAフォントライセンスv1.0とご使用ケースとの整合性を専門の弁護士にご相談いただくことをおすすめいたします。</p>
</blockquote>
<blockquote>
<p>なお、弊機構ではIPAフォントライセンス第3条4項に明記していますとおり、IPAフォントに関するユーザ・サポートやライセンス面等を含む個別のご相談などはお受けしておりません。</p>
</blockquote>
<blockquote>
<p>何卒ご了承のほどよろしくお願い致します。</p>
</blockquote>
<p><strong>これに限らず、ライセンスについてよく理解できないときは、制作者や管理している会社・団体などに必ず問い合わせましょう。</strong></p>
2018-12-10T03:28:07Z
/posts/2018-12-10_Apollo-Client---SSR----bb67cd13e88a/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#apollo-client">Apollo Client</a></li><li><a href="#server-side-rendering-with-apollo">Server-side rendering with Apollo</a></li><li><a href="#store-rehydration">Store rehydration</a></li><li><a href="#server-side-rendering">Server-side rendering</a></li><li><a href="#rendering">Rendering</a><ul><li><a href="#getdatafromtree()">getDataFromTree()</a></li><li><a href="#rendertostringwithdata()">renderToStringWithData()</a></li><li><a href="#skipping-queries-for-ssr">Skipping queries for SSR</a></li></ul></li><li><a href="#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB">おわりに</a></li></ul></details><p></p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*gbQLv0JIO_8MPeaBrxBHKw.png" alt="" loading="lazy" /></p>
<p>これは FOLIO Advent Calendar 2018 10日目の記事です。</p>
<p><a href="https://adventar.org/calendars/3424" title="https://adventar.org/calendars/3424" target="_blank" rel="noopener noreferrer"><strong>FOLIO Advent Calendar 2018 - Adventar</strong><br />
_株式会社FOLIOのメンバーによるアドベントカレンダーです! FOLIO Advent Calendar 2017: https://qiita.com/advent-calendar/2017/folio-sec…_adventar.org</a><a href="https://adventar.org/calendars/3424" target="_blank" rel="noopener noreferrer"></a></p>
<h2 id="apollo-client" tabindex="-1">Apollo Client</h2>
<p>GraphQLサーバーと通信するためのクライアントサイドライブラリです。</p>
<p><a href="https://www.apollographql.com/docs/react/" title="https://www.apollographql.com/docs/react/" target="_blank" rel="noopener noreferrer"><strong>Introduction | Apollo Client</strong><br />
_What is Apollo Client and what does it do?_www.apollographql.com</a><a href="https://www.apollographql.com/docs/react/" target="_blank" rel="noopener noreferrer"></a></p>
<p>GraphQLって何?って人は公式ドキュメントとかを読むと良いと思います。</p>
<p><a href="https://graphql.org/learn/" title="https://graphql.org/learn/" target="_blank" rel="noopener noreferrer"><strong>GraphQL: A query language for APIs.</strong><br />
_GraphQL provides a complete description of the data in your API, gives clients the power to ask for exactly what they…_graphql.org</a><a href="https://graphql.org/learn/" target="_blank" rel="noopener noreferrer"></a></p>
<p><a href="https://qiita.com/bananaumai/items/3eb77a67102f53e8a1ad" title="https://qiita.com/bananaumai/items/3eb77a67102f53e8a1ad" target="_blank" rel="noopener noreferrer"><strong>GraphQL入門 - 使いたくなるGraphQL - Qiita</strong><br />
_本記事は Livesense Advent Calendar 2016 - Qiita の24日目の記事になります。…_qiita.com</a><a href="https://qiita.com/bananaumai/items/3eb77a67102f53e8a1ad" target="_blank" rel="noopener noreferrer"></a></p>
<p>ReactでApollo Client( <a href="https://www.apollographql.com/docs/react/" target="_blank" rel="noopener noreferrer">react-apollo</a> )を使用すると次のように書けます。</p>
<p><a href="https://gist.github.com/takanorip/bb70f000929203be23dd961ad8890f5d" target="_blank" rel="noopener noreferrer">https://gist.github.com/takanorip/bb70f000929203be23dd961ad8890f5d</a></p>
<h2 id="server-side-rendering-with-apollo" tabindex="-1">Server-side rendering with Apollo</h2>
<p>Apollo Client を使用してSSR するにはサーバー側で次の2つの処理を行います。これはReduxを使用してSSRするときとおおよそ同じです。</p>
<ul>
<li>サーバーサイドでAPIにアクセスしStoreを共有する</li>
<li>サーバーサイドでHTMLを生成する</li>
</ul>
<h2 id="store-rehydration" tabindex="-1">Store rehydration</h2>
<p>サーバーサイドでクエリを実行できるアプリケーションの場合、データの初期状態を設定できます。</p>
<p>次のようなscriptタグを記述することでサーバー側で定義した初期状態をクライアントサイドで受け取ることができます。</p>
<p><a href="https://gist.github.com/takanorip/eaace8d840183b16bf02a3ff25c02336" target="_blank" rel="noopener noreferrer">https://gist.github.com/takanorip/eaace8d840183b16bf02a3ff25c02336</a></p>
<p>それをInMemoryCacheに渡します。</p>
<p><a href="https://gist.github.com/takanorip/8400eccd4c3185c93049c5e85a1c84f7" target="_blank" rel="noopener noreferrer">https://gist.github.com/takanorip/8400eccd4c3185c93049c5e85a1c84f7</a></p>
<p>クライアントサイドでUIがレンダリングされたときにはすでにデータがストアに格納されているため、即座にデータを表示することができます。</p>
<h2 id="server-side-rendering" tabindex="-1">Server-side rendering</h2>
<p><strong>react-apollo</strong> に組み込まれたレンダリング関数を使用して、アプリケーション全体をレンダリングします。これらの関数は、コンポーネントツリーをレンダリングするために必要なすべてのクエリを取得してくれます。通常はExpressなどのHTTPサーバー内でこれらの機能を使用します。</p>
<p>Apollo ClientでSSRする際は次の2つのことに注意する必要があります。</p>
<ol>
<li>各クエリの結果を一度だけ取得したいので、<strong>ssrMode:true</strong>オプションをApollo Clientコンストラクタに渡して <strong>force-fetching</strong> が繰り返されるのを避けます。</li>
<li>複数のリクエストに対してリクエストごとに新しいクライアントまたはStoreインスタンスを作成する必要があります。<br />
そうしないと古いデータが残ってしまい、認証に問題が発生する可能性があります。</li>
</ol>
<p><a href="https://gist.github.com/takanorip/4db791390672accb5eb0770a22635334" target="_blank" rel="noopener noreferrer">https://gist.github.com/takanorip/4db791390672accb5eb0770a22635334</a></p>
<h2 id="rendering" tabindex="-1">Rendering</h2>
<p><strong>react-apollo</strong> には2つのレンダリング関数が用意されています。</p>
<h3 id="getdatafromtree()" tabindex="-1">getDataFromTree()</h3>
<p>この関数はReactツリーをレンダリングするために必要なクエリを決定し、それらをすべて実行します。ネストされたクエリがある場合は、ツリー全体を再帰的に実行します。</p>
<p>この関数はPromiseを返し、データの取得とStoreの準備が完了したときにそのPromiseが解決されます。そしてPromise が解決される時に Store が完全に初期化されます。</p>
<p><a href="https://gist.github.com/takanorip/dc1a2cbc771c3a2ed617407ebb1eceac" target="_blank" rel="noopener noreferrer">https://gist.github.com/takanorip/dc1a2cbc771c3a2ed617407ebb1eceac</a></p>
<p>この <Html> コンポーネントの中身は次のようになります。</Html></p>
<p><a href="https://gist.github.com/takanorip/cceb5bf9c03a3452696a6300d7debed2" target="_blank" rel="noopener noreferrer">https://gist.github.com/takanorip/cceb5bf9c03a3452696a6300d7debed2</a></p>
<h3 id="rendertostringwithdata()" tabindex="-1"><code>renderToStringWithData()</code></h3>
<p>これは <strong>getDataFromTree 関数</strong>を単純化し、レンダリングする必要のあるコンテンツを文字列で返します。</p>
<p><a href="https://gist.github.com/takanorip/30d4bbf4f5f59b7b3fc45c72cbd13205" target="_blank" rel="noopener noreferrer">https://gist.github.com/takanorip/30d4bbf4f5f59b7b3fc45c72cbd13205</a></p>
<h3 id="skipping-queries-for-ssr" tabindex="-1">Skipping queries for SSR</h3>
<p>SSR中に意図的にQueryをスキップしたい場合は、オプションに <strong>ssr:false</strong> を渡すことができます。</p>
<p><a href="https://gist.github.com/takanorip/533dad8e6ccf44e3c21aed86214a6283" target="_blank" rel="noopener noreferrer">https://gist.github.com/takanorip/533dad8e6ccf44e3c21aed86214a6283</a></p>
<h2 id="%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" tabindex="-1">おわりに</h2>
<p>FOLIOでもBFFにGraphQLを採用するかどうか検討中なのですが、StoreのrehydrationがReduxよりも簡潔にかけるのは良いなと思いました。</p>
<p>このあたりは個人でも試していきたいです。</p>
<p>明日は <a href="https://adventar.org/users/19752" target="_blank" rel="noopener noreferrer">sion_cojp</a> さんの記事です。</p>
2018-12-12T03:28:42Z
/posts/2018-12-12_lit-apollo-------3e21a2f123fd/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#%E4%BD%BF%E3%81%84%E6%96%B9">使い方</a></li><li><a href="#%E6%84%9F%E6%83%B3">感想</a></li></ul></details><p></p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*y0sQjGDYlQ2rjhKn8mEm7w.png" alt="" loading="lazy" /></p>
<p>これは Web Components Advent Calendar 2018 12日目の記事です。</p>
<p><a href="https://qiita.com/advent-calendar/2018/web-components" title="https://qiita.com/advent-calendar/2018/web-components" target="_blank" rel="noopener noreferrer"><strong>Web Components Advent Calendar 2018 - Qiita</strong><br />
_Web ComponentsやPolymer、lit-html、LitElementに関することまでなんでも大歓迎!_qiita.com</a><a href="https://qiita.com/advent-calendar/2018/web-components" target="_blank" rel="noopener noreferrer"></a></p>
<p>タイトルのまんま、lit-html用のApollo Clientがあったのでさわってみた。</p>
<p>動くデモはこちら。CodeSandboxは良い。</p>
<p><a href="https://codesandbox.io/embed/jn4xjqo0jw" target="_blank" rel="noopener noreferrer">https://codesandbox.io/embed/jn4xjqo0jw</a></p>
<h2 id="%E4%BD%BF%E3%81%84%E6%96%B9" tabindex="-1">使い方</h2>
<p>基本的な使い方はreact-apolloとかと一緒。</p>
<p>Linkを設定してCache初期化してApollo Clientを呼び出す。</p>
<p><a href="https://gist.github.com/takanorip/a7b62d7b4903cdf80ce627aa816f0c61" target="_blank" rel="noopener noreferrer">https://gist.github.com/takanorip/a7b62d7b4903cdf80ce627aa816f0c61</a></p>
<h2 id="%E6%84%9F%E6%83%B3" tabindex="-1">感想</h2>
<ul>
<li>ApolloQueryクラスはLitElementクラスを継承してる。</li>
<li>中ではLitElementをApolloElementMixinに食わせてて、多重継承っぽい。このへんちょっと微妙かなーと思った。</li>
<li>デフォルトではリアクティブじゃないので、そのへんちょっと使いにくいかも。</li>
<li>通常のLitElementと書き味がけっこう異なるので難しそう。</li>
<li>Reduxとかと接続したいときどうしよう?</li>
<li>TSで書かれてるのは良い</li>
</ul>
<p>これからぼちぼち触っていきたい。</p>
2018-12-12T18:10:50Z
/posts/2018-12-12_Figma-----616b226691ce/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%A7%E5%8B%95%E3%81%8F">ブラウザで動く</a><ul><li><a href="#%E6%A9%9F%E8%83%BD">機能</a></li><li><a href="#%E3%81%99%E3%81%B9%E3%81%A6%E3%82%AA%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3">すべてオンライン</a></li><li><a href="#%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88">フォント</a></li><li><a href="#%E5%85%B1%E6%9C%89">共有</a></li></ul></li><li><a href="#%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%92%E8%A4%87%E6%95%B0%E4%BA%BA%E3%81%A7%E5%90%8C%E6%99%82%E3%81%AB%E7%B7%A8%E9%9B%86%E3%81%A7%E3%81%8D%E3%82%8B">デザインを複数人で同時に編集できる</a></li><li><a href="#%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88">コメント</a></li><li><a href="#%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0%E3%83%84%E3%83%BC%E3%83%AB%E3%81%A8%E3%81%97%E3%81%A6%E4%BD%BF%E3%81%88%E3%82%8B">プロトタイピングツールとして使える</a></li><li><a href="#%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E7%AE%A1%E7%90%86%E6%A9%9F%E8%83%BD%E3%81%8C%E3%81%82%E3%82%8B">バージョン管理機能がある</a></li><li><a href="#%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E7%AE%A1%E7%90%86%E3%81%8C%E3%81%A7%E3%81%8D%E3%82%8B">コンポーネント管理ができる</a></li><li><a href="#%E7%B7%A8%E9%9B%86%E6%A8%A9%E9%99%90%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%A7%E3%81%8D%E3%82%8B">編集権限を設定できる</a></li><li><a href="#figma-mirror-app">Figma Mirror App</a></li><li><a href="#pdf%E6%9B%B8%E3%81%8D%E5%87%BA%E3%81%97%E3%81%8C%E3%81%A7%E3%81%8D%E3%82%8B">PDF書き出しができる</a></li><li><a href="#sketch%E3%81%AE%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E3%82%A4%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%88%E3%81%A7%E3%81%8D%E3%82%8B">Sketchのデータをインポートできる</a></li><li><a href="#%E5%8B%95%E7%94%BB%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%81%8C%E5%85%85%E5%AE%9F%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B">動画コンテンツが充実している</a></li><li><a href="#figma%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E3%81%93%E3%81%A8">Figmaができないこと</a><ul><li><a href="#%E3%82%BF%E3%82%A4%E3%83%9D%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3">タイポグラフィ</a></li><li><a href="#%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3">アニメーション</a></li><li><a href="#%E3%83%93%E3%83%83%E3%83%88%E3%83%9E%E3%83%83%E3%83%97%E3%81%AE%E5%8A%A0%E5%B7%A5">ビットマップの加工</a></li></ul></li><li><a href="#%E3%81%95%E3%81%84%E3%81%94%E3%81%AB">さいごに</a></li><li><a href="#%E8%BF%BD%E8%A8%98">追記</a></li></ul></details><p></p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*t0uqd0h7yPxaT4zDlnSUkw.png" alt="" loading="lazy" /></p>
<p>(2018/12/13 追記)Figma Advent Calendar 2018に滑り込んだ。</p>
<p><a href="https://qiita.com/advent-calendar/2018/figma" title="https://qiita.com/advent-calendar/2018/figma" target="_blank" rel="noopener noreferrer"><strong>Figma Advent Calendar 2018 - Qiita</strong><br />
_ブラウザベースのUIデザインツール、Figma についてのAdvent Calendarです! Figmaは、柔軟なコンポーネント機能や同時編集など、素敵な機能が満載のUIデザインツールです。 https://www.figma.com/…_qiita.com</a><a href="https://qiita.com/advent-calendar/2018/figma" target="_blank" rel="noopener noreferrer"></a></p>
<p>前職で使ってからその味を忘れられず常日頃「Figmaはいいぞ」と言ってるのですが、何がいいかイマイチわかりにくいと思うのでまとめます。</p>
<p>みんなこの記事読んでFigma使いましょう。(このタイトル画像もFigmaでつくっています。)</p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*tXrqd-JGaW7do-uKWNx8wQ.png" alt="" loading="lazy" /></p>
<p><a href="https://www.figma.com/" title="https://www.figma.com/" target="_blank" rel="noopener noreferrer"><strong>Figma: the collaborative interface design tool.</strong><br />
_Turn Ideas into Products Faster. Design, prototype, and gather feedback all in one place with Figma._www.figma.com</a><a href="https://www.figma.com/" target="_blank" rel="noopener noreferrer"></a></p>
<p><a href="https://www.figma.com/features/" title="https://www.figma.com/features/" target="_blank" rel="noopener noreferrer"><strong>Design, Prototype, and Gather Feedback All in One Place With Figma</strong><br />
_Figma combines the highest quality design editor with the easiest and most powerful way to collaborate with all project…_www.figma.com</a><a href="https://www.figma.com/features/" target="_blank" rel="noopener noreferrer"></a></p>
<h2 id="%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%A7%E5%8B%95%E3%81%8F" tabindex="-1">ブラウザで動く</h2>
<p>Figmaはブラウザで動作します。最高です。</p>
<p>そのためOSの縛りがありません。(デスクトップアプリもあります。)</p>
<p><strong>ブラウザさえあればよいのでLinuxでもiPadでも問題なく作業できます。</strong></p>
<h3 id="%E6%A9%9F%E8%83%BD" tabindex="-1">機能</h3>
<p>機能はSketchとほとんど同じです。なので特に迷うことはないはずです。</p>
<p><a href="https://help.figma.com/getting-started/get-familiar-with-figma/take-a-tour-around-figma" title="https://help.figma.com/getting-started/get-familiar-with-figma/take-a-tour-around-figma" target="_blank" rel="noopener noreferrer"><strong>Take a Tour around Figma!</strong><br />
_Watch this quick video to see the Figma landscape_help.figma.com</a><a href="https://help.figma.com/getting-started/get-familiar-with-figma/take-a-tour-around-figma" target="_blank" rel="noopener noreferrer"></a></p>
<h3 id="%E3%81%99%E3%81%B9%E3%81%A6%E3%82%AA%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3" tabindex="-1">すべてオンライン</h3>
<p>すべてのデザインデータはオンライン上にあり、全員がどこからでもアクセスすることができます。</p>
<p><strong>編集は自動で保存され、デザインデータは常に最新に保たれます。</strong></p>
<p>そのため、参照するファイルのバージョンが古く事故を起こしてしまうなんてこともありませんし、一部のデザインが違うデザインが大量にできてしまうなんてこともありません。</p>
<h3 id="%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88" tabindex="-1">フォント</h3>
<p>ブラウザで動作すると聞くと「使えるフォント少ないんじゃない?」と思うかもしれませんが、<strong>Google Fontsと連携できるし拡張機能を入れればローカルフォントも使える</strong>ようになるので心配いりません。</p>
<p><a href="https://help.figma.com/text/working-with-fonts/using-local-fonts" title="https://help.figma.com/text/working-with-fonts/using-local-fonts" target="_blank" rel="noopener noreferrer"><strong>Using Local Fonts</strong><br />
_Learn how to use the fonts installed on your computer in Figma_help.figma.com</a><a href="https://help.figma.com/text/working-with-fonts/using-local-fonts" target="_blank" rel="noopener noreferrer"></a></p>
<h3 id="%E5%85%B1%E6%9C%89" tabindex="-1">共有</h3>
<p><img src="https://cdn-images-1.medium.com/max/800/1*dA7PThWfRe_80yKLV6LEJg.png" alt="" loading="lazy" /></p>
<p><strong>デザインデータのリンクを共有するだけで、他の人にデザインを見せることができます。</strong></p>
<p>もちろんアートボードを指定してシェアすることもできます。</p>
<p>誰にでも簡単に共有できるため、普段デザインツールを触らない人や外部メンバーにも簡単に共有できます。</p>
<p><strong>簡単に共有できるということは、デザインへのアクセスがしやすくなるということで、これによりコミュニケーションが促進され、デザイナー以外の意見をデザインに反映しやすくなります。</strong></p>
<p>ステークホルダーにデザインを早い段階で共有し意思決定のスピードを早めることもできます。</p>
<p>さらにデータは常に最新に保たれるので、デザインのバージョンや変更についていちいち共有する必要がなくなります。</p>
<p><a href="https://help.figma.com/files-and-projects/sharing-files-and-projects" title="https://help.figma.com/files-and-projects/sharing-files-and-projects" target="_blank" rel="noopener noreferrer"><strong>Sharing Files and Projects</strong><br />
_In Figma, you have a section for your personal files as well as sections for any teams you have created or been invited…_help.figma.com</a><a href="https://help.figma.com/files-and-projects/sharing-files-and-projects" target="_blank" rel="noopener noreferrer"></a></p>
<p>zeplinと連携させるとより柔軟にデザインを共有できるようになります。</p>
<p><a href="https://help.figma.com/integrations/figma-and-zeplin" title="https://help.figma.com/integrations/figma-and-zeplin" target="_blank" rel="noopener noreferrer"><strong>Figma and Zeplin</strong><br />
_Teams come in all shapes and sizes and they collaborate in a number of different ways. As a collaborative design tool…_help.figma.com</a><a href="https://help.figma.com/integrations/figma-and-zeplin" target="_blank" rel="noopener noreferrer"></a></p>
<h2 id="%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%92%E8%A4%87%E6%95%B0%E4%BA%BA%E3%81%A7%E5%90%8C%E6%99%82%E3%81%AB%E7%B7%A8%E9%9B%86%E3%81%A7%E3%81%8D%E3%82%8B" tabindex="-1">デザインを複数人で同時に編集できる</h2>
<p>オンラインであることを最大限活かした機能ですね。</p>
<p>みんなでコミュニケーションを取りながらデザインをすることができますし、モブプログラミングならぬモブデザインができたりします。</p>
<p>もし誰かが余計な変更をしても履歴が残っているのですぐ元に戻せます。</p>
<p>この共同編集機能、デザイン以外にもブレインストーミングや会議の議事録などにも使うことができ、とても便利です。</p>
<p>さらにFigmaには、そのデータにアクセスしてる人の視点をシェアすることができる機能もついています。(これなに言ってるかわかんないですよね。)</p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*pRHr5M9jAN3sYAENGk4xBw.gif" alt="" loading="lazy" /></p>
<h2 id="%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88" tabindex="-1">コメント</h2>
<p><img src="https://cdn-images-1.medium.com/max/800/1*YqTBFAevO0sUT8QUNCMlEg.png" alt="" loading="lazy" /></p>
<p>アカウントを作ってログインすれば閲覧しているデザインにコメントを残すことができます。</p>
<p>デザインに直接コメントを書き込めるのでとてもわかりやすいですし、そのコメントのスレッドで会話をすることもできます。</p>
<p><a href="https://help.figma.com/collaborating/comments" title="https://help.figma.com/collaborating/comments" target="_blank" rel="noopener noreferrer"><strong>Comments</strong><br />
_Comments allow you to quickly exchange ideas on designs with other team members. Comments are accessible to anyone with…_help.figma.com</a><a href="https://help.figma.com/collaborating/comments" target="_blank" rel="noopener noreferrer"></a></p>
<p>事前にデザインを共有しコメントを書いてもらって、そのコメントをもとにレビュー会を実施することもできます。</p>
<p>webhookを使えばこのコメントをSlackに通知させることもできます。</p>
<p><a href="https://help.figma.com/managing-your-account/working-with-teams/figma-slack" title="https://help.figma.com/managing-your-account/working-with-teams/figma-slack" target="_blank" rel="noopener noreferrer"><strong>Figma & Slack</strong><br />
_Connect your existing Slack team with your Figma Team_help.figma.com</a><a href="https://help.figma.com/managing-your-account/working-with-teams/figma-slack" target="_blank" rel="noopener noreferrer"></a></p>
<h2 id="%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0%E3%83%84%E3%83%BC%E3%83%AB%E3%81%A8%E3%81%97%E3%81%A6%E4%BD%BF%E3%81%88%E3%82%8B" tabindex="-1">プロトタイピングツールとして使える</h2>
<p>Figmaにはプロトタイピング機能がついているので、下記の行程をすべてFigmaのみで行うことができます。</p>
<ul>
<li>ワイヤーフレーム・モック作成</li>
<li>プロトタイピング</li>
<li>デザイン</li>
<li>デザインレビュー</li>
</ul>
<p>UI設計からグラフィカルなデザインにシームレスに移行できるので、デザインフローが効率化されますし、ツールの使い方を都度覚える必要もなくなります。</p>
<p><a href="https://help.figma.com/prototyping/prototyping" title="https://help.figma.com/prototyping/prototyping" target="_blank" rel="noopener noreferrer"><strong>Prototyping</strong><br />
_Figma's Prototyping features allow you to create interactive flows so you can preview and test out your designs. To use…_help.figma.com</a><a href="https://help.figma.com/prototyping/prototyping" target="_blank" rel="noopener noreferrer"></a></p>
<h2 id="%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E7%AE%A1%E7%90%86%E6%A9%9F%E8%83%BD%E3%81%8C%E3%81%82%E3%82%8B" tabindex="-1">バージョン管理機能がある</h2>
<p>Figmaは自動で履歴を管理してくれます。</p>
<p>もしも良くない変更をしてしまっても、即座に正しかった状態に戻すことができます。</p>
<p>ブランチという概念はなく、常にmasterにコミットされていくイメージです。</p>
<p><a href="https://help.figma.com/files-and-projects/version-history" title="https://help.figma.com/files-and-projects/version-history" target="_blank" rel="noopener noreferrer"><strong>Version History</strong><br />
_Overview Version History allows you to view earlier versions of a file and restore or duplicate any version. Versions…_help.figma.com</a><a href="https://help.figma.com/files-and-projects/version-history" target="_blank" rel="noopener noreferrer"></a></p>
<h2 id="%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E7%AE%A1%E7%90%86%E3%81%8C%E3%81%A7%E3%81%8D%E3%82%8B" tabindex="-1">コンポーネント管理ができる</h2>
<p>Figmaではコンポーネントを作ることができ、それをプロジェクトの中で使い回すことができます。</p>
<p><a href="https://help.figma.com/drawing/tools/using-components-and-instances" title="https://help.figma.com/drawing/tools/using-components-and-instances" target="_blank" rel="noopener noreferrer"><strong>Using Components and Instances</strong><br />
_Components are UI elements that can be reused across your designs. They help you to create and manage consistent…_help.figma.com</a><a href="https://help.figma.com/drawing/tools/using-components-and-instances" target="_blank" rel="noopener noreferrer"></a></p>
<p>有料プランにするとさらにTeam Libraryの機能が使えるようになります。</p>
<p>上記のコンポーネントは同じプロジェクト内でしか使えませんが、Team Libraryで定義したデザインは同じチームのどのプロジェクトでも使用することができます。</p>
<p>この機能を使うことでデザインシステムやコンポーネントカタログを効率的に作ることができるようになります。</p>
<p>とくにAtomic Designなどのコンポーネント指向な設計を取り入れている場合役立つでしょう。</p>
<p><a href="https://help.figma.com/collaborating/team-library/team-library" title="https://help.figma.com/collaborating/team-library/team-library" target="_blank" rel="noopener noreferrer"><strong>Team Library</strong><br />
_Overview The Team Library allows you to share Styles and Components across files and teams, as well as keep Styles and…_help.figma.com</a><a href="https://help.figma.com/collaborating/team-library/team-library" target="_blank" rel="noopener noreferrer"></a></p>
<h2 id="%E7%B7%A8%E9%9B%86%E6%A8%A9%E9%99%90%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%A7%E3%81%8D%E3%82%8B" tabindex="-1">編集権限を設定できる</h2>
<p>Figmaではユーザーの権限を設定できます。</p>
<p>また、招待したメンバーしか閲覧できないようにもできます。</p>
<p><a href="https://help.figma.com/managing-your-account/working-with-teams/permissions" title="https://help.figma.com/managing-your-account/working-with-teams/permissions" target="_blank" rel="noopener noreferrer"><strong>Permissions</strong><br />
_Permissions allow for more refined collaboration within Figma and can improve design workflows for teammates. With…_help.figma.com</a><a href="https://help.figma.com/managing-your-account/working-with-teams/permissions" target="_blank" rel="noopener noreferrer"></a></p>
<h2 id="figma-mirror-app" tabindex="-1">Figma Mirror App</h2>
<p>モバイルでプレビューできるアプリがあるので、デザインやプロトタイプを実機で確認する流れをシームレスに行うことができます。</p>
<p><a href="https://help.figma.com/figma-mirror-app/mirror-app" title="https://help.figma.com/figma-mirror-app/mirror-app" target="_blank" rel="noopener noreferrer"><strong>Mirror App</strong><br />
_The Figma Mirror app allows you to preview your designs on a mobile device via Wi-fi. You can download the Figma Mirror…_help.figma.com</a><a href="https://help.figma.com/figma-mirror-app/mirror-app" target="_blank" rel="noopener noreferrer"></a></p>
<p><a href="https://www.figma.com/downloads/" title="https://www.figma.com/downloads/" target="_blank" rel="noopener noreferrer"><strong>Download Figma Desktop Apps, Mobile Apps, and Font Installers</strong><br />
_Turn Ideas into Products Faster. Design, prototype, and gather feedback all in one place with Figma._www.figma.com</a><a href="https://www.figma.com/downloads/" target="_blank" rel="noopener noreferrer"></a></p>
<h2 id="pdf%E6%9B%B8%E3%81%8D%E5%87%BA%E3%81%97%E3%81%8C%E3%81%A7%E3%81%8D%E3%82%8B" tabindex="-1">PDF書き出しができる</h2>
<p>最近のアップデートでPDFエクスポートが追加されました。</p>
<p>はっきり言って神アプデですね。</p>
<p>これで紙媒体のデザインにも少し対応できるようになりました。最高です。</p>
<p><a href="https://help.figma.com/importing-and-exporting/exporting-from-figma/getting-started-with-exports" title="https://help.figma.com/importing-and-exporting/exporting-from-figma/getting-started-with-exports" target="_blank" rel="noopener noreferrer"><strong>Getting Started with Exports</strong><br />
_When it comes to sharing your Figma designs with the world, you can define exactly what you want to export and how you…_help.figma.com</a><a href="https://help.figma.com/importing-and-exporting/exporting-from-figma/getting-started-with-exports" target="_blank" rel="noopener noreferrer"></a></p>
<h2 id="sketch%E3%81%AE%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E3%82%A4%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%88%E3%81%A7%E3%81%8D%E3%82%8B" tabindex="-1">Sketchのデータをインポートできる</h2>
<p>既存のSketchファイルをインポートできるので、移行もらくらくです。</p>
<p><a href="https://help.figma.com/importing-and-exporting/importing-into-figma/import-files-from-sketch" title="https://help.figma.com/importing-and-exporting/importing-into-figma/import-files-from-sketch" target="_blank" rel="noopener noreferrer"><strong>Import Files from Sketch</strong><br />
_If you are on Linux or ChromeOS, you can still import Sketch files, but your text objects may not import properly._help.figma.com</a><a href="https://help.figma.com/importing-and-exporting/importing-into-figma/import-files-from-sketch" target="_blank" rel="noopener noreferrer"></a></p>
<h2 id="%E5%8B%95%E7%94%BB%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%81%8C%E5%85%85%E5%AE%9F%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B" tabindex="-1">動画コンテンツが充実している</h2>
<p><a href="https://www.youtube.com/figmadesign" title="https://www.youtube.com/figmadesign" target="_blank" rel="noopener noreferrer"><strong>Figma</strong><br />
_Figma is free to use. Sign up here: http://bit.ly/2yrzkCN Curious about Figma? In this end-to-end video we'll show you…_www.youtube.com</a><a href="https://www.youtube.com/figmadesign" target="_blank" rel="noopener noreferrer"></a></p>
<p>YouTubeチャンネルがあり基本的な機能の解説動画がアップロードされています。</p>
<p>言語は英語ですが、英語がわからなくても動きを追えば理解できると思います。</p>
<p>もし難しいようならYouTubeの自動翻訳機能を使用すると良いでしょう。</p>
<h2 id="figma%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E3%81%93%E3%81%A8" tabindex="-1">Figmaができないこと</h2>
<h3 id="%E3%82%BF%E3%82%A4%E3%83%9D%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3" tabindex="-1">タイポグラフィ</h3>
<p>Figmaは細かいタイポグラフィの操作が苦手です。(ある程度はできますがPhotoshopなどに比べると機能は少ないです。)</p>
<p>縦書きにも対応していないので、もし縦書きのデザインを作りたい場合は工夫が必要です。</p>
<h3 id="%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3" tabindex="-1">アニメーション</h3>
<p>FigmaにはAdobe XDのようなアニメーションを作る機能はありません。</p>
<p>アニメーションやインタラクションを作成・管理するには別のツールを使うのが良いでしょう。</p>
<h3 id="%E3%83%93%E3%83%83%E3%83%88%E3%83%9E%E3%83%83%E3%83%97%E3%81%AE%E5%8A%A0%E5%B7%A5" tabindex="-1">ビットマップの加工</h3>
<p>写真のトリミングなどはサポートされていません。</p>
<p>そもそもFigmaのスコープには入っていないので、Photoshopなど別のツールで行うと良いでしょう。</p>
<h2 id="%E3%81%95%E3%81%84%E3%81%94%E3%81%AB" tabindex="-1">さいごに</h2>
<p>Figmaは万能ツールではないので欠点もいくつか存在しますし、適していない場面(受託制作のデザインなど)もあります。</p>
<p>しかし、僕は現時点で最良のアプリケーションデザインツールだと考えています。</p>
<p>Figmaの良いところはチーム開発の効率化に主眼をおいていることとコミュニケーションを促進させる仕掛けがたくさんあることだと個人的には思っています。</p>
<p><strong>Figmaはデザインツールでありコミュニケーションツールでもあるのです。</strong></p>
<p>ぜひみなさん使ってみてください。</p>
<h2 id="%E8%BF%BD%E8%A8%98" tabindex="-1">追記</h2>
<p><a href="http://uxtools.co/survey-2018" title="http://uxtools.co/survey-2018" target="_blank" rel="noopener noreferrer"><strong>2018 Design Tools Survey Results</strong><br />
_Wonder which tools everyone else is using? In this survey, 2,800 designers give their opinion on the most popular…_uxtools.co</a><a href="http://uxtools.co/survey-2018" target="_blank" rel="noopener noreferrer"></a></p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*hBBTsP2Wf9lg2gBxAwTlCA.png" alt="" loading="lazy" /></p>
<p>2018 Design Tools Survey Resultsの <strong><em>Most Exciting Tools in 2019</em></strong> でFigmaがNo.1でしたね。これからどんどん盛り上がりそうです。</p>
2018-12-19T14:17:02Z
/posts/2018-12-19_review-my-2018-aa038bd49906/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#%E4%B8%80%E6%9C%88">一月</a><ul><li><a href="#%E6%AF%8D%E8%A6%AA%E6%89%8B%E9%A6%96%E9%AA%A8%E6%8A%98">母親手首骨折</a></li></ul></li><li><a href="#%E4%BA%8C%E6%9C%88">二月</a><ul><li><a href="#%E7%88%B6%E8%A6%AA%E3%81%8C%E5%B1%85%E9%85%92%E5%B1%8B%E3%81%AE%E9%9A%8E%E6%AE%B5%E3%81%A7%E8%BB%A2%E3%82%93%E3%81%A7%E7%97%85%E9%99%A2%E3%81%B8%E9%81%8B%E3%81%B0%E3%82%8C%E3%81%9F">父親が居酒屋の階段で転んで病院へ運ばれた</a></li></ul></li><li><a href="#%E4%B8%89%E6%9C%88">三月</a><ul><li><a href="#%E4%BA%BA%E7%94%9F%E3%81%A7%E5%88%9D%E3%82%81%E3%81%A6%E3%83%97%E3%83%AD%E3%83%80%E3%82%AF%E3%83%88%E3%82%92%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9%E3%81%97%E3%81%9F">人生で初めてプロダクトをリリースした</a></li></ul></li><li><a href="#%E5%9B%9B%E6%9C%88">四月</a></li><li><a href="#%E4%BA%94%E6%9C%88">五月</a></li><li><a href="#%E5%85%AD%E6%9C%88">六月</a><ul><li><a href="#%E5%A9%9A%E7%B4%84%E7%A0%B4%E6%A3%84%E3%81%97%E3%81%9F">婚約破棄した</a></li></ul></li><li><a href="#%E4%B8%83%E6%9C%88">七月</a><ul><li><a href="#%E5%95%86%E6%A5%AD%E5%87%BA%E7%89%88%E3%81%97%E3%81%9F">商業出版した</a></li><li><a href="#27%E6%AD%B3%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%9F">27歳になった</a></li><li><a href="#%E4%BA%AC%E9%83%BD%E3%83%BB%E5%A4%A7%E9%98%AA%E3%83%BB%E5%90%8D%E5%8F%A4%E5%B1%8B%E3%81%AB%E6%97%85%E8%A1%8C%E3%81%AB%E8%A1%8C%E3%81%A3%E3%81%9F">京都・大阪・名古屋に旅行に行った</a></li></ul></li><li><a href="#%E5%85%AB%E6%9C%88">八月</a><ul><li><a href="#%E5%BC%95%E8%B6%8A%E3%81%97%E3%81%9F">引越した</a></li><li><a href="#%E3%83%94%E3%82%B9%E3%83%88%E3%83%90%E3%82%A4%E3%82%AF%E3%82%92%E8%B2%B7%E3%81%A3%E3%81%9F">ピストバイクを買った</a></li></ul></li><li><a href="#%E4%B9%9D%E6%9C%88">九月</a><ul><li><a href="#gdg-devfest-%E3%81%AB%E7%99%BB%E5%A3%87%E3%81%97%E3%81%9F">GDG DevFest に登壇した</a></li><li><a href="#%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE%E3%83%A2%E3%83%AA%E3%82%B5%E3%83%AF%E3%81%95%E3%82%93%E3%81%8B%E3%82%89%E3%81%8A%E4%BB%95%E4%BA%8B%E3%82%92%E8%AB%8B%E3%81%91%E3%81%9F">株式会社モリサワさんからお仕事を請けた</a></li><li><a href="#%E9%80%80%E8%81%B7%E3%81%97%E3%81%9F">退職した</a></li></ul></li><li><a href="#%E5%8D%81%E6%9C%88">十月</a><ul><li><a href="#%E8%BB%A2%E8%81%B7%E3%81%97%E3%81%9F">転職した</a></li><li><a href="#%E6%8A%80%E8%A1%93%E6%9B%B8%E5%85%B85%E3%81%AB%E3%82%B5%E3%83%BC%E3%82%AF%E3%83%AB%E5%8F%82%E5%8A%A0%E3%81%97%E3%81%9F">技術書典5にサークル参加した</a></li></ul></li><li><a href="#%E5%8D%81%E4%B8%80%E6%9C%88">十一月</a><ul><li><a href="#vue-fes-japan-%E3%81%AB%E7%99%BB%E5%A3%87%E3%81%97%E3%81%9F">Vue Fes Japan に登壇した</a></li><li><a href="#%E3%82%B7%E3%82%A7%E3%82%A2%E3%83%8F%E3%82%A6%E3%82%B9%E9%81%8B%E5%96%B6%E7%B5%82%E4%BA%86%E3%81%AE%E3%81%8A%E7%9F%A5%E3%82%89%E3%81%9B">シェアハウス運営終了のお知らせ</a></li></ul></li><li><a href="#%E5%8D%81%E4%BA%8C%E6%9C%88">十二月</a><ul><li><a href="#%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%82%AB%E3%83%B3%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9%E7%A6%8F%E5%B2%A1%E3%81%AB%E8%A1%8C%E3%81%A3%E3%81%9F">フロントエンドカンファレンス福岡に行った</a></li><li><a href="#%E4%BB%8A%E3%81%AE%E3%81%A8%E3%81%93%E3%82%8D%E3%81%AA%E3%81%AB%E3%82%82%E3%81%AA%E3%81%84">今のところなにもない</a></li></ul></li><li><a href="#%E7%B7%8F%E6%8B%AC">総括</a></li></ul></details><p></p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*YXj8fg_XIoXPOrCamZDp_A.png" alt="" loading="lazy" /></p>
<p>これは<strong>人生 Advent Calendar 2018</strong> の11日目の記事です。遅刻しました。</p>
<p><a href="https://adventar.org/calendars/3182" title="https://adventar.org/calendars/3182" target="_blank" rel="noopener noreferrer"><strong>人生 Advent Calendar 2018 - Adventar</strong><br />
_「人生アドベントカレンダー」みたいなやつ書くか読むかしてえよ。技術の話とかいいんだよ。お前らの人生をいい方も悪い方も聞かせてくれ ...みたいなこと火の鳥読みながら人生〜ちゅてTwitterに書いてたら煽られたので作りました。…_adventar.org</a><a href="https://adventar.org/calendars/3182" target="_blank" rel="noopener noreferrer"></a></p>
<p>なんか今年はいろいろありすぎたのでまとめとこうと思う。</p>
<h2 id="%E4%B8%80%E6%9C%88" tabindex="-1">一月</h2>
<h3 id="%E6%AF%8D%E8%A6%AA%E6%89%8B%E9%A6%96%E9%AA%A8%E6%8A%98" tabindex="-1">母親手首骨折</h3>
<p>母親が階段で転んで手首を骨折した。大した怪我でなくてよかったが、もう少し慎重になってもらいたいと思った。</p>
<p>僕自身はというと、去年の年始は10日間寝込んでつらかったけど、今年はそういうのなくてよかった。</p>
<h2 id="%E4%BA%8C%E6%9C%88" tabindex="-1">二月</h2>
<h3 id="%E7%88%B6%E8%A6%AA%E3%81%8C%E5%B1%85%E9%85%92%E5%B1%8B%E3%81%AE%E9%9A%8E%E6%AE%B5%E3%81%A7%E8%BB%A2%E3%82%93%E3%81%A7%E7%97%85%E9%99%A2%E3%81%B8%E9%81%8B%E3%81%B0%E3%82%8C%E3%81%9F" tabindex="-1">父親が居酒屋の階段で転んで病院へ運ばれた</h3>
<p>病院に運ばれたときに意識がなくて家族全員とても心配したが、寝てただけだった。足を複雑骨折するくらいで済んで良かった。入院費が意外と高くて驚いた。もう若くないんだからお酒はほどほどにしてほしい。</p>
<h2 id="%E4%B8%89%E6%9C%88" tabindex="-1">三月</h2>
<h3 id="%E4%BA%BA%E7%94%9F%E3%81%A7%E5%88%9D%E3%82%81%E3%81%A6%E3%83%97%E3%83%AD%E3%83%80%E3%82%AF%E3%83%88%E3%82%92%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9%E3%81%97%E3%81%9F" tabindex="-1">人生で初めてプロダクトをリリースした</h3>
<p>自分が開発していたサービスをリリースした。ウェブサイトのリリースと違った緊張感と達成感があって楽しかった。徹夜でリリース作業して、会社で小さく打ち上げしながら寝たのを覚えてる。フロントエンドは僕一人しかいなかったのでリリースできなかったらどうしようとかすごい考えてたけど、無事にリリースできて本当にホッとした。</p>
<h2 id="%E5%9B%9B%E6%9C%88" tabindex="-1">四月</h2>
<p>なんかあった気がするけど忘れた。</p>
<h2 id="%E4%BA%94%E6%9C%88" tabindex="-1">五月</h2>
<p>なんかあった気がするけど忘れた。</p>
<h2 id="%E5%85%AD%E6%9C%88" tabindex="-1">六月</h2>
<h3 id="%E5%A9%9A%E7%B4%84%E7%A0%B4%E6%A3%84%E3%81%97%E3%81%9F" tabindex="-1">婚約破棄した</h3>
<p>お付き合いしている人がいたのだけど、いろいろあって婚約破棄した。人間関係は難しい。</p>
<h2 id="%E4%B8%83%E6%9C%88" tabindex="-1">七月</h2>
<h3 id="%E5%95%86%E6%A5%AD%E5%87%BA%E7%89%88%E3%81%97%E3%81%9F" tabindex="-1">商業出版した</h3>
<p>技術書典4 で頒布した「イヌでもわかるウェブフォント」の商業版である「誰でもつかえる!ウェブフォント実践マニュアル」が出版された。同人誌を書き始めた理由が商業出版したいからだったので、薄い本だけど出版できてよかった。いろんな人に読んでもらいたいな。</p>
<p><a href="https://nextpublishing.jp/book/9900.html" title="https://nextpublishing.jp/book/9900.html" target="_blank" rel="noopener noreferrer"><strong>誰でもつかえる!ウェブフォント実践マニュアル | 電子書籍とプリントオンデマンド(POD) | NextPublishing(ネクストパブリッシング)</strong><br />
_【ウェブフォントの基礎から最適化まで、なんでもござれの一冊!これを読めばあなたもウェブフォントマスター!】 本書は日本語でのウェブフォントを使う..._nextpublishing.jp</a><a href="https://nextpublishing.jp/book/9900.html" target="_blank" rel="noopener noreferrer"></a></p>
<h3 id="27%E6%AD%B3%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%9F" tabindex="-1">27歳になった</h3>
<p>一つ歳をとった。たぶん人生最悪の誕生日だったけどスヌーピー展はよかった。</p>
<h3 id="%E4%BA%AC%E9%83%BD%E3%83%BB%E5%A4%A7%E9%98%AA%E3%83%BB%E5%90%8D%E5%8F%A4%E5%B1%8B%E3%81%AB%E6%97%85%E8%A1%8C%E3%81%AB%E8%A1%8C%E3%81%A3%E3%81%9F" tabindex="-1">京都・大阪・名古屋に旅行に行った</h3>
<p>名古屋のイベントに参加するという名目で旅行に行った。大阪にいる友人と会ったり、京都先斗町で飲み歩いたり、とても楽しい旅行だった。しかし夏の京都はめちゃくちゃ暑かった。次行くなら桜の季節かな。名古屋はあまり観光に行けなかったのが残念。</p>
<h2 id="%E5%85%AB%E6%9C%88" tabindex="-1">八月</h2>
<h3 id="%E5%BC%95%E8%B6%8A%E3%81%97%E3%81%9F" tabindex="-1">引越した</h3>
<p>それまで婚約してた人と横浜の方で同棲してたけど、別れて引越した。今回もシェアハウスにした。井の頭線沿いにすごくいい物件を見つけて即決した。</p>
<h3 id="%E3%83%94%E3%82%B9%E3%83%88%E3%83%90%E3%82%A4%E3%82%AF%E3%82%92%E8%B2%B7%E3%81%A3%E3%81%9F" tabindex="-1">ピストバイクを買った</h3>
<p>CINELLIのピストバイクを買った。めちゃかっこいい。CINELLIは大好きな自転車メーカーなのでとても嬉しい。あんまり乗れてないので、仕事とか落ち着いたらもっと乗りたい。</p>
<h2 id="%E4%B9%9D%E6%9C%88" tabindex="-1">九月</h2>
<h3 id="gdg-devfest-%E3%81%AB%E7%99%BB%E5%A3%87%E3%81%97%E3%81%9F" tabindex="-1">GDG DevFest に登壇した</h3>
<p>僕が運営に関わっているPolymer Japanのつながりで登壇させてもらった。非常に大きい会場での登壇だったので緊張した。このGDGで色んな人に出会えたので参加してよかったなーと思っている。</p>
<h3 id="%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE%E3%83%A2%E3%83%AA%E3%82%B5%E3%83%AF%E3%81%95%E3%82%93%E3%81%8B%E3%82%89%E3%81%8A%E4%BB%95%E4%BA%8B%E3%82%92%E8%AB%8B%E3%81%91%E3%81%9F" tabindex="-1">株式会社モリサワさんからお仕事を請けた</h3>
<p>詳しい内容は言えないけど、ウェブフォント関連の仕事をいただいた。技術書典で頒布した本からお仕事につながったので非常に嬉しかった。<strong>今後もウェブフォント関連のお仕事していきたいのでご相談お待ちしてます。</strong></p>
<h3 id="%E9%80%80%E8%81%B7%E3%81%97%E3%81%9F" tabindex="-1">退職した</h3>
<p>スマートドライブを退職した。退職間際にいろいろあったけど、1年間本当にお世話になりました。</p>
<h2 id="%E5%8D%81%E6%9C%88" tabindex="-1">十月</h2>
<h3 id="%E8%BB%A2%E8%81%B7%E3%81%97%E3%81%9F" tabindex="-1">転職した</h3>
<p>株式会社FOLIOに転職した。人の縁とは不思議なものだなあと感じてる。いまのところ楽しく仕事してる。</p>
<h3 id="%E6%8A%80%E8%A1%93%E6%9B%B8%E5%85%B85%E3%81%AB%E3%82%B5%E3%83%BC%E3%82%AF%E3%83%AB%E5%8F%82%E5%8A%A0%E3%81%97%E3%81%9F" tabindex="-1">技術書典5にサークル参加した</h3>
<p>前回に引き続き参加した。新刊2冊+改訂版1冊という鬼のようなラインナップだったがなんとか書き上げられた。サークル主が倒れたり締切間に合わなかったり売上金額が合わなかったりと大変だったけど、今回も楽しめた。次回もサークル参加するかは未定。</p>
<h2 id="%E5%8D%81%E4%B8%80%E6%9C%88" tabindex="-1">十一月</h2>
<h3 id="vue-fes-japan-%E3%81%AB%E7%99%BB%E5%A3%87%E3%81%97%E3%81%9F" tabindex="-1">Vue Fes Japan に登壇した</h3>
<p>CFP出したら通ったので登壇した。正直登壇することになるとは微塵も思っていなかったのでとてもびっくりしたし、いろんな意味で勉強になった。Web Componentsはこれからもやっていきたい。</p>
<h3 id="%E3%82%B7%E3%82%A7%E3%82%A2%E3%83%8F%E3%82%A6%E3%82%B9%E9%81%8B%E5%96%B6%E7%B5%82%E4%BA%86%E3%81%AE%E3%81%8A%E7%9F%A5%E3%82%89%E3%81%9B" tabindex="-1">シェアハウス運営終了のお知らせ</h3>
<p>8月に引っ越したばかりのシェアハウスの運営が終了すると言われた。大家さんは非常に複雑な人らしく管理会社との関係も良くなかったようだ。正直引っ越しばかりで疲れる。次の家はこうならないことを祈る。</p>
<h2 id="%E5%8D%81%E4%BA%8C%E6%9C%88" tabindex="-1">十二月</h2>
<h3 id="%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%82%AB%E3%83%B3%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9%E7%A6%8F%E5%B2%A1%E3%81%AB%E8%A1%8C%E3%81%A3%E3%81%9F" tabindex="-1">フロントエンドカンファレンス福岡に行った</h3>
<p>はじめての福岡だったけど、とても楽しめた。東京の知り合いがいっぱい来てて、ほぼ東京だった。福岡の人ととあんまり話せなくて残念だったかな。「福岡に転職しようかな」ってTweetしたら福岡の人がすごいいいねしてくれて、圧がすごいなと思った。けど福岡転職はわりかしあり。<br />
モツ鍋と明太子とラーメンがめちゃうまかった。また行きたい。</p>
<h3 id="%E4%BB%8A%E3%81%AE%E3%81%A8%E3%81%93%E3%82%8D%E3%81%AA%E3%81%AB%E3%82%82%E3%81%AA%E3%81%84" tabindex="-1">今のところなにもない</h3>
<p>仕事は忙しいけど平和。少しうつっぽいけどなんとか大丈夫。多分冬だから。忘年会楽しい。みんな仲良くしてくれて嬉しい。ありがとう。</p>
<h2 id="%E7%B7%8F%E6%8B%AC" tabindex="-1">総括</h2>
<p>良くないこともたくさんあったけど、飛躍の一年感あったなと思う。自分で言うのもあれだけど。</p>
<p>来年は月刊JavaScriptを軌道に乗せたいのとデザインをもっとやってきたいな。大きいConferenceでの登壇もしたいのでCFPは積極的に出していきたいしアウトプットも継続できたらなと思ってる。</p>
<p>技術的には、Web Componentsまわりをもっと深くやっていきたい。LitElementもv1.0出そうだし、これから加速しそうな勢いを感じる。あと、WebGLまわりもやりたい。</p>
<p>ということで、今年1年お世話になりました!</p>
<p>来年もよろしくお願いいたします。</p>
2018-12-19T14:36:37Z
/posts/2018-12-19_---------------------34cc04f13519/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul></ul></details><p></p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*fsqmavKkZ3drAUUqH6cSSw.png" alt="" loading="lazy" /></p>
<p>これは <a href="https://adventar.org/calendars/2877" target="_blank" rel="noopener noreferrer">技術同人誌 Advent Calendar 2018</a> 18日目の記事です。</p>
<p><a href="https://twitter.com/takanoripe/status/1049286405535322118" target="_blank" rel="noopener noreferrer">https://twitter.com/takanoripe/status/1049286405535322118</a></p>
<p>これです。以上。</p>
<p>正直メジャーな技術に関することはきっと誰か書くし僕にとって面白くない。公式ドキュメントもブログもあるし、いつか権威ある人が商業書籍を出版する。</p>
<p>自分が書いた本が売れてほしいのはそうなんだけど、僕はニッチだけど自分が好きでわくわくして将来についていろいろ考えられることについて同人誌を書きたいと思っていたし、これからもそういうつもりで書いてく。</p>
<p>みんなの役に立ちたいとかは微塵も思ってなくて、自分の趣味とか考えとかを他の人に広めたいと思って書いてる。</p>
<p>なんでかっていうと、同人誌の本質はそういう自己顕示欲というかそういうものだと思ってるから。</p>
<p>前回の技術書典5ではメジャーな技術の本ばかり売れて、ニッチな本は売れ残るみたいになったみたいだけど、それは仕方ないことだと思う。みなが求めてるものはいつでもメジャーなものだ。技術書典がメジャーなイベントになってきたことを考えるとそれは逆らえない流れだと思う。</p>
<p>でも僕はこれからも自分が好きなものについて書くし、それは売れることより大切なことだと思ってる。</p>
<p>追伸</p>
<p>月刊JavaScript進行中。来年1月に創刊号出せそう。</p>
2018-12-20T13:24:46Z
/posts/2018-12-20_FOUT---FOIT-----------856d480db351/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul></ul></details><p></p>
<p><strong>ウェブフォント Advent Calendar 2018 20日目の記事です。</strong></p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*1KSMqpxTfTWngLsxekKczA.png" alt="" loading="lazy" /></p>
<p><a href="https://adventar.org/calendars/2911" title="https://adventar.org/calendars/2911" target="_blank" rel="noopener noreferrer"><strong>ウェブフォント Advent Calendar 2018 - Adventar</strong><br />
_ウェブフォントについてのあれこれ 好きなフォントの話をしてもいいし実装のことについて話しても良い_adventar.org</a><a href="https://adventar.org/calendars/2911" target="_blank" rel="noopener noreferrer"></a></p>
<p>記事のURL を貼り付けただけの記事です。</p>
<p>FOUT / FOITで困ったらこのへん見れば解決するはず。</p>
<p><a href="https://blog.jxck.io/entries/2017-12-06/font-display.html" title="https://blog.jxck.io/entries/2017-12-06/font-display.html" target="_blank" rel="noopener noreferrer"><strong>Font Display プロパティを用いた FOIT/FOUT 最適化 | blog.jxck.io</strong><br />
_Web Font 読み込み中の HTML 表示については、ブラウザデフォルトの挙動に依存していた。フォントファイルサイズが大きい場合は、 FOIT/FOUT の問題が顕著になり、 JS…_blog.jxck.io</a><a href="https://blog.jxck.io/entries/2017-12-06/font-display.html" target="_blank" rel="noopener noreferrer"></a></p>
<p><a href="https://css-tricks.com/fout-foit-foft/" title="https://css-tricks.com/fout-foit-foft/" target="_blank" rel="noopener noreferrer"><strong>FOUT, FOIT, FOFT | CSS-Tricks</strong><br />
_Remember FOUT? When using a custom font via @font-face, browsers used to display a fallback font in the font stack…_css-tricks.com</a><a href="https://css-tricks.com/fout-foit-foft/" target="_blank" rel="noopener noreferrer"></a></p>
<p><a href="https://helpx.adobe.com/jp/fonts/using/font-events.html#%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%AE%E4%BD%BF%E7%94%A8FOUTFlashofUnstyledText%E3%81%AE%E7%AE%A1%E7%90%86" title="https://helpx.adobe.com/jp/fonts/using/font-events.html#%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%AE%E4%BD%BF%E7%94%A8FOUTFlashofUnstyledText%E3%81%AE%E7%AE%A1%E7%90%86" target="_blank" rel="noopener noreferrer"><strong>フォントイベント</strong><br />
_フォントイベントを使用すると、フォントを読み込んでいる間のページの表示方法を制御したり、何かの理由でフォントを読み込めない場合のページの表示方法を制御したりすることができます。_helpx.adobe.com</a><a href="https://helpx.adobe.com/jp/fonts/using/font-events.html#%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%AE%E4%BD%BF%E7%94%A8FOUTFlashofUnstyledText%E3%81%AE%E7%AE%A1%E7%90%86" target="_blank" rel="noopener noreferrer"></a></p>
2018-12-23T17:09:20Z
/posts/2018-12-23_----------37805c610592/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#%E6%A9%9F%E5%8B%95%E6%88%A6%E5%A3%AB%E3%82%AC%E3%83%B3%E3%83%80%E3%83%A00080-%E3%83%9D%E3%82%B1%E3%83%83%E3%83%88%E3%81%AE%E4%B8%AD%E3%81%AE%E6%88%A6%E4%BA%89">機動戦士ガンダム0080 ポケットの中の戦争</a></li><li><a href="#%E6%A9%9F%E5%8B%95%E6%88%A6%E5%A3%AB%E3%82%AC%E3%83%B3%E3%83%80%E3%83%A00083-stardust-memory">機動戦士ガンダム0083 STARDUST MEMORY</a></li><li><a href="#%E6%A9%9F%E5%8B%95%E6%AD%A6%E9%97%98%E4%BC%9Dg%E3%82%AC%E3%83%B3%E3%83%80%E3%83%A0">機動武闘伝Gガンダム</a></li><li><a href="#%E7%B5%90%E5%B1%80%E5%85%A8%E9%83%A8%E5%A5%BD%E3%81%8D">結局全部好き</a></li></ul></details><p></p>
<p><img src="https://cdn-images-1.medium.com/max/800/0*zCOOBvURLqwslec4" alt="" loading="lazy" /></p>
<p>僕はガンダムが好き。ガンダムシリーズはほとんど観てる。ナラティブみたい。</p>
<p>ガンダムの機体もストーリーも好き。ストーリーとか描写がリアルなとこ、公式設定が細かいとこ、2次創作(漫画とかプラモとかいろいろ)が盛んなとこが好き。</p>
<p>好きなガンダムシリーズをあげてく。(ネタバレ含むので要注意)</p>
<h2 id="%E6%A9%9F%E5%8B%95%E6%88%A6%E5%A3%AB%E3%82%AC%E3%83%B3%E3%83%80%E3%83%A00080-%E3%83%9D%E3%82%B1%E3%83%83%E3%83%88%E3%81%AE%E4%B8%AD%E3%81%AE%E6%88%A6%E4%BA%89" tabindex="-1">機動戦士ガンダム0080 ポケットの中の戦争</h2>
<p>最高。みんな観てほしい。ガンダム関係なくすごく良い作品だと思う。</p>
<p>少年の無邪気さや無力感、日常と戦争の間みたいなものが描かれてて、すごく切ない。バーニィめっちゃ良いやつ。</p>
<p>最後バーニィのビデオレターで泣く。何回観ても泣く。</p>
<p>ケンプファーとハイゴッグがかっこいい。</p>
<p><a href="https://blog.monogatarukame.net/entry/0080" title="https://blog.monogatarukame.net/entry/0080" target="_blank" rel="noopener noreferrer"><strong>『ガンダム0080~ポケットの中の戦争~』感想 バーニィとクリスの対比構造が本作をより切なくさせる - 物語る亀</strong><br />
_「......あの、クリスマスの記事がこれでいいの?」 「......あ? クリスマスだからこの記事なんだろう?」 カエル「確かにバーニィを思い返す日でもあるけれど......クリスマス映画って他にもあるじゃない。それこそ『…_blog.monogatarukame.net</a><a href="https://blog.monogatarukame.net/entry/0080" target="_blank" rel="noopener noreferrer"></a></p>
<h2 id="%E6%A9%9F%E5%8B%95%E6%88%A6%E5%A3%AB%E3%82%AC%E3%83%B3%E3%83%80%E3%83%A00083-stardust-memory" tabindex="-1">機動戦士ガンダム0083 STARDUST MEMORY</h2>
<p>公式同人誌。公式設定でも、この話に出てくるガンダムは宇宙世紀の歴史から消されたことになってる。</p>
<p>好きなポイントの1つ目はとりあえず機体がめちゃくちゃかっこいいこと。敵味方問わずみんなかっこよすぎ。あとガンダムのコードネームが花の名前になってておしゃれ。(ゼフィランサス、サイサリス、ガーベラ・テトラ)</p>
<p>登場人物もみんな硬派でかっこいい(ヒロインはかわいくないけど)。ガンダムは基本的にニュータイプと呼ばれる超能力的なものを持ったエリートパイロットが主人公なんだけど、この作品にはニュータイプが出てこない。みんなオールドタイプ(普通の人間)。そのせいなのか戦闘シーンはとても泥臭い。でもそれがリアルで良い。</p>
<p>特にアナベル・ガトー。特にこのセリフが有名。いやほんとかっこいい。</p>
<blockquote>
<p>『待ちに待った時が来たのだ! <br />
多くの英霊が無駄死にで無かったことの証の為に・・・ <br />
再びジオンの理想を掲げる為に! <br />
星の屑成就のために! <br />
ソロモンよ!私は帰ってきた!! 』</p>
</blockquote>
<p>好きなポイント2つ目は、作画が素晴らしいということ。</p>
<p>モビルスーツの重厚感が丁寧に描写されてて、戦闘シーンの作画も圧倒的迫力。今の綺麗なアニメーションも好きだけど、この頃のテイストも大好き。</p>
<h2 id="%E6%A9%9F%E5%8B%95%E6%AD%A6%E9%97%98%E4%BC%9Dg%E3%82%AC%E3%83%B3%E3%83%80%E3%83%A0" tabindex="-1">機動武闘伝Gガンダム</h2>
<p>石破ラブラブ天驚拳が全て。あの衝撃は今でも忘れない。</p>
<p>ストーリーはふつうに面白いけど、ガンダムではない。熱血格闘もの。</p>
<p><a href="https://nico.ms/sm16412718" title="https://nico.ms/sm16412718" target="_blank" rel="noopener noreferrer"><strong>機動武闘伝Gガンダム ~石破ラブラブ天驚拳~</strong><br />
_機動武闘伝Gガンダム ~石破ラブラブ天驚拳~ [アニメ] なんか小さかったので上げなおし。Gガンは大好きですw_nico.ms</a><a href="https://nico.ms/sm16412718" target="_blank" rel="noopener noreferrer"></a></p>
<h2 id="%E7%B5%90%E5%B1%80%E5%85%A8%E9%83%A8%E5%A5%BD%E3%81%8D" tabindex="-1">結局全部好き</h2>
<p>色々書いてて、なんだかんだどの作品も好き。ナラティブ観に行きたい。</p>
2018-12-24T16:23:59Z
/posts/2018-12-24_Polymer-3-0--------------811076735c18/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#polymer-3.0">Polymer 3.0</a></li><li><a href="#%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9F%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88">使用したコンポーネント</a><ul><li><a href="#%40polymer%2Firon-ajax">@polymer/iron-ajax</a></li></ul></li><li><a href="#polymer-starter-kit">polymer-starter-kit</a></li><li><a href="#%E5%9B%B0%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8">困ったこと</a><ul><li><a href="#%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0%E3%81%AE%E6%89%B1%E3%81%84">環境変数の扱い</a></li></ul></li><li><a href="#%E4%BD%BF%E3%82%8F%E3%81%AA%E3%81%8B%E3%81%A3%E3%81%9F%E3%81%91%E3%81%A9%E4%BD%BF%E3%81%88%E3%81%9D%E3%81%86%E3%81%AA%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88">使わなかったけど使えそうなコンポーネント</a><ul><li><a href="#ally%E9%96%A2%E9%80%A3">ally関連</a></li><li><a href="#%E5%9B%BD%E9%9A%9B%E5%8C%96%E5%AF%BE%E5%BF%9C">国際化対応</a></li><li><a href="#web-animations">Web Animations</a></li><li><a href="#marked">marked</a></li><li><a href="#toast">toast</a></li><li><a href="#%E3%83%AA%E3%82%B5%E3%82%A4%E3%82%BA%E3%82%92%E7%9B%A3%E8%A6%96%E3%81%97%E3%81%A6%E3%81%8F%E3%82%8C%E3%82%8B%E3%82%84%E3%81%A4">リサイズを監視してくれるやつ</a></li></ul></li><li><a href="#%E3%81%BE%E3%81%A8%E3%82%81">まとめ</a></li></ul></details><p></p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*q7JvY-hrljPMOxNDepUYtg.png" alt="" loading="lazy" /></p>
<p><strong>Web Components Advent Calendar 2018 24日目の記事です。</strong></p>
<p><a href="https://qiita.com/advent-calendar/2018/web-components" title="https://qiita.com/advent-calendar/2018/web-components" target="_blank" rel="noopener noreferrer"><strong>Web Components Advent Calendar 2018 - Qiita</strong><br />
_Web ComponentsやPolymer、lit-html、LitElementに関することまでなんでも大歓迎!_qiita.com</a><a href="https://qiita.com/advent-calendar/2018/web-components" target="_blank" rel="noopener noreferrer"></a></p>
<p>Polymer 3.0を使って日本ウェブフォント協会という架空の協会のサイトを作ってみた。</p>
<p><a href="https://jwfa.netlify.com/" title="https://jwfa.netlify.com/" target="_blank" rel="noopener noreferrer"><strong>Japan Web Font Association</strong><br />
_Website | Japan Web Font Association_jwfa.netlify.com</a><a href="https://jwfa.netlify.com/" target="_blank" rel="noopener noreferrer"></a></p>
<p>リポジトリはこれ。</p>
<p><a href="https://github.com/takanorip/Japan-WebFont-Association" title="https://github.com/takanorip/Japan-WebFont-Association" target="_blank" rel="noopener noreferrer"><strong>takanorip/Japan-WebFont-Association</strong><br />
_Contribute to takanorip/Japan-WebFont-Association development by creating an account on GitHub._github.com</a><a href="https://github.com/takanorip/Japan-WebFont-Association" target="_blank" rel="noopener noreferrer"></a></p>
<p>今回はその過程をまとめるよ。</p>
<h2 id="polymer-3.0" tabindex="-1">Polymer 3.0</h2>
<p>Polymer 3.0はWeb Componentsの利用をサポートしてくれるJavaScriptフレームワークです。詳しくはドキュメントを読んでね。</p>
<p>なんでLitElementじゃないのかって言うと、v1.0になってなくて安定してないからとPolymer 3.0出たばっかなのに「お前は用済みだ」みたいな感じになってるのが可愛そうだなと思ったから。</p>
<p>平成も最後だし供養してやろうという気持ち。</p>
<p><a href="https://www.polymer-project.org/" title="https://www.polymer-project.org/" target="_blank" rel="noopener noreferrer"><strong>Welcome - Polymer Project</strong><br />
_Edit description_www.polymer-project.org</a><a href="https://www.polymer-project.org/" target="_blank" rel="noopener noreferrer"></a></p>
<p>あとこの本に詳しい解説が載ってるので買って読むと良いと思います(宣伝)</p>
<p><a href="https://inutetraplus.booth.pm/items/1041988" title="https://inutetraplus.booth.pm/items/1041988" target="_blank" rel="noopener noreferrer"><strong>イヌでもわかるWeb Components 改訂版 - 犬テトラ+ - BOOTH(同人誌通販・ダウンロード)</strong><br />
_「イヌでもわかるWeb Components」の内容を大幅に改定しました! ・Polymer2.0から3.0へアップグレード ・最新の動向を反映 ・lit-htmlの章を追加 Web…_inutetraplus.booth.pm</a><a href="https://inutetraplus.booth.pm/items/1041988" target="_blank" rel="noopener noreferrer"></a></p>
<h2 id="%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9F%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88" tabindex="-1">使用したコンポーネント</h2>
<h3 id="%40polymer%2Firon-ajax" tabindex="-1"><strong>@polymer/iron-ajax</strong></h3>
<p><a href="https://www.webcomponents.org/element/@polymer/iron-ajax" title="https://www.webcomponents.org/element/@polymer/iron-ajax" target="_blank" rel="noopener noreferrer"><strong>PolymerElements/iron-ajax (3.0.1)</strong><br />
_Easily make ajax requests_www.webcomponents.org</a><a href="https://www.webcomponents.org/element/@polymer/iron-ajax" target="_blank" rel="noopener noreferrer"></a></p>
<p>その名の通りajax通信するためのコンポーネント。</p>
<p>コンポーネントからAPIにアクセスし、結果を直接他のコンポーネントに渡せる。JavaSriptを書かなくて良いので、詳しくない人にとっては良いかも。</p>
<p>ローディング中とかも判定できる。</p>
<h2 id="polymer-starter-kit" tabindex="-1">polymer-starter-kit</h2>
<p><a href="https://github.com/Polymer/polymer-starter-kit" title="https://github.com/Polymer/polymer-starter-kit" target="_blank" rel="noopener noreferrer"><strong>Polymer/polymer-starter-kit</strong><br />
_A starting point for Polymer apps. Contribute to Polymer/polymer-starter-kit development by creating an account on…_github.com</a><a href="https://github.com/Polymer/polymer-starter-kit" target="_blank" rel="noopener noreferrer"></a></p>
<p>Polymer 3.0でアプリケーションを作るための雛形。</p>
<p>こういうのあるとアプリケーション作りやすくて助かる。</p>
<p>今回app-drawerは使用しなかった。</p>
<h2 id="%E5%9B%B0%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8" tabindex="-1">困ったこと</h2>
<h3 id="%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0%E3%81%AE%E6%89%B1%E3%81%84" tabindex="-1">環境変数の扱い</h3>
<p>今回、contentfulでコンテンツの管理をしているのだけど、polymer cli に環境変数を渡すことができずアクセストークンが見えてしまうので困った。</p>
<p>結局環境変数を渡すにはwebpackを使うしかなさそうで、それはちょっとめんどくさかったので、BFFを作りcontentfulへのアクセスはBFFから行うようにした。</p>
<p>BFFはnow.shにデプロイした。無料で使えるなんて素敵。</p>
<p>webpack使うならこいつが参考になりそう。</p>
<p><a href="https://github.com/PolymerX/polymer-skeleton" title="https://github.com/PolymerX/polymer-skeleton" target="_blank" rel="noopener noreferrer"><strong>PolymerX/polymer-skeleton</strong><br />
_skull: Skeleton for Polymer 3 app with Webpack, PostCSS and Service Workers ready. - PolymerX/polymer-skeleton_github.com</a><a href="https://github.com/PolymerX/polymer-skeleton" target="_blank" rel="noopener noreferrer"></a></p>
<h2 id="%E4%BD%BF%E3%82%8F%E3%81%AA%E3%81%8B%E3%81%A3%E3%81%9F%E3%81%91%E3%81%A9%E4%BD%BF%E3%81%88%E3%81%9D%E3%81%86%E3%81%AA%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88" tabindex="-1">使わなかったけど使えそうなコンポーネント</h2>
<p>今回使わなかったけど使えそうなコンポーネントたちをご紹介。</p>
<h3 id="ally%E9%96%A2%E9%80%A3" tabindex="-1">ally関連</h3>
<p><a href="https://www.webcomponents.org/element/@polymer/iron-a11y-announcer" title="https://www.webcomponents.org/element/@polymer/iron-a11y-announcer" target="_blank" rel="noopener noreferrer"><strong>PolymerElements/iron-a11y-announcer (3.0.2)</strong><br />
_An element that helps with announcing text through screen readers._www.webcomponents.org</a><a href="https://www.webcomponents.org/element/@polymer/iron-a11y-announcer" target="_blank" rel="noopener noreferrer"></a></p>
<p><a href="https://www.webcomponents.org/element/@polymer/iron-a11y-keys-behavior" title="https://www.webcomponents.org/element/@polymer/iron-a11y-keys-behavior" target="_blank" rel="noopener noreferrer"><strong>PolymerElements/iron-a11y-keys-behavior (3.0.1)</strong><br />
_A behavior that enables keybindings for greater a11y_www.webcomponents.org</a><a href="https://www.webcomponents.org/element/@polymer/iron-a11y-keys-behavior" target="_blank" rel="noopener noreferrer"></a></p>
<p><a href="https://www.webcomponents.org/element/@polymer/iron-a11y-keys" title="https://www.webcomponents.org/element/@polymer/iron-a11y-keys" target="_blank" rel="noopener noreferrer"><strong>webcomponents.org - Discuss & share web components</strong><br />
_Edit description_www.webcomponents.org</a><a href="https://www.webcomponents.org/element/@polymer/iron-a11y-keys" target="_blank" rel="noopener noreferrer"></a></p>
<h3 id="%E5%9B%BD%E9%9A%9B%E5%8C%96%E5%AF%BE%E5%BF%9C" tabindex="-1">国際化対応</h3>
<p><a href="https://www.webcomponents.org/element/@polymer/app-localize-behavior" title="https://www.webcomponents.org/element/@polymer/app-localize-behavior" target="_blank" rel="noopener noreferrer"><strong>PolymerElements/app-localize-behavior (3.0.1)</strong><br />
_Polymer behaviour to help internationalize your application_www.webcomponents.org</a><a href="https://www.webcomponents.org/element/@polymer/app-localize-behavior" target="_blank" rel="noopener noreferrer"></a></p>
<h3 id="web-animations" tabindex="-1">Web Animations</h3>
<p><a href="https://www.webcomponents.org/element/@polymer/neon-animation" title="https://www.webcomponents.org/element/@polymer/neon-animation" target="_blank" rel="noopener noreferrer"><strong>PolymerElements/neon-animation (3.0.1)</strong><br />
_Polymer + Web Animations_www.webcomponents.org</a><a href="https://www.webcomponents.org/element/@polymer/neon-animation" target="_blank" rel="noopener noreferrer"></a></p>
<h3 id="marked" tabindex="-1">marked</h3>
<p><a href="https://www.webcomponents.org/element/@polymer/marked-element" title="https://www.webcomponents.org/element/@polymer/marked-element" target="_blank" rel="noopener noreferrer"><strong>PolymerElements/marked-element (3.0.1)</strong><br />
_Element wrapper for the marked library_www.webcomponents.org</a><a href="https://www.webcomponents.org/element/@polymer/marked-element" target="_blank" rel="noopener noreferrer"></a></p>
<h3 id="toast" tabindex="-1">toast</h3>
<p><a href="https://www.webcomponents.org/element/@polymer/paper-toast" title="https://www.webcomponents.org/element/@polymer/paper-toast" target="_blank" rel="noopener noreferrer"><strong>PolymerElements/paper-toast (3.0.1)</strong><br />
_A Material Design popup toast_www.webcomponents.org</a><a href="https://www.webcomponents.org/element/@polymer/paper-toast" target="_blank" rel="noopener noreferrer"></a></p>
<h3 id="%E3%83%AA%E3%82%B5%E3%82%A4%E3%82%BA%E3%82%92%E7%9B%A3%E8%A6%96%E3%81%97%E3%81%A6%E3%81%8F%E3%82%8C%E3%82%8B%E3%82%84%E3%81%A4" tabindex="-1">リサイズを監視してくれるやつ</h3>
<p><a href="https://www.webcomponents.org/element/@polymer/iron-resizable-behavior" title="https://www.webcomponents.org/element/@polymer/iron-resizable-behavior" target="_blank" rel="noopener noreferrer"><strong>PolymerElements/iron-resizable-behavior (3.0.1)</strong><br />
_Edit description_www.webcomponents.org</a><a href="https://www.webcomponents.org/element/@polymer/iron-resizable-behavior" target="_blank" rel="noopener noreferrer"></a></p>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81" tabindex="-1">まとめ</h2>
<p>まあふつうにアプリケーション作れるなーという感じ。</p>
<p><strong>LitElement v1.0 早く来い。</strong></p>
2018-12-24T17:30:07Z
/posts/2018-12-24_----------------------4c9bad54c80/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#%E7%9B%AE%E7%9A%84">目的</a></li><li><a href="#%E6%B4%BB%E5%8B%95">活動</a></li><li><a href="#%E3%83%A1%E3%83%B3%E3%83%90%E3%83%BC%E5%8B%9F%E9%9B%86">メンバー募集</a></li></ul></details><p></p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*uQQqrREfbWnOzynRy_FntQ.png" alt="" loading="lazy" /></p>
<p><strong>ウェブフォント Advent Calendar 2018 25日目の記事です。</strong></p>
<p><a href="https://adventar.org/calendars/2911" title="https://adventar.org/calendars/2911" target="_blank" rel="noopener noreferrer"><strong>ウェブフォント Advent Calendar 2018 - Adventar</strong><br />
_ウェブフォントについてのあれこれ 好きなフォントの話をしてもいいし実装のことについて話しても良い_adventar.org</a><a href="https://adventar.org/calendars/2911" target="_blank" rel="noopener noreferrer"></a></p>
<p>はい、作ります。</p>
<p>特に許可は得てないけど、商標は登録されてないっぽかったので大丈夫でしょう。</p>
<h2 id="%E7%9B%AE%E7%9A%84" tabindex="-1">目的</h2>
<p>フォントが好きだから、です。</p>
<p>ウェブフォントはWebの表現をより豊かにする、とても素晴らしい技術です。</p>
<p>これまでウェブサイトやウェブアプリケーションで使えるフォントには限りがありましたが、ネットワーク技術やブラウザの進歩、各フォントベンダー企業の努力などにより、ウェブフォントが実用できるようになってきました。</p>
<p>しかし、ウェブフォントは使い方が難しく、正しく使わないとユーザーにネガティブな印象を与えてしまいます。</p>
<p>実際、そういった間違った使い方をしているサイトに多く巡り合ってしまったためにウェブフォントにネガティブな印象を持っている人が多く見受けられます。</p>
<p>これは非常に残念なことです。</p>
<p>こういった状況を打破するためには、エンジニアやデザイナーがウェブフォントに詳しくなり、ユーザーに不快感を与えない実装ができるようになる以外の道はないと考えています。</p>
<p>そのために僕は日本ウェブフォント協会を設立し、エンジニア・デザイナーへのウェブフォント啓蒙活動をしていくとともに、ウェブフォントへの誤ったイメージを払拭できれば良いなと思っています。</p>
<h2 id="%E6%B4%BB%E5%8B%95" tabindex="-1">活動</h2>
<p>予定は未定です。来年くらいから動きます。多分。</p>
<p>おそらくはブログ書いたり勉強会開いたりするんだと思います。何かしらはやります。たぶん。</p>
<p>とりあえずこのウェブサイトのコンテンツを拡充させたいですね。</p>
<p><a href="https://jwfa.netlify.com/" title="https://jwfa.netlify.com/" target="_blank" rel="noopener noreferrer"><strong>Japan Web Font Association</strong><br />
_Website | Japan Web Font Association_jwfa.netlify.com</a><a href="https://jwfa.netlify.com/" target="_blank" rel="noopener noreferrer"></a></p>
<p>僕もまだまだ勉強必要なので、みんなで勉強していけたら良いなと思っています。バリアブルフォントとか全然わからない。</p>
<h2 id="%E3%83%A1%E3%83%B3%E3%83%90%E3%83%BC%E5%8B%9F%E9%9B%86" tabindex="-1">メンバー募集</h2>
<p>ということで、今のところメンバー僕しかいません。</p>
<p>一緒にやってあげるよっていう神様のような人がいたらぜひツイッターのDMとかで連絡ください。</p>
<p><a href="https://twitter.com/takanoripe" title="https://twitter.com/takanoripe" target="_blank" rel="noopener noreferrer"><strong>takanorip (@takanoripe) | Twitter</strong><br />
_The latest Tweets from takanorip (@takanoripe). 都内でフロントエンドエンジニアやってます。. 東京 港区_twitter.com</a><a href="https://twitter.com/takanoripe" target="_blank" rel="noopener noreferrer"></a></p>
<p>一緒にウェブフォント界隈を盛り上げていきましょう。</p>
2019-01-04T16:58:58Z
/posts/2019-01-04_-----------------21706db78a3/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#%E4%B9%B1%E8%AA%AD%E3%81%AE%E3%82%BB%E3%83%AC%E3%83%B3%E3%83%87%E3%82%A3%E3%83%94%E3%83%86%E3%82%A3">乱読のセレンディピティ</a></li><li><a href="#%E6%80%9D%E8%80%83%E3%81%AE%E6%95%B4%E7%90%86%E5%AD%A6">思考の整理学</a></li><li><a href="#%E3%83%89%E3%83%9F%E3%83%8E">ドミノ</a></li><li><a href="#%E6%81%8B%E6%96%87%E3%81%AE%E6%8A%80%E8%A1%93">恋文の技術</a></li><li><a href="#%E6%96%B0%E9%87%88-%E8%B5%B0%E3%82%8C%E3%83%A1%E3%83%AD%E3%82%B9">新釈 走れメロス</a></li><li><a href="#%E3%82%A2%E3%82%A4%E3%83%87%E3%82%A2%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9">アイデアの作り方</a></li><li><a href="#%E4%BB%8A%E6%97%A5%E3%82%82%E5%A8%98%E3%81%A8%E3%80%82">今日も娘と。</a></li></ul></details><p></p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*RvgZv8tMFb18sNtaYAb9aA.jpeg" alt="" loading="lazy" /></p>
<h2 id="%E4%B9%B1%E8%AA%AD%E3%81%AE%E3%82%BB%E3%83%AC%E3%83%B3%E3%83%87%E3%82%A3%E3%83%94%E3%83%86%E3%82%A3" tabindex="-1">乱読のセレンディピティ</h2>
<p>著者:外山滋比古</p>
<p><a href="https://www.amazon.co.jp/%E4%B9%B1%E8%AA%AD%E3%81%AE%E3%82%BB%E3%83%AC%E3%83%B3%E3%83%87%E3%82%A3%E3%83%94%E3%83%86%E3%82%A3%E3%80%90%E6%96%87%E5%BA%AB%E9%9B%BB%E5%AD%90%E7%89%88%E3%80%91-%E6%89%B6%E6%A1%91%E7%A4%BE%EF%BC%A2%EF%BC%AF%EF%BC%AF%EF%BC%AB%EF%BC%B3%E6%96%87%E5%BA%AB-%E5%A4%96%E5%B1%B1-%E6%BB%8B%E6%AF%94%E5%8F%A4-ebook/dp/B01M2ZNNSS/ref=tmm_kin_swatch_0?_encoding=UTF8&qid=&sr=" title="https://www.amazon.co.jp/%E4%B9%B1%E8%AA%AD%E3%81%AE%E3%82%BB%E3%83%AC%E3%83%B3%E3%83%87%E3%82%A3%E3%83%94%E3%83%86%E3%82%A3%E3%80%90%E6%96%87%E5%BA%AB%E9%9B%BB%E5%AD%90%E7%89%88%E3%80%91-%E6%89%B6%E6%A1%91%E7%A4%BE%EF%BC%A2%EF%BC%AF%EF%BC%AF%EF%BC%AB%EF%BC%B3%E6%96%87%E5%BA%AB-%E5%A4%96%E5%B1%B1-%E6%BB%8B%E6%AF%94%E5%8F%A4-ebook/dp/B01M2ZNNSS/ref=tmm_kin_swatch_0?_encoding=UTF8&qid=&sr=" target="_blank" rel="noopener noreferrer"><strong>乱読のセレンディピティ【文庫電子版】 (扶桑社BOOKS文庫)</strong><br />
_Amazonで外山 滋比古の{ProductTitle}。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただけます。_www.amazon.co.jp</a><a href="https://www.amazon.co.jp/%E4%B9%B1%E8%AA%AD%E3%81%AE%E3%82%BB%E3%83%AC%E3%83%B3%E3%83%87%E3%82%A3%E3%83%94%E3%83%86%E3%82%A3%E3%80%90%E6%96%87%E5%BA%AB%E9%9B%BB%E5%AD%90%E7%89%88%E3%80%91-%E6%89%B6%E6%A1%91%E7%A4%BE%EF%BC%A2%EF%BC%AF%EF%BC%AF%EF%BC%AB%EF%BC%B3%E6%96%87%E5%BA%AB-%E5%A4%96%E5%B1%B1-%E6%BB%8B%E6%AF%94%E5%8F%A4-ebook/dp/B01M2ZNNSS/ref=tmm_kin_swatch_0?_encoding=UTF8&qid=&sr=" target="_blank" rel="noopener noreferrer"></a></p>
<h2 id="%E6%80%9D%E8%80%83%E3%81%AE%E6%95%B4%E7%90%86%E5%AD%A6" tabindex="-1">思考の整理学</h2>
<p>著者:外山滋比古</p>
<p><a href="https://www.amazon.co.jp/%E6%80%9D%E8%80%83%E3%81%AE%E6%95%B4%E7%90%86%E5%AD%A6-%E3%81%A1%E3%81%8F%E3%81%BE%E6%96%87%E5%BA%AB-%E5%A4%96%E5%B1%B1%E6%BB%8B%E6%AF%94%E5%8F%A4-ebook/dp/B00E5XATVS/ref=pd_sbs_351_1?_encoding=UTF8&pd_rd_i=B00E5XATVS&pd_rd_r=f2b40d2f-0ff9-11e9-bac0-fb17b6fd45e3&pd_rd_w=0Fgvq&pd_rd_wg=52EVB&pf_rd_p=cda7018a-662b-401f-9c16-bd4ec317039e&pf_rd_r=2BY7YBYJN33D3SNMWZZJ&psc=1&refRID=2BY7YBYJN33D3SNMWZZJ" title="https://www.amazon.co.jp/%E6%80%9D%E8%80%83%E3%81%AE%E6%95%B4%E7%90%86%E5%AD%A6-%E3%81%A1%E3%81%8F%E3%81%BE%E6%96%87%E5%BA%AB-%E5%A4%96%E5%B1%B1%E6%BB%8B%E6%AF%94%E5%8F%A4-ebook/dp/B00E5XATVS/ref=pd_sbs_351_1?_encoding=UTF8&pd_rd_i=B00E5XATVS&pd_rd_r=f2b40d2f-0ff9-11e9-bac0-fb17b6fd45e3&pd_rd_w=0Fgvq&pd_rd_wg=52EVB&pf_rd_p=cda7018a-662b-401f-9c16-bd4ec317039e&pf_rd_r=2BY7YBYJN33D3SNMWZZJ&psc=1&refRID=2BY7YBYJN33D3SNMWZZJ" target="_blank" rel="noopener noreferrer"><strong>思考の整理学 (ちくま文庫)</strong><br />
_Amazon.co.jp: 思考の整理学 (ちくま文庫) eBook: 外山滋比古: Kindleストア_www.amazon.co.jp</a><a href="https://www.amazon.co.jp/%E6%80%9D%E8%80%83%E3%81%AE%E6%95%B4%E7%90%86%E5%AD%A6-%E3%81%A1%E3%81%8F%E3%81%BE%E6%96%87%E5%BA%AB-%E5%A4%96%E5%B1%B1%E6%BB%8B%E6%AF%94%E5%8F%A4-ebook/dp/B00E5XATVS/ref=pd_sbs_351_1?_encoding=UTF8&pd_rd_i=B00E5XATVS&pd_rd_r=f2b40d2f-0ff9-11e9-bac0-fb17b6fd45e3&pd_rd_w=0Fgvq&pd_rd_wg=52EVB&pf_rd_p=cda7018a-662b-401f-9c16-bd4ec317039e&pf_rd_r=2BY7YBYJN33D3SNMWZZJ&psc=1&refRID=2BY7YBYJN33D3SNMWZZJ" target="_blank" rel="noopener noreferrer"></a></p>
<h2 id="%E3%83%89%E3%83%9F%E3%83%8E" tabindex="-1">ドミノ</h2>
<p>著者:恩田陸</p>
<p><a href="https://www.amazon.co.jp/dp/B009GPM6MK/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1" title="https://www.amazon.co.jp/dp/B009GPM6MK/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1" target="_blank" rel="noopener noreferrer"><strong>ドミノ (角川文庫)</strong><br />
_Amazonで恩田 陸の{ProductTitle}。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただけます。_www.amazon.co.jp</a><a href="https://www.amazon.co.jp/dp/B009GPM6MK/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1" target="_blank" rel="noopener noreferrer"></a></p>
<h2 id="%E6%81%8B%E6%96%87%E3%81%AE%E6%8A%80%E8%A1%93" tabindex="-1">恋文の技術</h2>
<p>著者:森見登美彦</p>
<p><a href="https://www.amazon.co.jp/%E3%82%82-3-1-%E6%81%8B%E6%96%87%E3%81%AE%E6%8A%80%E8%A1%93-%E3%83%9D%E3%83%97%E3%83%A9%E6%96%87%E5%BA%AB/dp/4591124215/ref=sr_1_11?rps=1&ie=UTF8&qid=1546620177&sr=8-11&keywords=%E6%A3%AE%E8%A6%8B%E7%99%BB%E7%BE%8E%E5%BD%A6&refinements=p_76%3A2227292051" title="https://www.amazon.co.jp/%E3%82%82-3-1-%E6%81%8B%E6%96%87%E3%81%AE%E6%8A%80%E8%A1%93-%E3%83%9D%E3%83%97%E3%83%A9%E6%96%87%E5%BA%AB/dp/4591124215/ref=sr_1_11?rps=1&ie=UTF8&qid=1546620177&sr=8-11&keywords=%E6%A3%AE%E8%A6%8B%E7%99%BB%E7%BE%8E%E5%BD%A6&refinements=p_76%3A2227292051" target="_blank" rel="noopener noreferrer"><strong>([も]3-1)恋文の技術 (ポプラ文庫)</strong><br />
_Amazonで森見 登美彦の([も]3-1)恋文の技術 (ポプラ文庫)。アマゾンならポイント還元本が多数。森見 登美彦作品ほか、お急ぎ便対象商品は当日お届けも可能。また([も]3-1)恋文の技術…_www.amazon.co.jp</a><a href="https://www.amazon.co.jp/%E3%82%82-3-1-%E6%81%8B%E6%96%87%E3%81%AE%E6%8A%80%E8%A1%93-%E3%83%9D%E3%83%97%E3%83%A9%E6%96%87%E5%BA%AB/dp/4591124215/ref=sr_1_11?rps=1&ie=UTF8&qid=1546620177&sr=8-11&keywords=%E6%A3%AE%E8%A6%8B%E7%99%BB%E7%BE%8E%E5%BD%A6&refinements=p_76%3A2227292051" target="_blank" rel="noopener noreferrer"></a></p>
<h2 id="%E6%96%B0%E9%87%88-%E8%B5%B0%E3%82%8C%E3%83%A1%E3%83%AD%E3%82%B9" tabindex="-1">新釈 走れメロス</h2>
<p>著者:森見登美彦</p>
<p><a href="https://www.amazon.co.jp/%E6%96%B0%E9%87%88-%E8%B5%B0%E3%82%8C%E3%83%A1%E3%83%AD%E3%82%B9-%E4%BB%96%E5%9B%9B%E7%AF%87-%E8%A7%92%E5%B7%9D%E6%96%87%E5%BA%AB-%E7%99%BB%E7%BE%8E%E5%BD%A6/dp/4041033691/ref=sr_1_12?rps=1&ie=UTF8&qid=1546620177&sr=8-12&keywords=%E6%A3%AE%E8%A6%8B%E7%99%BB%E7%BE%8E%E5%BD%A6&refinements=p_76%3A2227292051" title="https://www.amazon.co.jp/%E6%96%B0%E9%87%88-%E8%B5%B0%E3%82%8C%E3%83%A1%E3%83%AD%E3%82%B9-%E4%BB%96%E5%9B%9B%E7%AF%87-%E8%A7%92%E5%B7%9D%E6%96%87%E5%BA%AB-%E7%99%BB%E7%BE%8E%E5%BD%A6/dp/4041033691/ref=sr_1_12?rps=1&ie=UTF8&qid=1546620177&sr=8-12&keywords=%E6%A3%AE%E8%A6%8B%E7%99%BB%E7%BE%8E%E5%BD%A6&refinements=p_76%3A2227292051" target="_blank" rel="noopener noreferrer"><strong>新釈 走れメロス 他四篇 (角川文庫)</strong><br />
_Amazonで森見 登美彦の新釈 走れメロス 他四篇 (角川文庫)。アマゾンならポイント還元本が多数。森見 登美彦作品ほか、お急ぎ便対象商品は当日お届けも可能。また新釈 走れメロス 他四篇 (角川文庫)もアマゾン配送商品なら通常配送無料。_www.amazon.co.jp</a><a href="https://www.amazon.co.jp/%E6%96%B0%E9%87%88-%E8%B5%B0%E3%82%8C%E3%83%A1%E3%83%AD%E3%82%B9-%E4%BB%96%E5%9B%9B%E7%AF%87-%E8%A7%92%E5%B7%9D%E6%96%87%E5%BA%AB-%E7%99%BB%E7%BE%8E%E5%BD%A6/dp/4041033691/ref=sr_1_12?rps=1&ie=UTF8&qid=1546620177&sr=8-12&keywords=%E6%A3%AE%E8%A6%8B%E7%99%BB%E7%BE%8E%E5%BD%A6&refinements=p_76%3A2227292051" target="_blank" rel="noopener noreferrer"></a></p>
<h2 id="%E3%82%A2%E3%82%A4%E3%83%87%E3%82%A2%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9" tabindex="-1">アイデアの作り方</h2>
<p>著者:ジェームス・W・ヤング</p>
<p><a href="http://amzn.asia/d/8hRm5Dp" title="http://amzn.asia/d/8hRm5Dp" target="_blank" rel="noopener noreferrer"><strong>アイデアのつくり方</strong><br />
_Amazonでジェームス W.ヤング, 竹内 均, 今井 茂雄のアイデアのつくり方。アマゾンならポイント還元本が多数。ジェームス W.ヤング, 竹内 均, 今井…_amzn.asia</a><a href="http://amzn.asia/d/8hRm5Dp" target="_blank" rel="noopener noreferrer"></a></p>
<h2 id="%E4%BB%8A%E6%97%A5%E3%82%82%E5%A8%98%E3%81%A8%E3%80%82" tabindex="-1">今日も娘と。</h2>
<p>著者:ヒョーゴノスケ</p>
<p><a href="https://www.amazon.co.jp/dp/B07B4S8S1P/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1" title="https://www.amazon.co.jp/dp/B07B4S8S1P/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1" target="_blank" rel="noopener noreferrer"><strong>今日も娘と。 (コミックエッセイ)</strong><br />
_どこにでもいる父と娘の、今この瞬間にしかない大切なもの――。ツイッターで誰&..._www.amazon.co.jp</a><a href="https://www.amazon.co.jp/dp/B07B4S8S1P/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1" target="_blank" rel="noopener noreferrer"></a></p>
2019-02-09T18:04:30Z
/posts/2019-02-09_Figma---------38d96496562f/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#%E3%81%AA%E3%82%93%E3%81%A7figma%E3%81%A0%E3%81%A3%E3%81%9F%E3%81%AE%EF%BC%9F">なんでFigmaだったの?</a></li><li><a href="#%E8%89%AF%E3%81%8B%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8">良かったこと</a></li><li><a href="#%E4%B8%8D%E4%BE%BF%E3%81%AA%E3%81%A8%E3%81%93">不便なとこ</a></li><li><a href="#%E6%84%9F%E6%83%B3">感想</a></li></ul></details><p></p>
<p>このまえ創刊した雑誌の組版、デザインをFigmaでやってみたので感想をまとめようと思います。</p>
<p>まだ在庫あるので皆さん買ってください。あと感想お待ちしてます。</p>
<p><a href="https://inutetraplus.booth.pm/items/1199029" title="https://inutetraplus.booth.pm/items/1199029" target="_blank" rel="noopener noreferrer"><strong>read_your_document.JS vol.1 - 犬テトラ+ 出版社 - BOOTH</strong><br />
_隔月発行のJavaScript専門誌「read_your_document.JS」創刊号。 @takanoripe @better_than_i_w @erukiti などJS大好きな人たちが書いてます。…_inutetraplus.booth.pm</a><a href="https://inutetraplus.booth.pm/items/1199029" target="_blank" rel="noopener noreferrer"></a></p>
<h2 id="%E3%81%AA%E3%82%93%E3%81%A7figma%E3%81%A0%E3%81%A3%E3%81%9F%E3%81%AE%EF%BC%9F" tabindex="-1">なんでFigmaだったの?</h2>
<p>Figmaを使った理由は次の3つです。</p>
<ul>
<li>ファイルの共有を簡単に行いたかったから</li>
<li>誰でも編集できるようにしたかったから</li>
<li>PDFで書き出しをしたかったから</li>
</ul>
<h2 id="%E8%89%AF%E3%81%8B%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8" tabindex="-1">良かったこと</h2>
<p>上記の3つは良かったことですね。</p>
<p>URLを共有すれば誰でもファイルを閲覧できるし、アートボードを指定して共有もできるので、表紙のデザインとか本文の構成とかを見てもらうときに便利でした。<br />
あと共有したファイルは常に最新なのでバージョン管理とかに悩まなくて良かったです。</p>
<p>やっぱFigmaは最強のcollaborationツールだな!って感じです。</p>
<p>機能的にも十分で、とくに大きな問題はありませんでした。<br />
使いまわせそうなレイアウトはコンポーネントとして登録するとめちゃ便利でした。</p>
<h2 id="%E4%B8%8D%E4%BE%BF%E3%81%AA%E3%81%A8%E3%81%93" tabindex="-1">不便なとこ</h2>
<p>逆に不便だなーと思ったのは次のようなことでした。</p>
<ul>
<li>縦書きができない、やりにくい</li>
<li>単位がPixelだけなので、mm単位の操作がやりにくい</li>
<li>書き出されたPDFのデータを印刷すると、なぜか印刷されない部分があった</li>
</ul>
<p>今回は縦書きの部分はなかったのですが、今後やりたくなったときに困りそうだなーと思いました。</p>
<p>mm単位で考えるのは正直とてもめんどくさかったので、ふつうにピクセル単位でデザインしました。</p>
<p>今回1番困ったのは3つ目のやつで、これはFigmaの書き出したPDFに問題があるのか、僕のPCがいけないのか、それともプリンタの問題かよくわからなかったので、解決を諦めました。<br />
次も同じようなことがあったらちゃんと検証したいです。</p>
<h2 id="%E6%84%9F%E6%83%B3" tabindex="-1">感想</h2>
<p>PDF書き出しがサポートされたことでDTPデザインもある程度いけるやん!って感じでした。<br />
(入稿ファイルの形式でPDFがサポートされていれば、ですが…)</p>
<p>今回はキンコーズで印刷したのでPDFで特に問題ありませんでした。</p>
<p>今後も使い続けていこうかなって思ってます。</p>
2019-02-10T09:16:29Z
/posts/2019-02-10_-------12714e0945f6/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#1.-%E5%89%B5%E9%80%A0%E3%81%AE%E6%96%B9%E6%B3%95%E5%AD%A6">1. 創造の方法学</a></li><li><a href="#2.-%E3%80%88%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%8D%E3%83%83%E3%83%88%E3%80%89%E3%81%AE%E6%AC%A1%E3%81%AB%E6%9D%A5%E3%82%8B%E3%82%82%E3%81%AE-%E6%9C%AA%E6%9D%A5%E3%82%92%E6%B1%BA%E3%82%81%E3%82%8B%EF%BC%91%EF%BC%92%E3%81%AE%E6%B3%95%E5%89%87">2. 〈インターネット〉の次に来るもの 未来を決める12の法則</a></li><li><a href="#3.-%E3%81%AA%E3%82%8B%E3%81%BB%E3%81%A9%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3">3. なるほどデザイン</a></li><li><a href="#4.-%E6%9A%87%E3%81%A8%E9%80%80%E5%B1%88%E3%81%AE%E5%80%AB%E7%90%86%E5%AD%A6">4. 暇と退屈の倫理学</a></li><li><a href="#5.-%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3">5. デザインのデザイン</a></li><li><a href="#6.-%E3%82%B9%E3%83%9A%E3%82%AD%E3%83%A5%E3%83%A9%E3%83%86%E3%82%A3%E3%83%96%E3%83%BB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3">6. スペキュラティブ・デザイン</a></li><li><a href="#7.-%E3%81%9F%E3%81%AE%E3%81%97%E3%81%84%E3%83%AD%E3%82%B4%E3%81%A5%E3%81%8F%E3%82%8A">7. たのしいロゴづくり</a></li><li><a href="#8.-%E3%83%AD%E3%82%B4-%E3%83%AD%E3%82%B8%E3%83%83%E3%82%AF">8. ロゴ ロジック</a></li><li><a href="#9.-%E8%9E%8D%E3%81%91%E3%82%8B%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-%E2%80%95%E3%83%8F%E3%83%BC%E3%83%89%C3%97%E3%82%BD%E3%83%95%E3%83%88%C3%97%E3%83%8D%E3%83%83%E3%83%88%E6%99%82%E4%BB%A3%E3%81%AE%E6%96%B0%E3%81%9F%E3%81%AA%E8%A8%AD%E8%A8%88%E8%AB%96">9. 融けるデザイン ―ハード×ソフト×ネット時代の新たな設計論</a></li><li><a href="#10.-design-systems">10. Design Systems</a></li><li><a href="#11.-%E7%99%BD%E3%81%A8%E9%BB%92%E3%81%AE%E3%81%A8%E3%81%B3%E3%82%89%3A-%E3%82%AA%E3%83%BC%E3%83%88%E3%83%9E%E3%83%88%E3%83%B3%E3%81%A8%E5%BD%A2%E5%BC%8F%E8%A8%80%E8%AA%9E%E3%82%92%E3%82%81%E3%81%90%E3%82%8B%E5%86%92%E9%99%BA">11. 白と黒のとびら: オートマトンと形式言語をめぐる冒険</a></li></ul></details><p></p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*I-UjKTvdcbm5Oe9R2P0o7g.png" alt="" loading="lazy" /></p>
<h2 id="1.-%E5%89%B5%E9%80%A0%E3%81%AE%E6%96%B9%E6%B3%95%E5%AD%A6" tabindex="-1">1. 創造の方法学</h2>
<p><a href="https://www.amazon.co.jp/dp/4061455532/ref=cm_sw_r_tw_dp_U_x_EL9xCb8XYKPV6" title="https://www.amazon.co.jp/dp/4061455532/ref=cm_sw_r_tw_dp_U_x_EL9xCb8XYKPV6" target="_blank" rel="noopener noreferrer"><strong>創造の方法学 (講談社現代新書)</strong><br />
_Amazonで高根 正昭の創造の方法学 (講談社現代新書)。アマゾンならポイント還元本が多数。高根 正昭作品ほか、お急ぎ便対象商品は当日お届けも可能。また創造の方法学 (講談社現代新書)もアマゾン配送商品なら通常配送無料。_www.amazon.co.jp</a><a href="https://www.amazon.co.jp/dp/4061455532/ref=cm_sw_r_tw_dp_U_x_EL9xCb8XYKPV6" target="_blank" rel="noopener noreferrer"></a></p>
<p>Twitterで見て買った。</p>
<p>ちょっと文章が硬かったけど、内容はとても勉強になるものだった。</p>
<p>この本では社会学の調査手法について述べられているけど、この手法は現在行われているマーケティングやUXの検証などにも応用できそう。</p>
<h2 id="2.-%E3%80%88%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%8D%E3%83%83%E3%83%88%E3%80%89%E3%81%AE%E6%AC%A1%E3%81%AB%E6%9D%A5%E3%82%8B%E3%82%82%E3%81%AE-%E6%9C%AA%E6%9D%A5%E3%82%92%E6%B1%BA%E3%82%81%E3%82%8B%EF%BC%91%EF%BC%92%E3%81%AE%E6%B3%95%E5%89%87" tabindex="-1">2. 〈インターネット〉の次に来るもの 未来を決める12の法則</h2>
<p><a href="https://www.amazon.co.jp/dp/4140817046/ref=cm_sw_r_tw_dp_U_x_iN9xCb4VDPGTJ" title="https://www.amazon.co.jp/dp/4140817046/ref=cm_sw_r_tw_dp_U_x_iN9xCb4VDPGTJ" target="_blank" rel="noopener noreferrer"><strong>〈インターネット〉の次に来るもの 未来を決める12の法則</strong><br />
_Amazonでケヴィン・ケリー, 服部 桂の〈インターネット〉の次に来るもの 未来を決める12の法則。アマゾンならポイント還元本が多数。ケヴィン・ケリー, 服部…_www.amazon.co.jp</a><a href="https://www.amazon.co.jp/dp/4140817046/ref=cm_sw_r_tw_dp_U_x_iN9xCb4VDPGTJ" target="_blank" rel="noopener noreferrer"></a></p>
<p>知人に薦められて買おうと思っていたけど忘れていたので買った。</p>
<p>WIREDの創刊編集長を務めたケヴィン・ケリー氏がインターネットの現状とこれからどうなっていくのかという展望を書いた本。</p>
<p>インターネット上の評価はとても高いが、個人的にはあまり意外性がなく面白みに欠けた。途中で飽きてしまったので深く読み込んではいない。気が向いたらまた読んでみようかなという感じ。</p>
<h2 id="3.-%E3%81%AA%E3%82%8B%E3%81%BB%E3%81%A9%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3" tabindex="-1">3. なるほどデザイン</h2>
<p><a href="https://www.amazon.co.jp/dp/4844365177/ref=cm_sw_r_tw_dp_U_x_vO9xCbKESRHRQ" title="https://www.amazon.co.jp/dp/4844365177/ref=cm_sw_r_tw_dp_U_x_vO9xCbKESRHRQ" target="_blank" rel="noopener noreferrer"><strong>なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉</strong><br />
_Amazonで筒井 美希のなるほどデザイン〈目で見て楽しむ新しいデザインの本。〉。アマゾンならポイント還元本が多数。筒井…_www.amazon.co.jp</a><a href="https://www.amazon.co.jp/dp/4844365177/ref=cm_sw_r_tw_dp_U_x_vO9xCbKESRHRQ" target="_blank" rel="noopener noreferrer"></a></p>
<p>雑誌のデザインをするにあたってDTPの知識がほしいなと思って買った。</p>
<p>実例を交えながらリズミカルに解説されていてとても楽しく読めたし、デザインについてより一層理解が深まったように思えた。</p>
<p>DTPに限らず幅広い分野で応用できる知識が詰まっているので、デザインを勉強中の人にはぜひ読んでもらいたい1冊だと思った。</p>
<h2 id="4.-%E6%9A%87%E3%81%A8%E9%80%80%E5%B1%88%E3%81%AE%E5%80%AB%E7%90%86%E5%AD%A6" tabindex="-1">4. 暇と退屈の倫理学</h2>
<p><a href="https://www.amazon.co.jp/dp/4778314379/ref=cm_sw_r_tw_dp_U_x_v19xCbHH5MA0B" title="https://www.amazon.co.jp/dp/4778314379/ref=cm_sw_r_tw_dp_U_x_v19xCbHH5MA0B" target="_blank" rel="noopener noreferrer"><strong>暇と退屈の倫理学 増補新版 (homo Viator)</strong><br />
_Amazonで國分 功一郎の暇と退屈の倫理学 増補新版 (homo Viator)。アマゾンならポイント還元本が多数。國分 功一郎作品ほか、お急ぎ便対象商品は当日お届けも可能。また暇と退屈の倫理学 増補新版 (homo…_www.amazon.co.jp</a><a href="https://www.amazon.co.jp/dp/4778314379/ref=cm_sw_r_tw_dp_U_x_v19xCbHH5MA0B" target="_blank" rel="noopener noreferrer"></a></p>
<p>面白そうなタイトルだったので本屋で衝動買いした。</p>
<p>その期待に反せずとてもおもしろかった。</p>
<p>退屈とは何か?という問いに対して、過去の哲学者の論説を引用したり時にはそれに自らの論説をもって反論してみたりしながら考えをすすめていく。他の哲学者の意見をただ並べるだけでなく、そこに自分の意見を重ねていくことで説得力が増していくなと思った。</p>
<p>この本の中で、哲学に一見関係なさそうに見える他分野の話歴史学や生物学などがいくつも出てくるのも面白かった。</p>
<p>注釈も充実しているし語り口調がやわらかいので、普段哲学書とか読まない人でも楽しめそう。</p>
<h2 id="5.-%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3" tabindex="-1">5. デザインのデザイン</h2>
<p><a href="https://www.amazon.co.jp/dp/4000240056/ref=cm_sw_r_tw_dp_U_x_mq-xCbMC191J3" title="https://www.amazon.co.jp/dp/4000240056/ref=cm_sw_r_tw_dp_U_x_mq-xCbMC191J3" target="_blank" rel="noopener noreferrer"><strong>デザインのデザイン</strong><br />
_Amazonで原 研哉のデザインのデザイン。アマゾンならポイント還元本が多数。原 研哉作品ほか、お急ぎ便対象商品は当日お届けも可能。またデザインのデザインもアマゾン配送商品なら通常配送無料。_www.amazon.co.jp</a><a href="https://www.amazon.co.jp/dp/4000240056/ref=cm_sw_r_tw_dp_U_x_mq-xCbMC191J3" target="_blank" rel="noopener noreferrer"></a></p>
<p>数年前に読んだけどまた読みたくなって買った。(数年前に読んだときは借り物だったので)</p>
<p>やはりとても良い本であり、原研哉さんは偉大なデザイナーだと思った。</p>
<p>彼のようになりたい。</p>
<h2 id="6.-%E3%82%B9%E3%83%9A%E3%82%AD%E3%83%A5%E3%83%A9%E3%83%86%E3%82%A3%E3%83%96%E3%83%BB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3" tabindex="-1">6. スペキュラティブ・デザイン</h2>
<p><a href="https://www.amazon.co.jp/dp/4802510020/ref=cm_sw_r_tw_dp_U_x_Do-xCbK9BG3F2" title="https://www.amazon.co.jp/dp/4802510020/ref=cm_sw_r_tw_dp_U_x_Do-xCbK9BG3F2" target="_blank" rel="noopener noreferrer"><strong>スペキュラティヴ・デザイン 問題解決から、問題提起へ。-未来を思索するためにデザインができること</strong><br />
_Amazonでアンソニー・ダン, フィオーナ・レイビー, 久保田 晃弘, 千葉 敏生のスペキュラティヴ・デザイン 問題解決から、問題提起へ。-未来を思索するためにデザインができること。アマゾンならポイント還元本が多数。アンソニー・ダン…_www.amazon.co.jp</a><a href="https://www.amazon.co.jp/dp/4802510020/ref=cm_sw_r_tw_dp_U_x_Do-xCbK9BG3F2" target="_blank" rel="noopener noreferrer"></a></p>
<p>JSおじさんにおすすめされて買った。これから読む。</p>
<h2 id="7.-%E3%81%9F%E3%81%AE%E3%81%97%E3%81%84%E3%83%AD%E3%82%B4%E3%81%A5%E3%81%8F%E3%82%8A" tabindex="-1">7. たのしいロゴづくり</h2>
<p><a href="https://www.amazon.co.jp/dp/4861008395/ref=cm_sw_r_tw_dp_U_x_Ln-xCb9S516JJ" title="https://www.amazon.co.jp/dp/4861008395/ref=cm_sw_r_tw_dp_U_x_Ln-xCb9S516JJ" target="_blank" rel="noopener noreferrer"><strong>たのしいロゴづくり -文字の形からの着想と展開</strong><br />
_Amazonで甲谷 一のたのしいロゴづくり -文字の形からの着想と展開。アマゾンならポイント還元本が多数。甲谷 一作品ほか、お急ぎ便対象商品は当日お届けも可能。またたのしいロゴづくり…_www.amazon.co.jp</a><a href="https://www.amazon.co.jp/dp/4861008395/ref=cm_sw_r_tw_dp_U_x_Ln-xCb9S516JJ" target="_blank" rel="noopener noreferrer"></a></p>
<p>雑誌や個人のロゴを作りたいなと思って買った。</p>
<p>読み物って感じではなく、ロゴづくりのテクニックがたくさん紹介されていて、実際に手を動かして学んでく感じのやつだった。</p>
<p>僕はこういうノウハウが全然ないのでとても参考になる。</p>
<h2 id="8.-%E3%83%AD%E3%82%B4-%E3%83%AD%E3%82%B8%E3%83%83%E3%82%AF" tabindex="-1">8. ロゴ ロジック</h2>
<p><a href="https://www.amazon.co.jp/dp/4756244254/ref=cm_sw_r_tw_dp_U_x_U79xCbNY6DTKP" title="https://www.amazon.co.jp/dp/4756244254/ref=cm_sw_r_tw_dp_U_x_U79xCbNY6DTKP" target="_blank" rel="noopener noreferrer"><strong><em>ロゴロジック―実例から学ぶロゴデザイン</em></strong><br />
ロゴロジック―実例から学ぶロゴデザインwww.amazon.co.jp</a><a href="https://www.amazon.co.jp/dp/4756244254/ref=cm_sw_r_tw_dp_U_x_U79xCbNY6DTKP" target="_blank" rel="noopener noreferrer"></a></p>
<p>これも雑誌や個人のロゴを作りたいなと思って買った。</p>
<p>ロゴ制作の実例がかなりたくさん載っていて、そのデザインについて解説されている。ロゴのモチーフやなぜそのモチーフを使ったのかなどが簡潔にまとめられていてとても良かった。これで2000円しないのは安すぎるくらいだと思う。</p>
<p>「アマチュアはこの本で勉強してより質の高いロゴを作る指針としてほしい。プロはこの本でロゴの本質を再認識してより高みを目指してほしい。」みたいなことが書かれててとても好感を持った。</p>
<p>巻末にはロゴデザインの基礎知識も載っている。</p>
<h2 id="9.-%E8%9E%8D%E3%81%91%E3%82%8B%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-%E2%80%95%E3%83%8F%E3%83%BC%E3%83%89%C3%97%E3%82%BD%E3%83%95%E3%83%88%C3%97%E3%83%8D%E3%83%83%E3%83%88%E6%99%82%E4%BB%A3%E3%81%AE%E6%96%B0%E3%81%9F%E3%81%AA%E8%A8%AD%E8%A8%88%E8%AB%96" tabindex="-1">9. 融けるデザイン ―ハード×ソフト×ネット時代の新たな設計論</h2>
<p><a href="https://www.amazon.co.jp/dp/4861009383/ref=cm_sw_r_tw_dp_U_x_4t-xCb5R5ZETJ" title="https://www.amazon.co.jp/dp/4861009383/ref=cm_sw_r_tw_dp_U_x_4t-xCb5R5ZETJ" target="_blank" rel="noopener noreferrer"><strong>融けるデザイン ―ハード×ソフト×ネット時代の新たな設計論</strong><br />
_Amazonで渡邊恵太の融けるデザイン ―ハード×ソフト×ネット時代の新たな設計論。アマゾンならポイント還元本が多数。渡邊恵太作品ほか、お急ぎ便対象商品は当日お届けも可能。また融けるデザイン…_www.amazon.co.jp</a><a href="https://www.amazon.co.jp/dp/4861009383/ref=cm_sw_r_tw_dp_U_x_4t-xCb5R5ZETJ" target="_blank" rel="noopener noreferrer"></a></p>
<p>前から読もうと思って読んでなかったので買ってみた。まだ読んでない。</p>
<h2 id="10.-design-systems" tabindex="-1">10. Design Systems</h2>
<p><a href="https://www.amazon.co.jp/dp/4862464122/ref=cm_sw_r_tw_dp_U_x_sv-xCbY706C88" title="https://www.amazon.co.jp/dp/4862464122/ref=cm_sw_r_tw_dp_U_x_sv-xCbY706C88" target="_blank" rel="noopener noreferrer"><strong>Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド</strong><br />
_Amazonでアラ・コルマトヴァ, 佐藤伸哉, 株式会社BスプラウトのDesign Systems ―デジタルプロダクトのためのデザインシステム実践ガイド。アマゾンならポイント還元本が多数。アラ・コルマトヴァ, 佐藤伸哉…_www.amazon.co.jp</a><a href="https://www.amazon.co.jp/dp/4862464122/ref=cm_sw_r_tw_dp_U_x_sv-xCbY706C88" target="_blank" rel="noopener noreferrer"></a></p>
<p>流行りに乗って買った。まだ最初の方しか読んでない。</p>
<h2 id="11.-%E7%99%BD%E3%81%A8%E9%BB%92%E3%81%AE%E3%81%A8%E3%81%B3%E3%82%89%3A-%E3%82%AA%E3%83%BC%E3%83%88%E3%83%9E%E3%83%88%E3%83%B3%E3%81%A8%E5%BD%A2%E5%BC%8F%E8%A8%80%E8%AA%9E%E3%82%92%E3%82%81%E3%81%90%E3%82%8B%E5%86%92%E9%99%BA" tabindex="-1">11. 白と黒のとびら: オートマトンと形式言語をめぐる冒険</h2>
<p><a href="https://www.amazon.co.jp/dp/4130633570/ref=cm_sw_r_tw_dp_U_x_7w-xCb29DYFC1" title="https://www.amazon.co.jp/dp/4130633570/ref=cm_sw_r_tw_dp_U_x_7w-xCb29DYFC1" target="_blank" rel="noopener noreferrer"><strong>白と黒のとびら: オートマトンと形式言語をめぐる冒険</strong><br />
_Amazonで川添 愛の白と黒のとびら: オートマトンと形式言語をめぐる冒険。アマゾンならポイント還元本が多数。川添 愛作品ほか、お急ぎ便対象商品は当日お届けも可能。また白と黒のとびら…_www.amazon.co.jp</a><a href="https://www.amazon.co.jp/dp/4130633570/ref=cm_sw_r_tw_dp_U_x_7w-xCb29DYFC1" target="_blank" rel="noopener noreferrer"></a></p>
<p>コミュニティのSlackでおすすめされたので買ってみた。まだ読んでない。</p>
2019-08-09T08:13:20Z
/posts/2019-08-09_Figma-------------------827d604201ee/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#figma%E3%81%AF%E5%85%AC%E5%BC%8F%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E3%81%8C%E5%85%85%E5%AE%9F%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B">Figmaは公式ドキュメントが充実している</a></li><li><a href="#%E5%85%AC%E5%BC%8Fyoutube%E3%83%81%E3%83%A3%E3%83%B3%E3%83%8D%E3%83%AB">公式YouTubeチャンネル</a></li><li><a href="#for-developer">For Developer</a></li><li><a href="#%E8%8B%B1%E8%AA%9E%E3%81%8C%E8%8B%A6%E6%89%8B%E2%80%A6%EF%BC%9F">英語が苦手…?</a><ul><li><a href="#google%E7%BF%BB%E8%A8%B3%E3%81%AEchrome%E6%8B%A1%E5%BC%B5">Google翻訳のChrome拡張</a></li><li><a href="#youtube%E3%81%AE%E8%87%AA%E5%8B%95%E7%94%9F%E6%88%90%E5%AD%97%E5%B9%95">YouTubeの自動生成字幕</a></li></ul></li><li><a href="#%E3%81%BE%E3%81%A8%E3%82%81">まとめ</a></li></ul></details><p></p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*NBDM8TcG7nXC1NfaeW0LnA.png" alt="" loading="lazy" /></p>
<p>僕はFigmaが好きだ。</p>
<p>これからFigmaを使い始める人に言いたいことがある。</p>
<p>その辺の雑多な記事を読まずに<strong>公式ドキュメントを読もう。</strong></p>
<p><strong>公式YouTubeチャンネルにある解説動画を観よう。</strong></p>
<h2 id="figma%E3%81%AF%E5%85%AC%E5%BC%8F%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E3%81%8C%E5%85%85%E5%AE%9F%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B" tabindex="-1">Figmaは公式ドキュメントが充実している</h2>
<p>Figmaの公式ドキュメントはめちゃくちゃ充実している。FAQも鬼のような充実ぶりで、おそらくほとんどの問題はサポートセンターに問い合わせなくても解決するだろう。</p>
<p><a href="https://help.figma.com/" title="https://help.figma.com/" target="_blank" rel="noopener noreferrer"><strong>Figma</strong><br />
_Common questions and support documentation_help.figma.com</a><a href="https://help.figma.com/" target="_blank" rel="noopener noreferrer"></a></p>
<p>雑多な記事よりも丁寧だし検索もできるし一覧性も良い。</p>
<p>あとよく見かける「日本語バグが…」みたいなコメントする人いるけど、日本語はマイナー言語なので、なにも言わなかったらいつまでも対応されないよ。バグや不具合を見つけたら<strong>きちんとサポートに連絡しましょう。</strong></p>
<p><a href="https://help.figma.com/article/101-still-having-technical-issues" title="https://help.figma.com/article/101-still-having-technical-issues" target="_blank" rel="noopener noreferrer"><strong>Still having technical issues?</strong><br />
_If you have tried some basic troubleshooting, or if you are experiencing an issue that you can consistently reproduce…_help.figma.com</a><a href="https://help.figma.com/article/101-still-having-technical-issues" target="_blank" rel="noopener noreferrer"></a></p>
<p>問い合わせの数が増えたら対応してくれるかも。</p>
<h2 id="%E5%85%AC%E5%BC%8Fyoutube%E3%83%81%E3%83%A3%E3%83%B3%E3%83%8D%E3%83%AB" tabindex="-1">公式YouTubeチャンネル</h2>
<p>YouTubeチャンネルの動画も充実している。普段よく使う機能は網羅されているし、時間も3〜5分と短くまとまっている。公式が解説動画出してくれるとか最高。神。</p>
<p>動画は英語だけど、ツールの動きを追えば英語わからないくても使い方はわかる。</p>
<p><a href="https://www.youtube.com/channel/UCQsVmhSa4X-G3lHlUtejzLA" title="https://www.youtube.com/channel/UCQsVmhSa4X-G3lHlUtejzLA" target="_blank" rel="noopener noreferrer"><strong>Figma</strong><br />
_Figma is free to use. Sign up here: http://bit.ly/2yrzkCN Curious about Figma? In this end-to-end video we'll show you…_www.youtube.com</a><a href="https://www.youtube.com/channel/UCQsVmhSa4X-G3lHlUtejzLA" target="_blank" rel="noopener noreferrer"></a></p>
<h2 id="for-developer" tabindex="-1">For Developer</h2>
<p>開発者向けも同じ話。</p>
<p>非公式なものではなく、きちんと公式のドキュメントを読みましょう。</p>
<p><a href="https://www.figma.com/developers" title="https://www.figma.com/developers" target="_blank" rel="noopener noreferrer"><strong>Figma</strong><br />
_Edit description_www.figma.com</a><a href="https://www.figma.com/developers" target="_blank" rel="noopener noreferrer"></a></p>
<p>Figmaは開発者向けドキュメントもかなり丁寧に書いてくれていて、サンプルコードも充実してる。</p>
<p><a href="https://github.com/figma/plugin-samples" title="https://github.com/figma/plugin-samples" target="_blank" rel="noopener noreferrer"><strong>figma/plugin-samples</strong><br />
_Sample plugins using the Figma Plugin API. To make a feature request, file a bug report, or ask a question about…_github.com</a><a href="https://github.com/figma/plugin-samples" target="_blank" rel="noopener noreferrer"></a></p>
<p>しかもREST APIのドキュメントでは、実際のresponseをウェブ上で確認できるようになっている!神!</p>
<p><img src="https://cdn-images-1.medium.com/max/1200/1*v58KQ4m-C1O0X08YEjOL5A.png" alt="" loading="lazy" /></p>
<p>すごい!便利!最高!</p>
<p>さらにAccess tokenもドキュメント上で取得できる!(Figmaにログインしていれば)すごい!</p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*7izxnqSzDKGvbFQOfIC22g.png" alt="" loading="lazy" /></p>
<p>これクリックすると自分のtokenが自動入力される</p>
<h2 id="%E8%8B%B1%E8%AA%9E%E3%81%8C%E8%8B%A6%E6%89%8B%E2%80%A6%EF%BC%9F" tabindex="-1">英語が苦手…?</h2>
<p><strong>英語を勉強しよう!</strong></p>
<p>という話もあるがそれは一旦置いておくとして、少しでも負担を減らすために便利ツールを紹介しよう。</p>
<p>(英語の勉強のためにFigmaのドキュメントを読んだり動画を観たりする、という手もある。)</p>
<h3 id="google%E7%BF%BB%E8%A8%B3%E3%81%AEchrome%E6%8B%A1%E5%BC%B5" tabindex="-1">Google翻訳のChrome拡張</h3>
<p><a href="https://chrome.google.com/webstore/detail/google-translate/aapbdbdomjkkjkaonfhkkikfgjllcleb" title="https://chrome.google.com/webstore/detail/google-translate/aapbdbdomjkkjkaonfhkkikfgjllcleb" target="_blank" rel="noopener noreferrer"><strong>Google Traductor</strong><br />
_Vea traducciones fácilmente mientras navega por la web. Por el equipo de Google Traductor._chrome.google.com</a><a href="https://chrome.google.com/webstore/detail/google-translate/aapbdbdomjkkjkaonfhkkikfgjllcleb" target="_blank" rel="noopener noreferrer"></a></p>
<p>テキストをドラッグアンドドロップすると翻訳してポップアップを出してくれる。便利。ちょっと挙動が安定しないこともあるけど…。</p>
<h3 id="youtube%E3%81%AE%E8%87%AA%E5%8B%95%E7%94%9F%E6%88%90%E5%AD%97%E5%B9%95" tabindex="-1">YouTubeの自動生成字幕</h3>
<p><a href="https://support.google.com/youtube/answer/100078?co=GENIE.Platform%3DDesktop&hl=ja&oco=0" title="https://support.google.com/youtube/answer/100078?co=GENIE.Platform%3DDesktop&hl=ja&oco=0" target="_blank" rel="noopener noreferrer"><strong>字幕設定の管理</strong><br />
_字幕は、所有者が字幕を追加した動画と、YouTube の 自動字幕機能 を利用している動画で表示することができます。パソコンまたはモバイル デバイスで字幕のデフォルト設定を変更できます。 YouTube の字幕設定…_support.google.com</a><a href="https://support.google.com/youtube/answer/100078?co=GENIE.Platform%3DDesktop&hl=ja&oco=0" target="_blank" rel="noopener noreferrer"></a></p>
<p>自動生成された字幕、昔は精度が悪くあてにならなかったけど最近は精度向上して英語であれば問題なく見れる。わからない単語は都度調べる感じで観る。</p>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81" tabindex="-1">まとめ</h2>
<p><strong>みんな公式ドキュメント読もうね!</strong></p>
2019-11-11T15:51:27Z
/posts/2019-11-11_Figma-----------------6a72c4e9498c/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#%E3%81%AA%E3%82%93%E3%81%A7figma%EF%BC%9F">なんでFigma?</a></li><li><a href="#%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB">サンプル</a></li><li><a href="#tips">Tips</a><ul><li><a href="#%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AF350dpi%E3%81%A7%E4%BD%9C%E3%82%8B">サイズは350dpiで作る</a></li><li><a href="#%E6%96%87%E5%AD%97%E3%81%AF%E3%82%A2%E3%82%A6%E3%83%88%E3%83%A9%E3%82%A4%E3%83%B3%E5%8C%96%E3%81%97%E3%81%A6%E3%81%8A%E3%81%8F">文字はアウトライン化しておく</a></li><li><a href="#%E7%B8%81%E3%81%8B%E3%82%893mm%E3%81%AF%E7%A9%BA%E7%99%BD%E3%81%AB%E3%81%99%E3%82%8B">縁から3mmは空白にする</a></li><li><a href="#pdf%E5%85%A5%E7%A8%BF%E3%81%A7%E3%81%8D%E3%82%8B%E5%8D%B0%E5%88%B7%E6%89%80%E3%82%92%E4%BD%BF%E3%81%86">PDF入稿できる印刷所を使う</a></li><li><a href="#%E3%83%A9%E3%82%AF%E3%82%B9%E3%83%AB%E3%81%AA%E3%82%89%E5%A1%97%E3%82%8A%E8%B6%B3%E3%81%97%E3%82%82%E5%AF%BE%E5%BF%9C%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B">ラクスルなら塗り足しも対応している</a></li></ul></li><li><a href="#cmyk%E5%95%8F%E9%A1%8C">CMYK問題</a></li><li><a href="#%E3%81%BE%E3%81%A8%E3%82%81">まとめ</a></li></ul></details><p></p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*DIsYfmjJSMu3d0zXiPFA8w.png" alt="" loading="lazy" /></p>
<p>名刺作りたいですよね。でもデザインツールってどれも高いしパワポで作るのもなんかイケてないしテンプレートから選ぶのだと没個性だし、と悩めるそこの君のために、Figmaで名刺デザインするためのTipsをまとめたいと思います。</p>
<h2 id="%E3%81%AA%E3%82%93%E3%81%A7figma%EF%BC%9F" tabindex="-1">なんでFigma?</h2>
<p>Figmaは無料で使えるからです!しかもPDF書き出しもできます。最高。</p>
<h2 id="%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB" tabindex="-1">サンプル</h2>
<p>僕がFigmaで作った名刺のデザインファイルへのリンクを置いときます。気になった人は参考にしてください。</p>
<p><a href="https://www.figma.com/embed?embed_host=oembed&url=https://www.figma.com/file/INRp2mZfwLRhtXmnnmc6oF/%E5%90%8D%E5%88%BA2019?node-id=51%3A348" target="_blank" rel="noopener noreferrer">https://www.figma.com/embed?embed_host=oembed&url=https://www.figma.com/file/INRp2mZfwLRhtXmnnmc6oF/%E5%90%8D%E5%88%BA2019?node-id=51%3A348</a></p>
<h2 id="tips" tabindex="-1">Tips</h2>
<h3 id="%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AF350dpi%E3%81%A7%E4%BD%9C%E3%82%8B" tabindex="-1">サイズは350dpiで作る</h3>
<p>Frameのサイズは350dpiで印刷したときに名刺の大きさになるように設定します。他の紙のサイズでデザインするときも基本同じです。日本の名刺サイズは91mm×55mmなのでFrameの大きさは</p>
<p><strong>758px×1254px</strong></p>
<p>になります。</p>
<p>紙の大きさをピクセルに変換してくれるツールがあるのでこれ使うと便利です。</p>
<p><a href="https://www.size-info.com/business-card/" title="https://www.size-info.com/business-card/" target="_blank" rel="noopener noreferrer"><strong>名刺のサイズ・ピクセル</strong><br />
_名刺を制作する際の選択肢は主に以下の3つで、どれも一長一短です。 1. 自分で名刺データを作成し、自分で名刺用紙を用意して印刷する。 2. 自分で名刺データを作成し、そのデータを業者に出稿して印刷してもらう。 3…_www.size-info.com</a><a href="https://www.size-info.com/business-card/" target="_blank" rel="noopener noreferrer"></a></p>
<h3 id="%E6%96%87%E5%AD%97%E3%81%AF%E3%82%A2%E3%82%A6%E3%83%88%E3%83%A9%E3%82%A4%E3%83%B3%E5%8C%96%E3%81%97%E3%81%A6%E3%81%8A%E3%81%8F" tabindex="-1"><strong>文字はアウトライン化しておく</strong></h3>
<p>PDFにフォントデータが埋め込まれていないと印刷所側で正しく表示・印刷できない可能性があります。PDFで書き出す前に文字をアウトライン化しておきましょう。</p>
<h3 id="%E7%B8%81%E3%81%8B%E3%82%893mm%E3%81%AF%E7%A9%BA%E7%99%BD%E3%81%AB%E3%81%99%E3%82%8B" tabindex="-1">縁から3mmは空白にする</h3>
<p>印刷所で印刷するとき、裁断の関係で印刷が少しずれてしまうことがあります。詳しくは下記ページを参照してください。</p>
<p><a href="https://raksul.com/guide/knowledge-of-printing/extra-length-from-trim-mask/" title="https://raksul.com/guide/knowledge-of-printing/extra-length-from-trim-mask/" target="_blank" rel="noopener noreferrer"><strong>塗り足しと文字位置</strong><br />
_家庭用プリンターと違い工場の印刷機で印刷する場合、背景や絵柄や線などを、紙の端まで(フチなし)印刷するためにデータ作成時に"塗り足し"を作る必要があります。…_raksul.com</a><a href="https://raksul.com/guide/knowledge-of-printing/extra-length-from-trim-mask/" target="_blank" rel="noopener noreferrer"></a></p>
<p>Illustratorなどでデザインするときは印刷がずれても良いように名刺の大きさから少しはみ出したデザインデータを作成します。はみ出した部分は<strong>塗り足し</strong>と呼ばれます。また、どこがデザインでどこが塗り足しなのかを伝えるガイドラインを<strong>トンボ</strong>といいます。</p>
<p><a href="https://raksul.com/guide/knowledge-of-printing/trim-mask/" title="https://raksul.com/guide/knowledge-of-printing/trim-mask/" target="_blank" rel="noopener noreferrer"><strong>断裁とトンボ</strong><br />
_印刷用のデータには必ず「トンボ」という印が必要になります。 トンボとは 印刷物を仕上がりサイズに断裁する際や、フルカラー印刷の際にCMYK4色の版を重ね合わせるための印です。…_raksul.com</a><a href="https://raksul.com/guide/knowledge-of-printing/trim-mask/" target="_blank" rel="noopener noreferrer"></a></p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*1AEVffw96xPImb-umovHbA.png" alt="" loading="lazy" /></p>
<p>しかしPDFで入稿する場合はこのトンボを付けれないことが多く裁断のズレがあった場合に名刺の端の印刷がずれてしまう可能性があります。</p>
<p>名刺の端から3mm(41px)はデザインを入れず空白にすることで印刷がずれても目立ちにくくできます。</p>
<h3 id="pdf%E5%85%A5%E7%A8%BF%E3%81%A7%E3%81%8D%E3%82%8B%E5%8D%B0%E5%88%B7%E6%89%80%E3%82%92%E4%BD%BF%E3%81%86" tabindex="-1">PDF入稿できる印刷所を使う</h3>
<p>通常だと印刷所に入稿するときはAIやPSD形式で入稿することが多いですが、中にはPDFで入稿を受け付けてくれる印刷所もあります。そういった印刷所を使えばFigmaで作成したデザインでも印刷できます。</p>
<p>僕のおすすめは<a href="https://raksul.com/businesscard/" target="_blank" rel="noopener noreferrer"><strong>ラクスル</strong></a>です。Web入稿画面が非常に使いやすく、印刷データのチェックも早いです。</p>
<p><a href="https://raksul.com/businesscard/" title="https://raksul.com/businesscard/" target="_blank" rel="noopener noreferrer"><strong>名刺印刷|ネット印刷のラクスル</strong><br />
_デザイン料金無料 テンプレートが続々追加。写真・イラストなどの画像素材が2000万点、モリサワフォントの人気書体も無料でご利用いただけます。 デザインテンプレート一覧 おすすめ 一般的な名刺サイズ(91 × 55…_raksul.com</a><a href="https://raksul.com/businesscard/" target="_blank" rel="noopener noreferrer"></a></p>
<h3 id="%E3%83%A9%E3%82%AF%E3%82%B9%E3%83%AB%E3%81%AA%E3%82%89%E5%A1%97%E3%82%8A%E8%B6%B3%E3%81%97%E3%82%82%E5%AF%BE%E5%BF%9C%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B" tabindex="-1">ラクスルなら塗り足しも対応している</h3>
<p>調べたところによると、どうやらラクスルはPDF入稿でも塗り足しをつけれるらしいです。</p>
<p>350dpiで作る場合、41pxずつ外側に余分にとっておくとそれを塗り足しだと自動的に判別してくれるっぽいです。僕は試してないです。気になった人は是非試してみたください。</p>
<h2 id="cmyk%E5%95%8F%E9%A1%8C" tabindex="-1">CMYK問題</h2>
<p>FigmaはCMYKに対応してないので、印刷した色が想像と違う場合があります。お金は少しかかりますが、<strong>印刷する前にコンビニプリントやキンコーズで試し刷りして確認する</strong>と良いかなと思います。(使用しているプリンターとかによっても色味変わるので絶対的なものはないですが、ミスマッチは減ると思います。)</p>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81" tabindex="-1">まとめ</h2>
<p>工夫すれば何でも出来ちゃうね!</p>
2019-11-11T16:55:30Z
/posts/2019-11-11_--------------------55969d4a0e6d/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#%E3%83%95%E3%83%AA%E3%83%BC%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%92%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E3%81%97%E3%81%A8%E3%81%8F">フリーフォントをダウンロードしとく</a></li><li><a href="#%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%81%AE%E3%82%B5%E3%83%96%E3%82%B9%E3%82%AF%E3%82%92%E5%A5%91%E7%B4%84%E3%81%99%E3%82%8B">フォントのサブスクを契約する</a></li><li><a href="#%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%81%A8%E6%9C%AC%E6%96%87%E3%81%AE%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%92%E5%88%86%E3%81%91%E3%82%8B">タイトルと本文のフォントを分ける</a></li><li><a href="#%E5%9F%BA%E6%9C%AC%E3%81%AF%E3%82%B4%E3%82%B7%E3%83%83%E3%82%AF%E3%82%92%E4%BD%BF%E3%81%86">基本はゴシックを使う</a></li></ul></details><p></p>
<p>スライド作るときにフォント選ぶの困りますよね。僕なりに考えてることをまとめてみました。</p>
<h2 id="%E3%83%95%E3%83%AA%E3%83%BC%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%92%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E3%81%97%E3%81%A8%E3%81%8F" tabindex="-1">フリーフォントをダウンロードしとく</h2>
<p>OSに搭載されてるフォントだけだといい感じのフォントが見つかりにくいと思うのでフリーフォントを入れとくといいと思います。僕はフォント集めが趣味なので結構物色してます。</p>
<p>おすすめはこんな感じ。</p>
<p><a href="http://jikasei.me/font/genjyuu/" target="_blank" rel="noopener noreferrer">http://jikasei.me/font/genjyuu</a></p>
<p><a href="https://logotype.jp/corporate-logo-font-dl.html" title="https://logotype.jp/corporate-logo-font-dl.html" target="_blank" rel="noopener noreferrer"><strong>モダンな「コーポレート・ロゴ」フォント無料ダウロード</strong><br />
_「コーポレート・ロゴ」(ver…_logotype.jp</a><a href="https://logotype.jp/corporate-logo-font-dl.html" target="_blank" rel="noopener noreferrer"></a></p>
<p><a href="https://www.google.com/get/noto/#sans-jpan" title="https://www.google.com/get/noto/#sans-jpan" target="_blank" rel="noopener noreferrer"><strong>Google Noto Fonts</strong><br />
_When text is rendered by a computer, sometimes characters are displayed as "tofu". They are little boxes to indicate…_www.google.com</a><a href="https://www.google.com/get/noto/#sans-jpan" target="_blank" rel="noopener noreferrer"></a></p>
<p>まあNoto Sans CJK JP使っておけば間違いないと思います。コーポレートロゴは見出し用ですね。本文で使うとちょっと見にくいです。源柔ゴシックは雰囲気柔らかくなるので僕はよく使います。おすすめです。</p>
<h2 id="%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%81%AE%E3%82%B5%E3%83%96%E3%82%B9%E3%82%AF%E3%82%92%E5%A5%91%E7%B4%84%E3%81%99%E3%82%8B" tabindex="-1">フォントのサブスクを契約する</h2>
<p>フリーフォントだけでもかなりいい感じなんですが、フリーフォントは探すのがめんどくさかったり少し癖が強かったりして使いにくい場面もあります。</p>
<p>そういう場合は定額のフォントサービスを契約するのが良いと思います。僕は2つ契約してます。</p>
<p><a href="https://www.morisawa.co.jp/products/fonts/bizplus/" title="https://www.morisawa.co.jp/products/fonts/bizplus/" target="_blank" rel="noopener noreferrer"><strong>概要 | MORISAWA BIZ+ | フォント製品 | 製品/ソリューション</strong><br />
_多様なラインナップで「必ず伝えたい情報」「注意を促したい文言」「さりげなく添えたい文章」など、必要な表現に合わせてフォントを変えることが可能となり、情報の「伝わりやすさ」に大きな差がつきます。 契約プランは2種類…_www.morisawa.co.jp</a><a href="https://www.morisawa.co.jp/products/fonts/bizplus/" target="_blank" rel="noopener noreferrer"></a></p>
<p><a href="https://mojimo.jp/manga/" title="https://mojimo.jp/manga/" target="_blank" rel="noopener noreferrer"><strong>mojimo-manga - あのマンガの、あのアニメの、あのフォントが使える!</strong><br />
_あのマンガの、あのアニメの、あのフォントが使える! アニメやコミックなどで見かけない日はない、Fontworksの書体たち。 デザイナー・イラストレーターの方をはじめ、趣味で創作活動を行っている方、…_mojimo.jp</a><a href="https://mojimo.jp/manga/" target="_blank" rel="noopener noreferrer"></a></p>
<p>MORISAWA BIZ+はUD新ゴ、mojimo mangaはラグランパンチというフォントを使いたくて契約しました。どちらも年間4000円くらいなのでとても安いです。たくさんスライド作る人は契約しても損はないと思います。mojimoはいくつかバリエーションがあります。</p>
<p>おすすめは**MORISAWA BIZ+**です。スライドに使いやすいフォントが多く、すべてUDフォントなので読字障害の人も読みやすいです。</p>
<h2 id="%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%81%A8%E6%9C%AC%E6%96%87%E3%81%AE%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%92%E5%88%86%E3%81%91%E3%82%8B" tabindex="-1">タイトルと本文のフォントを分ける</h2>
<p>タイトルや見出しは少し形の変わったフォントを使い本文では普通のゴシックを使うとメリハリが出て良いです。(必ずそうした方が良いというわけではないけど、ちょっと遊び心があっていいなと思います。僕はたまにやります。)</p>
<p>注意点は</p>
<ul>
<li>あまり奇抜すぎるものを使わないこと</li>
<li>フォントのテイストを離しすぎない(ゆるふわぽっぷと角ゴシック、みたいな)</li>
</ul>
<p>おすすめタイトルフォントは<strong>ラグランパンチ</strong>と<strong>ニューロダン</strong>です。</p>
<h2 id="%E5%9F%BA%E6%9C%AC%E3%81%AF%E3%82%B4%E3%82%B7%E3%83%83%E3%82%AF%E3%82%92%E4%BD%BF%E3%81%86" tabindex="-1">基本はゴシックを使う</h2>
<p>明朝体はディスプレイで読みにくいので基本的にはゴシックを使うようにしてます。僕は新ゴやFUTURAのような線がはっきりくっきり太めなゴシックが好きです。</p>
2019-12-02T02:22:03Z
/posts/2019-12-02_---------------------ver-2019--61311f496bd0/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#11ty">11ty</a><ul><li><a href="#gatsby.js%E7%96%B2%E3%82%8C">Gatsby.js疲れ</a></li><li><a href="#11ty%E3%81%AE%E8%89%AF%E3%81%84%E3%81%A8%E3%81%93%E3%82%8D">11tyの良いところ</a></li></ul></li><li><a href="#fontplus">FONTPLUS</a></li><li><a href="#%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3">デザイン</a></li><li><a href="#%E3%81%BE%E3%81%A8%E3%82%81">まとめ</a></li></ul></details><p></p>
<p>これは<a href="https://qiita.com/advent-calendar/2019/folio-sec" target="_blank" rel="noopener noreferrer">FOLIO Advent Calendar 2019</a> 2日めの記事です。</p>
<p>こんにちは、株式会社FOLIOフロントエンドエンジニアのtakanoripです。2日目にしてめちゃくちゃ個人的な話題でごめんなさい。</p>
<p>先日自分のポートフォリオをリニューアルしたので、それの技術、デザインの紹介とかをしたいと思います。</p>
<h2 id="11ty" tabindex="-1">11ty</h2>
<p>今回は11tyというStatic Site Generatorを使いました。<br />
詳しいことはリポジトリ見てね。</p>
<p><a href="https://www.11ty.io/" title="https://www.11ty.io/" target="_blank" rel="noopener noreferrer"><strong>Eleventy is a simpler static site generator.</strong><br />
_npm install -g @11ty/eleventy echo '# Page header' > README.md eleventy This will compile any files matching valid…_www.11ty.io</a><a href="https://www.11ty.io/" target="_blank" rel="noopener noreferrer"></a></p>
<p><a href="https://github.com/takanorip/portfolio-version3" title="https://github.com/takanorip/portfolio-version3" target="_blank" rel="noopener noreferrer"><strong>takanorip/portfolio-version3</strong><br />
_You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or…_github.com</a><a href="https://github.com/takanorip/portfolio-version3" target="_blank" rel="noopener noreferrer"></a></p>
<p>これは特定のフレームワークに依存してなくてとてもシンプルなSSGです。以前のポートフォリオではGatsby.jsを使っていたんですが、今回はこちらのツールに乗り換えました。</p>
<h3 id="gatsby.js%E7%96%B2%E3%82%8C" tabindex="-1">Gatsby.js疲れ</h3>
<p>なんで乗り換えたかというと、「<strong>Gatsby.jsに疲れた</strong>」からです。Gatsby.jsはとても素晴らしいツールだと思いますが、機能が多く、使い方も独特かつ複雑(GraphQL使うとことか)なので、ちょっとした機能追加も意外と大変、みたいなことがあります。</p>
<p>あと、個人的に気になるのが、Gatsby.jsがbuild後もReactに依存してるところです。僕は完全にStaticなウェブサイトを作りたいので、Gatsby.jsのこの仕様はあまり気に入っていませんでした。純粋なHTMLを生成してほしいんです。</p>
<p>僕はただMarkdownをHTMLにして表示できれば満足だったのです。その欲求を満たすにはGatsby.jsは大きすぎました。</p>
<h3 id="11ty%E3%81%AE%E8%89%AF%E3%81%84%E3%81%A8%E3%81%93%E3%82%8D" tabindex="-1">11tyの良いところ</h3>
<p>このツイートに書いてあることはとても良いと感じました。</p>
<p><a href="https://twitter.com/_yuheiy/status/1200976795396235264?s=20" target="_blank" rel="noopener noreferrer">https://twitter.com/_yuheiy/status/1200976795396235264?s=20</a></p>
<p>この他に複数のテンプレートの拡張子に対応しているのも良いと感じました。公式ドキュメントはnunjucksで書かれていますが、その他ejsやHandlebarsなどでも書けます。もし既存のテンプレートがある場合はそれらを使うことができるし、プロジェクトの特性や自分の好みに合ったテンプレートを選択できます。選択できることは非常に重要です。</p>
<p>collectionもsortや追加など柔軟に設定できるのが非常に良いと感じました。特にメディア系のウェブサイトだと粒度の異なるカテゴリを扱ったり、複数のソーティングをすることがあると思うので、そういう時に便利さを実感できる気がしました。</p>
<h2 id="fontplus" tabindex="-1">FONTPLUS</h2>
<p>今回、フォントにFuturaを採用したかったのでFONTPLUSの一番安いプラン(¥1,100/月)を契約して使っています。</p>
<p>FONTPLUSはダイナミックサブセッティングを採用しているのでJavaScriptがHTMLに含まれるテキストを解析、サーバーに送信した後、動的にサブセットされたフォントがダウンロードされる仕組みになっています。これによりダウンロードされるフォントファイルの大きさがとても小さくなるメリットがあります。</p>
<p>しかし、今回は英語フォントしか使っていないのでそのメリットを感じることが少ないのと、JavaScriptの実行からフォントがダウンロードされるまでに少し時間かかりすぎるなと感じました。またフォントがキャッシュされないため、ページ遷移するごとにFOITが発生してしまうので体験が少し悪くなるなと感じました。これはこれから改善していきたいです。</p>
<p>ちなみに、僕の4G環境で試したところJavaScriptの実行からダウンロードまで最大3sほどかかっていました。もう少しレスポンスが早くなると使い勝手が良くなるのにもったいないなと感じました。</p>
<h2 id="%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3" tabindex="-1">デザイン</h2>
<p>今回デザインで意識したのはこのブログの内容を実践することです。</p>
<p><a href="https://standard.shiftbrain.com/blog/music-math-typography" title="https://standard.shiftbrain.com/blog/music-math-typography" target="_blank" rel="noopener noreferrer"><strong>音楽、数学、タイポグラフィ</strong><br />
_ブログ 鈴木丈 開発マネジャー 開催された「 フロントエンドカンファレンス福岡2019 」で、「音楽、数学、タイポグラフィ」というプレゼンテーションをする機会をいただきました。ここにその内容を再構成して掲載します。 ..._standard.shiftbrain.com</a><a href="https://standard.shiftbrain.com/blog/music-math-typography" target="_blank" rel="noopener noreferrer"></a></p>
<p>TOPページとか一部これに則ってないところもありますが、全体的な構成はフィボナッチ数列や調和数列に則ったルールを作りました。今までそういったルールを意識したことがなかったので、今回は実験的な意味合いも込めて少し厳し目にルールに準拠するよう作ってみました。</p>
<p>ルールを決めておくことで楽になるところと、どうしても納得できなくてルールからはみ出すかどうか悩む部分があり、思った以上に難しかったですがとても勉強になりました。</p>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81" tabindex="-1">まとめ</h2>
<p>みんなポートフォリオサイト見てくれよな!</p>
<p><a href="https://takanorip.com/" title="https://takanorip.com/" target="_blank" rel="noopener noreferrer"><strong>takanorip.com</strong><br />
_frontend developer / interface designer_takanorip.com</a><a href="https://takanorip.com/" target="_blank" rel="noopener noreferrer"></a></p>
2019-12-02T02:24:03Z
/posts/2019-12-02_FOLIO-----------------b48a3dc0dd22/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#folio%EF%BC%9F">FOLIO?</a></li><li><a href="#folio%E3%81%AE%E6%8A%80%E8%A1%93%E6%A7%8B%E6%88%90%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">FOLIOの技術構成について</a></li><li><a href="#%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%AE%E6%8B%85%E5%BD%93%E7%AF%84%E5%9B%B2">フロントエンドエンジニアの担当範囲</a></li><li><a href="#%E4%BC%9A%E7%A4%BE%E3%81%AE%E7%8A%B6%E6%B3%81">会社の状況</a></li><li><a href="#%E3%81%93%E3%82%93%E3%81%AA%E4%BA%BA%E3%81%AA%E3%82%89%E6%A5%BD%E3%81%97%E3%82%81%E3%82%8B%E3%81%8B%E3%82%82">こんな人なら楽しめるかも</a><ul><li><a href="#%E5%88%B6%E7%B4%84%E3%81%8C%E5%A4%9A%E3%81%8F%E3%81%A6%E3%82%82%E3%81%9D%E3%82%8C%E3%82%92%E6%A5%BD%E3%81%97%E3%82%81%E3%82%8B%E4%BA%BA">制約が多くてもそれを楽しめる人</a></li><li><a href="#%E3%82%AB%E3%82%AA%E3%82%B9%E3%81%AA%E7%8A%B6%E6%B3%81%E3%82%92%E6%A5%BD%E3%81%97%E3%82%81%E3%82%8B%E4%BA%BA">カオスな状況を楽しめる人</a></li><li><a href="#%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%84ui%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%80%81ux%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AB%E8%88%88%E5%91%B3%E3%81%8C%E3%81%82%E3%82%8B%E4%BA%BA">サービスデザインやUIデザイン、UXデザインに興味がある人</a></li></ul></li><li><a href="#%E3%81%BE%E3%81%A8%E3%82%81">まとめ</a></li></ul></details><p></p>
<p>これは<a href="https://qiita.com/advent-calendar/2019/folio-sec" target="_blank" rel="noopener noreferrer">FOLIO Advent Calendar 2019</a> 1日目の記事です。</p>
<p>みなさんこんにちは、株式会社FOLIOフロントエンドエンジニアのtakanoripです。</p>
<p>アドベントカレンダー1発目の記事ということで(すでに遅刻しているんですが)FOLIOのフロントエンドエンジニアが普段どんな仕事をしているのかについて書いてみよかなと思います。</p>
<p>フロントエンドエンジニアの仕事は会社やチームによって大きく違うので、何かの参考になれば嬉しいです。<strong>あとこの記事読んでFOLIOのフロントエンド面白そうだなって思った人がいたら、ぜひ僕あてにご連絡ください!うちに来てほしい!</strong>(弊社最近フロントエンド人材不足がすごいことになってるの<strong>でぜひ本当に皆さんの応募お待ちしております!!!</strong>)</p>
<p><a href="https://hrmos.co/pages/folio-sec/jobs/0000007" title="https://hrmos.co/pages/folio-sec/jobs/0000007" target="_blank" rel="noopener noreferrer"><strong>フレームワーク論争を横目に、フロントエンドの本質を追求するエンジニア募集! | 株式会社FOLIO</strong><br />
_株式会社FOLIOは、2015年12月に創業したオンライン証券会社です。…_hrmos.co</a><a href="https://hrmos.co/pages/folio-sec/jobs/0000007" target="_blank" rel="noopener noreferrer"></a></p>
<h2 id="folio%EF%BC%9F" tabindex="-1">FOLIO?</h2>
<p>採用サイトできたので見てください!</p>
<p><a href="https://corp.folio-sec.com/thespecialone/" title="https://corp.folio-sec.com/thespecialone/" target="_blank" rel="noopener noreferrer"><strong>TOP | The Special One</strong><br />
_FOLIOの採用サイト「The Special One」のトップページです。募集職種、カルチャー、ブログ、FAQといったコンテンツで構成されています。_corp.folio-sec.com</a><a href="https://corp.folio-sec.com/thespecialone/" target="_blank" rel="noopener noreferrer"></a></p>
<h2 id="folio%E3%81%AE%E6%8A%80%E8%A1%93%E6%A7%8B%E6%88%90%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" tabindex="-1">FOLIOの技術構成について</h2>
<p>ざっくり説明するとこんな感じになってます。</p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*2Inwqqg9a3b3jqhwDSWTeQ.png" alt="" loading="lazy" /></p>
<p>バックエンドはScalaで書かれていてマイクロサービスになっています。フロントエンドはNode.js(koa.js)で書かれたBFFとReactで書かれたクライアントアプリケーションがあり、BFFではマイクロサービスのAggregationとServer Side Renderingを行っています。</p>
<p>フロントエンドの記述構成はReact/Redux/Flow/CSS Moduleです。その他ライブラリは適宜いろいろ使ってます。</p>
<h2 id="%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%AE%E6%8B%85%E5%BD%93%E7%AF%84%E5%9B%B2" tabindex="-1">フロントエンドエンジニアの担当範囲</h2>
<p>フロントエンドエンジニアはBFF〜React〜CSS全部やります。基本的には全員がBFFもCSSもやることにしていて、BFF担当、CSS担当、みたいな分け方はしていません。</p>
<p>こうしている理由は人数が少ないからではなく、機能開発にはアプリケーションのBFFからCSSまで把握していることが必要なので、できるだけ属人性を排除しつつ適切なコードを全員が書けるようにするため、というのがあります。</p>
<p>また、BFFのAPIはフロントエンドUIのためのデータを返すので、フロントエンドで何を表示するかに大きく依存します。なのでBFFとReactで担当を分けず、一人が一貫して開発を行うほうが品質の高いコードが書けると考えています。</p>
<p>しかし採用条件にBFF(Node.js)の業務経験があることは入れていません。ある程度の知識があれば入社後に十分キャッチアップできる範囲だと考えています。(キャッチアップできそうかどうかは面接時に見てます。)</p>
<h2 id="%E4%BC%9A%E7%A4%BE%E3%81%AE%E7%8A%B6%E6%B3%81" tabindex="-1">会社の状況</h2>
<p>これが一番気になるところかなと思います。</p>
<p><strong>知りたい方は僕とご飯にでも行きましょう。</strong></p>
<h2 id="%E3%81%93%E3%82%93%E3%81%AA%E4%BA%BA%E3%81%AA%E3%82%89%E6%A5%BD%E3%81%97%E3%82%81%E3%82%8B%E3%81%8B%E3%82%82" tabindex="-1">こんな人なら楽しめるかも</h2>
<p>今のFOLIOのフロントエンド、こういう人なら楽しめるかもというのを書き出してみました。</p>
<h3 id="%E5%88%B6%E7%B4%84%E3%81%8C%E5%A4%9A%E3%81%8F%E3%81%A6%E3%82%82%E3%81%9D%E3%82%8C%E3%82%92%E6%A5%BD%E3%81%97%E3%82%81%E3%82%8B%E4%BA%BA" tabindex="-1">制約が多くてもそれを楽しめる人</h3>
<p>証券会社なので法律的な制約がとても多いです。しかもその法律はとても前時代的で非合理的で、今の時代では全く意味をなしていないものも多数存在します。</p>
<p>しかし証券会社である以上それらをきちんと遵守しなければなりません。これは会社を存続させるために非常に大切なことなのです。</p>
<p>よってFOLIOのフロントエンドエンジニアにはその制約を受け入れつつ、どのような工夫をすればより良いユーザー体験を提供できるか、を常に考えなければなりません。これはとても面倒なことですが、これが楽しめそうな人はFOLIOで活躍できそうな気がします。</p>
<h3 id="%E3%82%AB%E3%82%AA%E3%82%B9%E3%81%AA%E7%8A%B6%E6%B3%81%E3%82%92%E6%A5%BD%E3%81%97%E3%82%81%E3%82%8B%E4%BA%BA" tabindex="-1">カオスな状況を楽しめる人</h3>
<p>正直、今FOLIOのフロントエンドはとてもカオスです。技術的にも組織的にも課題が山積みだし、担当する範囲は広く人数は少なくなり1つのことにまとまった時間を割くことが難しいときも多々あります。また事業的にも転換期であり様々なプロジェクトが並行して走っていたりします。</p>
<p>リファクタリングも正直後手に回っていて、良く言えば何でもできる、悪く言えば何をするか決まってない、状況にあります。</p>
<p>特定の作業だけやるのが好きな方には正直今のフェーズは向いていないと思いますが、逆に**フロントエンドに関することなら何でもやりたい!**という人にとってはとても面白く力を発揮する機会がたくさんあると思います。</p>
<h3 id="%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%84ui%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%80%81ux%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AB%E8%88%88%E5%91%B3%E3%81%8C%E3%81%82%E3%82%8B%E4%BA%BA" tabindex="-1"><strong>サービスデザインやUIデザイン、UXデザインに興味がある人</strong></h3>
<p>FOLIOではエンジニアがサービスデザイン段階から関わることがよくあります。デザイナーやPdMがリードする部分はあるものの各フェーズでエンジニアの意見が取り入れられることも多いです。</p>
<p>またポジションやタイミングによっては、UXリードとしての役割をフロントエンドエンジニアが担うこともあります。</p>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81" tabindex="-1">まとめ</h2>
<p>みなさんの応募お待ちしております!</p>
<p><a href="https://hrmos.co/pages/folio-sec/jobs/0000007" title="https://hrmos.co/pages/folio-sec/jobs/0000007" target="_blank" rel="noopener noreferrer"><strong>フレームワーク論争を横目に、フロントエンドの本質を追求するエンジニア募集! | 株式会社FOLIO</strong><br />
_株式会社FOLIOは、2015年12月に創業したオンライン証券会社です。…_hrmos.co</a><a href="https://hrmos.co/pages/folio-sec/jobs/0000007" target="_blank" rel="noopener noreferrer"></a></p>
2019-12-03T14:32:09Z
/posts/2019-12-03_Figma-----------eb1eccdcf18f/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#%E8%89%AF%E3%81%8B%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8">良かったこと</a><ul><li><a href="#%E5%85%B1%E6%9C%89%E3%82%81%E3%81%A1%E3%82%83%E6%A5%BD">共有めちゃ楽</a></li><li><a href="#%E3%83%9F%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E4%B8%AD%E3%81%AB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%8C%E5%AE%8C%E6%88%90%E3%81%99%E3%82%8B">ミーティング中にデザインが完成する</a></li><li><a href="#%E3%83%84%E3%83%BC%E3%83%AB%E3%82%92%E8%A1%8C%E3%81%A3%E3%81%9F%E3%82%8A%E6%9D%A5%E3%81%9F%E3%82%8A%E3%81%97%E3%81%AA%E3%81%8F%E3%81%A6%E8%89%AF%E3%81%84%E3%81%AE%E3%81%A7%E5%BF%AB%E9%81%A9">ツールを行ったり来たりしなくて良いので快適</a></li></ul></li><li><a href="#%E8%AA%B2%E9%A1%8C">課題</a><ul><li><a href="#%E7%A7%BB%E8%A1%8C%E3%81%99%E3%82%8B%E6%9A%87%E3%81%AA%E3%81%84%E5%95%8F%E9%A1%8C">移行する暇ない問題</a></li><li><a href="#sketch%E4%BD%BF%E3%82%8F%E3%82%8C%E3%81%A1%E3%82%83%E3%81%86%E5%95%8F%E9%A1%8C">Sketch使われちゃう問題</a></li></ul></li><li><a href="#%E3%81%BE%E3%81%A8%E3%82%81">まとめ</a></li></ul></details><p></p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*M-Hwmsyssw1CNffx-Jcg_g.png" alt="" loading="lazy" /></p>
<p>これは<a href="https://qiita.com/advent-calendar/2019/folio-sec" target="_blank" rel="noopener noreferrer">FOLIO Advent Calendar 2019</a> 3日目の記事です。</p>
<p>FOLIOでは一部プロジェクトでFigmaを導入しています。導入から半年くらい経過したので振り返ってみようかなと思います。(といってもまだそこまで活用できているわけじゃないですが…))</p>
<h2 id="%E8%89%AF%E3%81%8B%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8" tabindex="-1">良かったこと</h2>
<p>まあ巷のよくあるFigma導入記事と感想は一緒です。</p>
<h3 id="%E5%85%B1%E6%9C%89%E3%82%81%E3%81%A1%E3%82%83%E6%A5%BD" tabindex="-1">共有めちゃ楽</h3>
<p>会社外部の人に共有するときリンクを1回送るだけでOKなので良い。</p>
<p>あとOrganization契約するとファイルの閲覧権限を社内の人&招待した人に絞ることができるのでセキュリティもしっかりしてます。</p>
<h3 id="%E3%83%9F%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E4%B8%AD%E3%81%AB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%8C%E5%AE%8C%E6%88%90%E3%81%99%E3%82%8B" tabindex="-1">ミーティング中にデザインが完成する</h3>
<p>ミーティング中にデザインを見ながら出た意見をデザイナーさんがすぐにデザインに反映してくれて、それをすぐ確認して実装に移るみたいな事ができて良いです。快適。</p>
<h3 id="%E3%83%84%E3%83%BC%E3%83%AB%E3%82%92%E8%A1%8C%E3%81%A3%E3%81%9F%E3%82%8A%E6%9D%A5%E3%81%9F%E3%82%8A%E3%81%97%E3%81%AA%E3%81%8F%E3%81%A6%E8%89%AF%E3%81%84%E3%81%AE%E3%81%A7%E5%BF%AB%E9%81%A9" tabindex="-1">ツールを行ったり来たりしなくて良いので快適</h3>
<p>個人的にこれは結構大きいです。AbstractとSketch使ってるときはツールの切り替えが地味にストレスでした。</p>
<h2 id="%E8%AA%B2%E9%A1%8C" tabindex="-1">課題</h2>
<h3 id="%E7%A7%BB%E8%A1%8C%E3%81%99%E3%82%8B%E6%9A%87%E3%81%AA%E3%81%84%E5%95%8F%E9%A1%8C" tabindex="-1">移行する暇ない問題</h3>
<p>既存のSketchにあるデザインデータをFigmaに移行しきれてないので、2つのツールを使わないといけないのがつらいです。時間が欲しい…。</p>
<h3 id="sketch%E4%BD%BF%E3%82%8F%E3%82%8C%E3%81%A1%E3%82%83%E3%81%86%E5%95%8F%E9%A1%8C" tabindex="-1">Sketch使われちゃう問題</h3>
<p>デザイナーさんがFigmaに慣れておらず、新しいプロジェクトでもSketchでデザインされてしまい、Figmaの導入が進まない、というのがあります。</p>
<p>特に新しいプロジェクトだとスケジュールがタイトだったりするので、使い慣れたツールのほうがスピードが出ると言われてしまうと強く言えない部分もあり…。これから解決していきたいです。</p>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81" tabindex="-1">まとめ</h2>
<p><strong>FOLIOではFigmaに興味のあるフロントエンドエンジニア募集中!</strong></p>
2019-12-03T15:17:49Z
/posts/2019-12-03_FOLIO-----------de5612b66ba3/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#%E3%82%A6%E3%82%A7%E3%83%96%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%EF%BC%9F">ウェブフォント?</a></li><li><a href="#folio%E3%81%A7%E4%BD%BF%E3%81%A3%E3%81%A6%E3%82%8B%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88">FOLIOで使ってるフォント</a></li><li><a href="#%E3%82%A6%E3%82%A7%E3%83%96%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E4%BA%8B%E6%83%85">ウェブフォント事情</a><ul><li><a href="#storycap%E5%AF%BE%E5%BF%9C">storycap対応</a></li></ul></li><li><a href="#%E3%81%8A%E3%81%BE%E3%81%91">おまけ</a></li></ul></details><p></p>
<p>これは<a href="https://qiita.com/advent-calendar/2019/folio-sec" target="_blank" rel="noopener noreferrer">FOLIO Advent Calendar 2019</a> 4日目の記事です。</p>
<h2 id="%E3%82%A6%E3%82%A7%E3%83%96%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%EF%BC%9F" tabindex="-1">ウェブフォント?</h2>
<p>ウェブフォントって何?って人は僕の本を買いましょう。だいたい理解できます。</p>
<p><a href="https://www.amazon.co.jp/%E8%AA%B0%E3%81%A7%E3%82%82%E3%81%A4%E3%81%8B%E3%81%88%E3%82%8B-%E3%82%A6%E3%82%A7%E3%83%96%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E5%AE%9F%E8%B7%B5%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB-%E6%8A%80%E8%A1%93%E6%9B%B8%E5%85%B8%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-NextPublishing-%E5%A4%A7%E6%9C%A8/dp/4844398385/ref=tmm_pap_swatch_0?_encoding=UTF8&qid=&sr=" title="https://www.amazon.co.jp/%E8%AA%B0%E3%81%A7%E3%82%82%E3%81%A4%E3%81%8B%E3%81%88%E3%82%8B-%E3%82%A6%E3%82%A7%E3%83%96%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E5%AE%9F%E8%B7%B5%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB-%E6%8A%80%E8%A1%93%E6%9B%B8%E5%85%B8%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-NextPublishing-%E5%A4%A7%E6%9C%A8/dp/4844398385/ref=tmm_pap_swatch_0?_encoding=UTF8&qid=&sr=" target="_blank" rel="noopener noreferrer"><strong>誰でもつかえる!ウェブフォント実践マニュアル (技術の泉シリーズ(NextPublishing))</strong><br />
_Amazonで大木 尊紀の誰でもつかえる!ウェブフォント実践マニュアル (技術の泉シリーズ(NextPublishing))。アマゾンならポイント還元本が多数。大木…_www.amazon.co.jp</a><a href="https://www.amazon.co.jp/%E8%AA%B0%E3%81%A7%E3%82%82%E3%81%A4%E3%81%8B%E3%81%88%E3%82%8B-%E3%82%A6%E3%82%A7%E3%83%96%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E5%AE%9F%E8%B7%B5%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB-%E6%8A%80%E8%A1%93%E6%9B%B8%E5%85%B8%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-NextPublishing-%E5%A4%A7%E6%9C%A8/dp/4844398385/ref=tmm_pap_swatch_0?_encoding=UTF8&qid=&sr=" target="_blank" rel="noopener noreferrer"></a></p>
<p>あと僕が福岡フロントエンドカンファレンスで発表した資料も読みましょう。</p>
<p><a href="https://speakerdeck.com/player/52163c144fdf460b819e0da9d4b2b473" target="_blank" rel="noopener noreferrer">https://speakerdeck.com/player/52163c144fdf460b819e0da9d4b2b473</a></p>
<h2 id="folio%E3%81%A7%E4%BD%BF%E3%81%A3%E3%81%A6%E3%82%8B%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88" tabindex="-1">FOLIOで使ってるフォント</h2>
<ul>
<li><a href="https://fonts.google.com/specimen/Noto+Sans+JP" target="_blank" rel="noopener noreferrer">Noto Sans JP</a></li>
<li><a href="https://fonts.google.com/specimen/Open+Sans" target="_blank" rel="noopener noreferrer">Open Sans</a></li>
<li><a href="https://yakuhanjp.qranoko.jp/" target="_blank" rel="noopener noreferrer">Yaku Han JP</a></li>
</ul>
<h2 id="%E3%82%A6%E3%82%A7%E3%83%96%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E4%BA%8B%E6%83%85" tabindex="-1">ウェブフォント事情</h2>
<p>Noto Sans JPとOpen SansはGoogle Fontsを使用しています。以前は自前でサブセット&ホスティングしてましたが下記2つの課題がありGoogle Fontsを使うように切り替えました。</p>
<ul>
<li>ファイルサイズが重い(ウェイト全部合わせると2MBくらい)</li>
<li>証券会社なので難しい漢字が出てくることがあり、どの範囲サブセットするか決めるのが難しい</li>
</ul>
<p>Yaku Han JPは自前ホスティングしてます。</p>
<h3 id="storycap%E5%AF%BE%E5%BF%9C" tabindex="-1"><a href="https://github.com/reg-viz/storycap" target="_blank" rel="noopener noreferrer">storycap</a>対応</h3>
<p>弊社はstorycapで画像回帰テストをしているんですが、フォントのロードを待つ必要があるのでFont Loading APIを使って待機してます。</p>
<pre><code>document.fonts.ready.then(function() {
...
});
</code></pre>
<p>(ネタがなかったので書いてみたけど、全然話が膨らまない…ふつうのことしかしてない…許して…)</p>
<h2 id="%E3%81%8A%E3%81%BE%E3%81%91" tabindex="-1">おまけ</h2>
<p>なし</p>
2019-12-16T06:16:41Z
/posts/2019-12-16_--CSS------------------4-----ce80e992bbb5/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#%E5%A4%89%E6%9B%B4%E3%81%AB%E8%80%90%E3%81%88%E3%81%86%E3%82%8B%E3%81%8B%E3%81%A9%E3%81%86%E3%81%8B">変更に耐えうるかどうか</a></li><li><a href="#%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9%E3%81%AE%E3%81%A8%E3%82%8A%E6%96%B9%E3%81%8C%E9%81%A9%E5%88%87%E3%81%8B%E3%81%A9%E3%81%86%E3%81%8B">スペースのとり方が適切かどうか</a></li><li><a href="#%E4%B8%80%E8%88%AC%E7%9A%84%E3%81%AA%E5%AE%9F%E8%A3%85%E6%96%B9%E6%B3%95%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E3%81%8B">一般的な実装方法になっているか</a></li><li><a href="#%E3%83%AB%E3%83%BC%E3%83%AB%E3%81%AB%E5%89%87%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E3%81%8B%EF%BC%88%E5%89%87%E3%81%A3%E3%81%A6%E3%81%AA%E3%81%84%E3%81%AA%E3%82%89%E3%81%9D%E3%81%AE%E7%90%86%E7%94%B1%EF%BC%89">ルールに則っているか(則ってないならその理由)</a></li><li><a href="#%E3%81%BE%E3%81%A8%E3%82%81">まとめ</a></li></ul></details><p></p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*8gpNTCmexQpxyFSolK-eog.png" alt="" loading="lazy" /></p>
<p>これは<a href="https://qiita.com/advent-calendar/2019/folio-sec" target="_blank" rel="noopener noreferrer">FOLIO Advent Calendar 2019</a> 5日目の記事です。</p>
<p>今回は僕がCSSのレビューで気をつけていることをまとめたいと思います。</p>
<p>皆さんはCSSのレビューしていますか?<br />
CSSって表示が崩れてなければOKで特にレビューしないという人も多いんじゃないでしょうか。<br />
特にWebアプリケーション開発ではレビューが疎かになりがちかなと思います。</p>
<p>レビューに時間をかけすぎることは良いことではないので、僕もすごく細かいところまでレビューすることはありませんが、最低限ここは確認しておこうというのを決めてレビューするようにしています。(好みはあると思うので、それはチーム内とかレビューの中とかでコミュニケーションとって解決してください)</p>
<p>CSS得意じゃないエンジニアの方もいると思うので参考になれば嬉しいです。</p>
<h2 id="%E5%A4%89%E6%9B%B4%E3%81%AB%E8%80%90%E3%81%88%E3%81%86%E3%82%8B%E3%81%8B%E3%81%A9%E3%81%86%E3%81%8B" tabindex="-1">変更に耐えうるかどうか</h2>
<p>要素の大きさや個数などが変更されても表示崩れがないかを確認しています。これはCSSのレビューと言うより表示確認ですが、考慮漏れていることが多いので、なるべく確認するようにしています。よく確認するのは次の項目です。</p>
<ul>
<li>テキストの長さ</li>
<li>リストの個数</li>
<li>画像のサイズ</li>
</ul>
<p>まれにCSS以外が問題の場合もありますが、ほとんどの場合はCSSを修正すれば解消されるはずです。</p>
<h2 id="%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9%E3%81%AE%E3%81%A8%E3%82%8A%E6%96%B9%E3%81%8C%E9%81%A9%E5%88%87%E3%81%8B%E3%81%A9%E3%81%86%E3%81%8B" tabindex="-1">スペースのとり方が適切かどうか</h2>
<p>明確な正解はないのですが、スペースのとり方(どの要素に <code>margin</code> や <code>padding</code> を設定するか)は一応確認しています。この設計が悪いと、デザインを変更したり新しい要素追加するときにけっこう苦労する気がします。</p>
<p>個人的に見てるポイントはこんな感じです。</p>
<ul>
<li>共通コンポーネントに スペースが設定されていないこと</li>
<li>基本的に要素間のスペースは1つの要素に依存していること</li>
<li>表示/非表示が切り替わる要素がある場合、状態が切り替わっても各要素間のスペースが適切に保たれているか</li>
<li>marginの相殺が起きていないか</li>
</ul>
<h2 id="%E4%B8%80%E8%88%AC%E7%9A%84%E3%81%AA%E5%AE%9F%E8%A3%85%E6%96%B9%E6%B3%95%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E3%81%8B" tabindex="-1">一般的な実装方法になっているか</h2>
<p>ここで言う「一般的な実装方法」の定義は、「フロントエンジニア10人に中8人の同意を得られる実装方法」とします。要するに、突飛な実装をしてないかレビューするということです。</p>
<p>極端な例をあげるとすれば、要素を横並びにする際に <code>position: absolute;</code> を使う、などです。</p>
<p>これは好き嫌いの話も入ってくるので程々にレビューする&コミュニケーションを取ることを心がけていますが、無理のある実装は後々変更がつらくなるので、なるべく避けたいなという気持ちがあります。</p>
<h2 id="%E3%83%AB%E3%83%BC%E3%83%AB%E3%81%AB%E5%89%87%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E3%81%8B%EF%BC%88%E5%89%87%E3%81%A3%E3%81%A6%E3%81%AA%E3%81%84%E3%81%AA%E3%82%89%E3%81%9D%E3%81%AE%E7%90%86%E7%94%B1%EF%BC%89" tabindex="-1">ルールに則っているか(則ってないならその理由)</h2>
<p>CSSのルール(色やスペースなど)を決めている場合、そのルールに則っているかどうかを確認します。当たり前かもしれないけどとても重要なことです。</p>
<p>またそのルールからはみ出ている場合、なぜそうなっているかを確認するようにしています。デザイナーの人が新しく入った人でそのルールを把握していないとかどうしてもそこだけルールから外れたデザインにしたいと言われたとか、実装以外の部分が絡んでいる場合、その判断が本当に適切なのかもレビューします。</p>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81" tabindex="-1">まとめ</h2>
<p>コンポーネントベースで開発しているときは、上記のことに気をつければ最低限のクオリティを担保できるんじゃないかなと思います。</p>
<p>これ以外にも気をつけてることあるよ!って人は是非コメントください。</p>
2019-12-25T03:16:42Z
/posts/2019-12-25_------UI-bb4067d5d52f/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#%E3%80%8C%E8%AA%A4%E8%AA%8D%E3%80%8D%E3%81%A8%E3%81%AE%E6%88%A6%E3%81%84">「誤認」との戦い</a><ul><li><a href="#%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%83%A9%E3%82%A4%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%82%82%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%A7%E3%81%82%E3%82%8B">テキストライティングもデザインである</a></li></ul></li><li><a href="#%E5%B0%8F%E3%81%95%E3%81%84%E6%96%87%E5%AD%97%E3%82%92%E4%BD%BF%E3%82%8F%E3%81%AA%E3%81%84%E3%81%93%E3%81%A8">小さい文字を使わないこと</a></li><li><a href="#%E3%81%82%E3%82%8A%E3%81%AE%E3%81%BE%E3%81%BE%E3%82%92%E4%BC%9D%E3%81%88%E3%82%8B%E9%9B%A3%E3%81%97%E3%81%95">ありのままを伝える難しさ</a></li><li><a href="#%E3%81%BE%E3%81%A8%E3%82%81">まとめ</a></li></ul></details><p></p>
<p>これは<a href="https://qiita.com/advent-calendar/2019/folio-sec" target="_blank" rel="noopener noreferrer">FOLIO Advent Calendar 2019</a> 6日目の記事です。</p>
<p>最初に断っておくと、この記事はなにか解決策を示すものではなく僕らが日々悩んでることをつらつらと書き連ねたものです。同じような事考えてる人いたらぜひコメントください。</p>
<p>FOLIOは証券会社なので<strong>法令遵守</strong>が他の業界よりも厳しく求められます。(違反していると公の機関から指導されます。)明確な違反ではないけどグレーな表現や機能も怒られる場合があるので慎重に検討しなければなりません。</p>
<p>また、証券会社という特性から「<strong>倫理的</strong>」「<strong>誠実</strong>」であることも他の業界より強く求められます。(最近だと「Ethical UX」の話が規制産業以外のところでも注目されてますよね。)</p>
<p>そのため、FOLIOでは「サービスとして法令遵守し、お客様に対して誠実であり、使い勝手の良いUI」を開発することが求められます。</p>
<p>この条件を達成するために僕らのチームで日々考えていることをまとめてみました。</p>
<h2 id="%E3%80%8C%E8%AA%A4%E8%AA%8D%E3%80%8D%E3%81%A8%E3%81%AE%E6%88%A6%E3%81%84" tabindex="-1">「誤認」との戦い</h2>
<p>最もよく考えるのは「<strong>お客様に事実誤認させないこと</strong>」です。例えば次のようなケースが考えられます。</p>
<ul>
<li>購入可能金額よりも多く購入できるように見える</li>
<li>資産が実際は増えていないのに増えているように見える</li>
<li>(本当は停止しないが)条件を達成したら積立が自動で停止するように勘違いした</li>
</ul>
<p>実際の状況をありのままに伝え、こちらの意図に反した行動を取らせないようにする</p>
<p>誤認を招いてしまった場合、金融商品は常にお金が動くので非常に多くの問い合わせがくることが予想されます。そうなるとCSや開発チームの業務量が爆増するだけでなく、サービスへの信頼感も低下してしまいます。</p>
<p>特にFOLIOのようなカジュアルな見た目のUIを作るとき、テキストの雰囲気が軽くなってしまったり重大さが伝わりにくかったりするので、非常に気をつかいます。</p>
<p>しかし誤認に怯えているだけでは使いやすいく楽しく投資ができるUIを作ることはできません。僕のチームではこんなことをよく考えています。</p>
<ul>
<li>伝えたい情報は何か?どんな行動を促したいか?(ゴール)</li>
<li>「正しい情報」や「顧客が予想しているアクション」とのギャップはあるか?(ゴールと正しさのギャップを確認)</li>
<li>ギャップがある場合、法令遵守できているか? or 顧客利益につながるか?</li>
<li>解釈に幅がありそうな場合は少し悪い方に考える</li>
<li>誇張をしない</li>
</ul>
<h3 id="%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%83%A9%E3%82%A4%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%82%82%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%A7%E3%81%82%E3%82%8B" tabindex="-1">テキストライティングもデザインである</h3>
<p>この「誤認を回避する」ことを日々考えていると、文章もデザインの重要な要素の一つだと改めて強く実感します。文章の語調や長さなどでUIの印象もガラッと変わりますし、1つでも間違ったことを書いてしまうとお客様の体験を損ねてしまいます。</p>
<h2 id="%E5%B0%8F%E3%81%95%E3%81%84%E6%96%87%E5%AD%97%E3%82%92%E4%BD%BF%E3%82%8F%E3%81%AA%E3%81%84%E3%81%93%E3%81%A8" tabindex="-1">小さい文字を使わないこと</h2>
<p>よくサービス側に不都合な注意書きが極小な文字で書かれていることがあります。ユーザーを騙すつもりがなく、見た目を良くするために注意書きの文字を小さくして目立たないようにしたい、という気持ちも理解できます。しかしこれは倫理的ではなく不誠実な印象を与えかねません。(考えすぎかもしれませんが。)</p>
<p>小さい文字の使用には慎重になるべきです。</p>
<p>FOLIOではデザインルールの中でアプリケーションで使用する文字サイズを12px以上に統一しています。リスクに関する情報などこちらにとって不都合になりうる文言もこのルールに則り12px以上のサイズで表記しています。</p>
<p>注意書きをきちんと読んでもらえるようなデザインにすることは、企業イメージだけでなく、問い合わせの件数を減らし全体の業務効率を向上させることにも寄与すると考えています。</p>
<h2 id="%E3%81%82%E3%82%8A%E3%81%AE%E3%81%BE%E3%81%BE%E3%82%92%E4%BC%9D%E3%81%88%E3%82%8B%E9%9B%A3%E3%81%97%E3%81%95" tabindex="-1">ありのままを伝える難しさ</h2>
<p>「法令遵守」「誤認させないこと」を達成するためには情報を正確に伝えることが重要になります。</p>
<p>しかし、プレーンな情報というのは生CSVファイルを見ているのと同じで何も伝えないのです。情報をきちんと伝達するためには情報を整理・分別し重み付けをすることが必要になってきます。その「重み付け」をどこまでやるのかが問題になってきます。</p>
<p>これには僕も具体的な解決策を見いだせてなく、その都度各部署とコミュニケーションをとって進めています。ときには他社事例なども参考にしつつ、情報をどう伝えるか日々考えています。</p>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81" tabindex="-1">まとめ</h2>
<p>FOLIOでは誠実なUI構築に興味のあるフロントエンドエンジニアを絶賛大募集中です!</p>
<p><a href="https://corp.folio-sec.com/thespecialone/" title="https://corp.folio-sec.com/thespecialone/" target="_blank" rel="noopener noreferrer"><strong>TOP | The Special One</strong><br />
_FOLIOの採用サイト「The Special One」のトップページです。募集職種、カルチャー、ブログ、FAQといったコンテンツで構成されています。_corp.folio-sec.com</a><a href="https://corp.folio-sec.com/thespecialone/" target="_blank" rel="noopener noreferrer"></a></p>
2019-12-28T05:23:37Z
/posts/2019-12-28_-------ecaf65e309d3/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#%E4%B8%8B%E5%87%A6%E7%90%86%E3%82%92%E3%81%97%E3%81%A3%E3%81%8B%E3%82%8A%E3%81%99%E3%82%8B">下処理をしっかりする</a><ul><li><a href="#%E7%AD%8B%E3%82%92%E5%88%87%E3%82%8B">筋を切る</a></li><li><a href="#%E4%BD%99%E8%A8%88%E3%81%AA%E8%84%82%E8%BA%AB%E3%82%92%E9%99%A4%E3%81%8F">余計な脂身を除く</a></li><li><a href="#%E4%B8%8B%E5%91%B3%E3%82%92%E3%81%A4%E3%81%91%E3%82%8B">下味をつける</a></li><li><a href="#%E8%82%89%E3%81%AE%E6%B8%A9%E5%BA%A6%E3%82%92%E5%B8%B8%E6%B8%A9%E3%81%AB%E6%88%BB%E3%81%99">肉の温度を常温に戻す</a></li></ul></li><li><a href="#%E6%B8%A9%E5%BA%A6%E7%AE%A1%E7%90%86%E3%82%92%E3%81%97%E3%81%A3%E3%81%8B%E3%82%8A%E3%81%99%E3%82%8B">温度管理をしっかりする</a></li><li><a href="#%E4%BA%88%E7%86%B1%E3%81%A7%E7%81%AB%E3%82%92%E9%80%9A%E3%81%99%E3%81%93%E3%81%A8%E3%82%92%E6%84%8F%E8%AD%98%E3%81%99%E3%82%8B">予熱で火を通すことを意識する</a></li><li><a href="#%E9%B6%8F%E3%82%82%E3%82%82%E8%82%89%E3%81%AF%E7%9A%AE%E7%9B%AE%E3%82%92%E4%B8%8B%E3%81%AB%E3%81%97%E3%81%A6%E5%BC%B1%E7%81%AB%E3%81%A7%E7%84%BC%E3%81%8F">鶏もも肉は皮目を下にして弱火で焼く</a></li><li><a href="#%E5%B7%A5%E7%A8%8B%E8%A1%A8">工程表</a></li><li><a href="#%E3%81%BE%E3%81%A8%E3%82%81">まとめ</a></li></ul></details><p></p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*9P8ZuCrA2hR3BHw7DY9MdQ.jpeg" alt="" loading="lazy" /></p>
<p>僕は肉を焼くことが好きだ。たまに煮たりもするけど。</p>
<p>みんな難しいって言うけど、肉を美味しく焼くことは基本的なポイント抑えたら誰でも簡単にできる。</p>
<h2 id="%E4%B8%8B%E5%87%A6%E7%90%86%E3%82%92%E3%81%97%E3%81%A3%E3%81%8B%E3%82%8A%E3%81%99%E3%82%8B" tabindex="-1">下処理をしっかりする</h2>
<p>何事も準備が大事。ここで言う下処理は大きく4つ。</p>
<ul>
<li>筋を切る</li>
<li>余計な脂身を除く</li>
<li>下味をつける</li>
<li>肉の温度を常温に戻す</li>
</ul>
<h3 id="%E7%AD%8B%E3%82%92%E5%88%87%E3%82%8B" tabindex="-1">筋を切る</h3>
<p>これは言わずもがなだろう。特に安い牛肉は筋がガッツリ入ってることが多いので、しっかり筋を切り肉をたたいて柔らかくすることが大事だ。これをするだけで肉を焼いたときの美味しさが格段にアップする。</p>
<p>僕は小さいナイフでやるけど、慣れてない人は<strong>ミートテンダーライザー</strong>を使うと良い。</p>
<p><a href="https://www.amazon.co.jp/dp/B000FOPVRS/ref=cm_sw_r_tw_dp_U_x_BSwbEbHS3PFC5" title="https://www.amazon.co.jp/dp/B000FOPVRS/ref=cm_sw_r_tw_dp_U_x_BSwbEbHS3PFC5" target="_blank" rel="noopener noreferrer"><strong>Amazon CAPTCHA</strong><br />
_Edit description_www.amazon.co.jp</a><a href="https://www.amazon.co.jp/dp/B000FOPVRS/ref=cm_sw_r_tw_dp_U_x_BSwbEbHS3PFC5" target="_blank" rel="noopener noreferrer"></a></p>
<h3 id="%E4%BD%99%E8%A8%88%E3%81%AA%E8%84%82%E8%BA%AB%E3%82%92%E9%99%A4%E3%81%8F" tabindex="-1">余計な脂身を除く</h3>
<p>脂身は多すぎると美味しくないので適度に取り除く。牛肩ロースの端っことか豚バラ肉の脂とか。好きな人はそのままどうぞ。</p>
<p>豚バラの脂はネギと一緒に炒めてとっておくと重宝するのでおすすめ。チャーハンとかスープとか炒め物とかに入れると風味が良くなる。</p>
<h3 id="%E4%B8%8B%E5%91%B3%E3%82%92%E3%81%A4%E3%81%91%E3%82%8B" tabindex="-1">下味をつける</h3>
<p>特に厚い肉を焼く時はしっかり下味をつける。料理の美味しさは塩加減で決まる。後からソースを付ける場合でも肉自体に塩味が入ってないとソースの味が浮いてしまってあまり美味しくない。</p>
<p>大きい肉の場合は表面に塩ふっただけだと不十分な場合があるので、フォークなどで穴を空けて下味が中まで入るようにすると良い。</p>
<p>よく「下味の塩の量は肉の重量の1%」と言われるけど、僕は料理人ではないので気にしてない。楽しく適当に焼いて食べるのが良い。しかしあんまりたくさんの塩をふってしまうと浸透圧で肉の水分が抜けすぎてしまうので注意が必要だ。</p>
<p>下味をつけるタイミングだが、<strong>肉を焼く10分前くらい</strong>がいいかなと思う。焼く直前に塩ふるという意見が多いんだけど、それだと肉汁と一緒に流れてしまうので意味がなく、あまり時間を置きすぎると水分が出すぎてしまい肉が固くなるので、10分前くらいが丁度いいんじゃないかなと思ってる。気になる人はいろんな人がいろんなこと言ってるのでそれを参照してほしい。</p>
<h3 id="%E8%82%89%E3%81%AE%E6%B8%A9%E5%BA%A6%E3%82%92%E5%B8%B8%E6%B8%A9%E3%81%AB%E6%88%BB%E3%81%99" tabindex="-1">肉の温度を常温に戻す</h3>
<p><strong>これが一番大事。表面だけでなく中まで常温に戻っているとベスト。</strong></p>
<p>肉を焼く時、焼く時間が長くなると肉の外側に火が入りすぎて固くなってしまう。それを防ぐには<strong>なるべく短い時間で中まで火を通すことが必要</strong>だ。肉が冷たいままだとどうしても焼く時間が長くなってしまうので、常温に戻す必要がある。</p>
<p>加えて、肉の外側と内側に温度差があると焼いたときにムラができて「表面だけ焼けてるけど中は生」という状態になってしまう。これでは美味しくならない。温度を均一にしておくことが大切だ。</p>
<p>冬であれば朝冷蔵庫から出しておいて夜に調理するくらいで問題ないと思う。夏は暑いので調理する1時間前くらいに冷蔵庫から出して置くとよいと思う。</p>
<p>冷蔵庫から出したあと、ラップなどで密封してしまうと温度が戻りにくいので、肉に植物油をなじませ乾燥を防ぎつつ上からアルミホイルをかぶせると良い。(僕はいつもこうしてる。)</p>
<h2 id="%E6%B8%A9%E5%BA%A6%E7%AE%A1%E7%90%86%E3%82%92%E3%81%97%E3%81%A3%E3%81%8B%E3%82%8A%E3%81%99%E3%82%8B" tabindex="-1">温度管理をしっかりする</h2>
<p>料理は温度が重要だ。肉料理では特に。火を通しすぎると固くなってしまうが加熱が充分でないと食中毒になる危険がある。温度計があるとベストだけど、金串刺して温度を確かめてもいいし、それも無理な人はナイフを刺して刺したナイフの温度を触って確かめるでもいい。</p>
<p>火加減はちょっと強めの中火。焼く時間は、スーパーで売ってる薄めなステーキ肉なら30秒〜1分くらい。厚めのお肉の場合は中の温度を確認しつつ調整する。</p>
<h2 id="%E4%BA%88%E7%86%B1%E3%81%A7%E7%81%AB%E3%82%92%E9%80%9A%E3%81%99%E3%81%93%E3%81%A8%E3%82%92%E6%84%8F%E8%AD%98%E3%81%99%E3%82%8B" tabindex="-1">予熱で火を通すことを意識する</h2>
<p>フライパンから取り出したあとも火が入るので、それも計算して加熱時間を調整する。これを考慮しないとミディアムで焼いてたつもりがウェルダンになってしまったみたいなことが起きる。</p>
<p>加熱直後は肉汁が溢れやすい状態にあるので、予熱で火を通しつつ肉の温度を下げるために肉を休ませるのが良い。基本的には加熱した時間と同じ時間休ませる。</p>
<h2 id="%E9%B6%8F%E3%82%82%E3%82%82%E8%82%89%E3%81%AF%E7%9A%AE%E7%9B%AE%E3%82%92%E4%B8%8B%E3%81%AB%E3%81%97%E3%81%A6%E5%BC%B1%E7%81%AB%E3%81%A7%E7%84%BC%E3%81%8F" tabindex="-1">鶏もも肉は皮目を下にして弱火で焼く</h2>
<p>これは鉄板中の鉄板だけど、鶏もも肉を美味しく焼きたいならこれが一番。皮目から焼くというかほぼ皮の面しか焼かない。80%くらい皮のほうから火を入れて、反対側は20%くらいでOK。こうすることで皮がパリッとなって美味しい。</p>
<h2 id="%E5%B7%A5%E7%A8%8B%E8%A1%A8" tabindex="-1">工程表</h2>
<ol>
<li>肉を買う</li>
<li>肉の筋や脂身を切る</li>
<li>下味をつける</li>
<li>常温に戻す</li>
<li>フライパンを熱する</li>
<li>油を敷いて焼く</li>
<li>肉をフライパンから取り出して休ませる</li>
<li>切って食べる</li>
</ol>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81" tabindex="-1">まとめ</h2>
<p>来年もおいしい肉焼きライフを送りたい。</p>
2020-01-01T07:03:11Z
/posts/2020-01-01_2019-KP---2020-Try-88f5ac0010f8/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#keep">Keep</a><ul><li><a href="#%E7%99%BB%E5%A3%87">登壇</a></li><li><a href="#%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3">デザイン</a></li><li><a href="#%E7%9F%A5%E3%82%8A%E5%90%88%E3%81%84%E3%81%8C%E5%A2%97%E3%81%88%E3%81%9F">知り合いが増えた</a></li><li><a href="#%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%83%81%E3%83%BC%E3%83%A0%E3%81%AE%E3%83%AA%E3%83%BC%E3%83%80%E3%83%BC%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%9F">フロントエンドチームのリーダーになった</a></li></ul></li><li><a href="#problem">Problem</a><ul><li><a href="#%E5%80%8B%E4%BA%BA%E9%96%8B%E7%99%BA">個人開発</a></li><li><a href="#%E8%B2%AF%E9%87%91">貯金</a></li><li><a href="#%E9%81%85%E5%88%BB">遅刻</a></li></ul></li><li><a href="#try">Try</a><ul><li><a href="#podcast">Podcast</a></li><li><a href="#%E5%A4%A7%E5%AD%A6%E9%80%B2%E5%AD%A6">大学進学</a></li><li><a href="#%E9%81%8B%E5%8B%95%E4%B8%8D%E8%B6%B3%E8%A7%A3%E6%B6%88">運動不足解消</a></li><li><a href="#%E3%81%9D%E3%81%AE%E4%BB%96">その他</a></li></ul></li></ul></details><p></p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*LY-fKln8ElUZ95xV2rnBmg.jpeg" alt="" loading="lazy" /></p>
<p>2019年最後の晩餐</p>
<h2 id="keep" tabindex="-1">Keep</h2>
<h3 id="%E7%99%BB%E5%A3%87" tabindex="-1">登壇</h3>
<p>2019年は大きめのカンファレンスに3つ登壇できてよかった。特に次世代Webカンファレンスはめちゃくちゃすごい人と一緒に登壇&お話できて印象に残っている。福岡と大阪のカンファレンスでも登壇できて、それぞれの地域の人達とつながりを持てたのが良かったと思う。2020年は国内のカンファレンスだけでなく海外のカンファレンスにも登壇できるようネタとか英語とか準備したい。</p>
<h3 id="%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3" tabindex="-1">デザイン</h3>
<p>デザインの勉強や実践ができたのが 良かったような気がする。ウェブサイトのデザインだけじゃなくて雑誌のレイアウトとか名刺とかもやったし、デザイン系の本を沢山読んで仕事にも少しずつ取り入れられたのが良かった。2020年もインプット・アウトプット両方バランスよくやっていきたい。デザイン系のイベントで登壇とかできたら良いな。</p>
<h3 id="%E7%9F%A5%E3%82%8A%E5%90%88%E3%81%84%E3%81%8C%E5%A2%97%E3%81%88%E3%81%9F" tabindex="-1">知り合いが増えた</h3>
<p>界隈で面識のある方がとても増えて良い刺激をたくさんもらえた1年だったなあと思う。勉強会以外でも飲みに行ったりしてキャリアとか技術とかについてお話できたのがとても楽しかった。2020年もたくさんの人と知り合えたら嬉しい。</p>
<h3 id="%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%83%81%E3%83%BC%E3%83%A0%E3%81%AE%E3%83%AA%E3%83%BC%E3%83%80%E3%83%BC%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%9F" tabindex="-1">フロントエンドチームのリーダーになった</h3>
<p>消去法的にではあるけど、仕事でリーダーというポジションになった。今のところリーダーっぽい働きができてるかわからないけど、自分なりに一生懸命やっていきたい。リーダーになることってタイミングとか人選とかあって簡単になれるものでもない気がするので、自分の成長にも繋げられたらなと思っている。</p>
<h2 id="problem" tabindex="-1">Problem</h2>
<h3 id="%E5%80%8B%E4%BA%BA%E9%96%8B%E7%99%BA" tabindex="-1">個人開発</h3>
<p>2019年ほとんど個人開発できなかった。もともと業務外でコードを書く習慣が薄いというのはあるけど。それにしても書かなすぎだったなあと思う。あんまり新しい技術に触れられなかったのも反省…。2020年はもうちょっとコード書いていきたいな。</p>
<h3 id="%E8%B2%AF%E9%87%91" tabindex="-1">貯金</h3>
<p>収入は増えたはずなのに全く貯金ができない。意味がわからない。どこにお金が消えていくんだ…。2020年は支出管理しっかりやっていくぞ。</p>
<h3 id="%E9%81%85%E5%88%BB" tabindex="-1">遅刻</h3>
<p>どうにか改善していきたいです。はい。</p>
<h2 id="try" tabindex="-1">Try</h2>
<h3 id="podcast" tabindex="-1">Podcast</h3>
<p>最近は何かを啓蒙したくてLTするというよりただただ自分が喋りたいという欲求を満たしに行くみたいな部分があって、それなら勉強会とか行かなくてもPodcastみたいなのじぶんでやればええやんということに気づいたので2020年はPodcastというかVoiceLogみたいなのやってこうかと思います。</p>
<p>テーマは特に決めずその時気になってることを30分くらい喋って終わる簡単なやつにしようかなって考えてます。僕は話が長くなるくせがあるので、それもちょっと矯正できたらいいな。</p>
<h3 id="%E5%A4%A7%E5%AD%A6%E9%80%B2%E5%AD%A6" tabindex="-1">大学進学</h3>
<p>僕は大学中退なんだけど、大学院でCS or デザインの勉強したいなとずっと思っていて、そのためにどうにか学士号を取得したいので今年から通信制の大学に入学して学士号を取得したいと思ってる。</p>
<p>3年次編入するか、科目等履修生になって単位だけ取得&学位認定機構で学士号を取得するか、普通に1年生からやり直すか、悩んでいる。大学の授業がどれくらい大変かにもよるけど、当面は普通に働きながらやっていくつもりだ。</p>
<h3 id="%E9%81%8B%E5%8B%95%E4%B8%8D%E8%B6%B3%E8%A7%A3%E6%B6%88" tabindex="-1">運動不足解消</h3>
<p>僕はゲーマー&引きこもりなのでジムに行くこと自体が非常に苦痛で申し込んだけど1回も行かなかったりするんで、どうにか家で体を動かしていきたい。2019年前半は自転車乗ってたんだけど、パンクした自転車を修理するのがめんどくさすぎて放置しているのでそれも直さないと…。</p>
<h3 id="%E3%81%9D%E3%81%AE%E4%BB%96" tabindex="-1">その他</h3>
<ul>
<li>個人開発</li>
<li>海外登壇準備(英語、技術ネタ)</li>
<li>貯金&投資&支出管理</li>
</ul>
2020-04-17T12:56:35Z
/posts/2020-04-17_------------20200417-83de6f6e36dc/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#%E5%83%95%E3%81%AE%E5%BF%83%E3%81%AE%E3%83%A4%E3%83%90%E3%82%A4%E3%82%84%E3%81%A4">僕の心のヤバイやつ</a></li><li><a href="#%E9%AD%94%E5%85%A5%E3%82%8A%E3%81%BE%E3%81%97%E3%81%9F%E5%85%A5%E9%96%93%E3%81%8F%E3%82%93">魔入りました入間くん</a></li><li><a href="#%E3%83%AF%E3%83%B3%E3%83%8A%E3%82%A4%E3%83%88%E3%83%A2%E3%83%BC%E3%83%8B%E3%83%B3%E3%82%B0">ワンナイトモーニング</a></li><li><a href="#%E5%A5%BD%E3%81%8D%E3%81%AA%E5%AD%90%E3%81%8C%E3%82%81%E3%81%8C%E3%81%AD%E3%82%92%E5%BF%98%E3%82%8C%E3%81%9F">好きな子がめがねを忘れた</a></li><li><a href="#%E4%B9%9D%E9%BE%8D%E3%82%B8%E3%82%A7%E3%83%8D%E3%83%AA%E3%83%83%E3%82%AF%E3%83%AD%E3%83%9E%E3%83%B3%E3%82%B9">九龍ジェネリックロマンス</a></li><li><a href="#%E3%82%88%E3%81%B5%E3%81%8B%E3%81%97%E3%81%AE%E3%81%86%E3%81%9F">よふかしのうた</a></li><li><a href="#%E3%83%8E%E3%83%BC%E3%83%BB%E3%82%AC%E3%83%B3%E3%82%BA%E3%83%BB%E3%83%A9%E3%82%A4%E3%83%95">ノー・ガンズ・ライフ</a></li><li><a href="#%E3%82%AE%E3%83%A3%E3%83%AB%E3%81%A8%E6%81%90%E7%AB%9C">ギャルと恐竜</a></li></ul></details><p></p>
<p>最近読んでるマンガを紹介しようと思った。でもネタバレになる境界がわからんので雑になってしまった。気になったらとりあえずググってくれ。</p>
<h2 id="%E5%83%95%E3%81%AE%E5%BF%83%E3%81%AE%E3%83%A4%E3%83%90%E3%82%A4%E3%82%84%E3%81%A4" tabindex="-1">僕の心のヤバイやつ</h2>
<p>これはまじでやばい。本当にやばい。市川がなんとなく自分に重なるところもありつつ心のいろんな部分をえぐられる。心情の描写がとても丁寧なのも良い。最高。5月からは隔週更新らしいのでみんな読んで。</p>
<p><a href="https://mangacross.jp/comics/yabai" title="https://mangacross.jp/comics/yabai" target="_blank" rel="noopener noreferrer"><strong>僕の心のヤバイやつ 【待望の第3巻6月8日発売!】 | 桜井のりお |試し読み・無料マンガサイトはマンガクロス</strong><br />
_祝! 宝島社「このマンガがすごい!2020」オトコ編第3位!! 次にくるマンガ大賞2019 Webマンガ部門第5位!! コミックス①、②巻累計30万部突!! SNSで超話題の陰キャ少年と陽キャ美少女の 極甘青春ラブコメディ!!…_mangacross.jp</a><a href="https://mangacross.jp/comics/yabai" target="_blank" rel="noopener noreferrer"></a></p>
<h2 id="%E9%AD%94%E5%85%A5%E3%82%8A%E3%81%BE%E3%81%97%E3%81%9F%E5%85%A5%E9%96%93%E3%81%8F%E3%82%93" tabindex="-1">魔入りました入間くん</h2>
<p>THE・少年漫画、友情努力勝利!って感じのマンガなんだけど、厚かましくないというか丁度いい温度感というか、すごくしっくり来る。異世界転生ものなんだけど、無双するってよりか自分の強みを生かして頑張ってるところも良い。これからの展開も見逃せない感じになってきてる。</p>
<h2 id="%E3%83%AF%E3%83%B3%E3%83%8A%E3%82%A4%E3%83%88%E3%83%A2%E3%83%BC%E3%83%8B%E3%83%B3%E3%82%B0" tabindex="-1">ワンナイトモーニング</h2>
<p>好き。</p>
<h2 id="%E5%A5%BD%E3%81%8D%E3%81%AA%E5%AD%90%E3%81%8C%E3%82%81%E3%81%8C%E3%81%AD%E3%82%92%E5%BF%98%E3%82%8C%E3%81%9F" tabindex="-1">好きな子がめがねを忘れた</h2>
<p>最初は三重さん眼鏡忘れすぎてどうやって生活してるねんって突っ込みたくなるんだけど、途中からは**「もっと眼鏡忘れてくれーーー!!!!!」**ってなる。</p>
<h2 id="%E4%B9%9D%E9%BE%8D%E3%82%B8%E3%82%A7%E3%83%8D%E3%83%AA%E3%83%83%E3%82%AF%E3%83%AD%E3%83%9E%E3%83%B3%E3%82%B9" tabindex="-1">九龍ジェネリックロマンス</h2>
<p>好き。</p>
<h2 id="%E3%82%88%E3%81%B5%E3%81%8B%E3%81%97%E3%81%AE%E3%81%86%E3%81%9F" tabindex="-1">よふかしのうた</h2>
<p>だがしかしのコトヤマ先生の作品。一見ラブコメっぽいんだけど実はそうじゃなくて、人間のいろんな感情とそれについてのリアクションが細かく描かれていて面白い。ナズナちゃんみたいな吸血鬼に振り回されてみたい人生だった。</p>
<h2 id="%E3%83%8E%E3%83%BC%E3%83%BB%E3%82%AC%E3%83%B3%E3%82%BA%E3%83%BB%E3%83%A9%E3%82%A4%E3%83%95" tabindex="-1">ノー・ガンズ・ライフ</h2>
<p>頭が銃になっちゃった人?がドンパチやるマンガ。アニメもやってた。SFアクション好きな人なら絶対ハマると思う。</p>
<h2 id="%E3%82%AE%E3%83%A3%E3%83%AB%E3%81%A8%E6%81%90%E7%AB%9C" tabindex="-1">ギャルと恐竜</h2>
<p>恐竜がかわいい。ギャルももちろんかわいい。登場人物みなかわいい。</p>
2020-04-27T09:12:30Z
/posts/2020-04-27_---v-2020-spring-d1ae79f182b/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#from-(2018.10-~-2020.04)">From (2018.10 ~ 2020.04)</a></li><li><a href="#to-(2020.05-~)">To (2020.05 ~)</a></li></ul></details><p></p>
<p><img src="https://cdn-images-1.medium.com/max/800/1*6CfI9AlBp9w8ORkJOaWZrw.png" alt="" loading="lazy" /></p>
<h2 id="from-(2018.10-~-2020.04)" tabindex="-1">From (2018.10 ~ 2020.04)</h2>
<ul>
<li><a href="https://corp.folio-sec.com/" target="_blank" rel="noopener noreferrer">株式会社FOLIO</a></li>
</ul>
<h2 id="to-(2020.05-~)" tabindex="-1">To (2020.05 ~)</h2>
<ul>
<li><a href="https://classdo.com/ja/" target="_blank" rel="noopener noreferrer">classdo inc.</a></li>
<li><a href="https://corp.folio-sec.com/" target="_blank" rel="noopener noreferrer">株式会社FOLIO</a> (業務委託)</li>
</ul>
2020-06-05T15:30:59Z
/posts/2020-06-05_-----------------------------1------af19fb49bf47/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#%E3%81%82%E3%81%AA%E3%81%9F%E3%81%AF%E3%81%A0%E3%82%8C%EF%BC%9F">あなたはだれ?</a></li><li><a href="#%E3%81%AA%E3%82%93%E3%81%A7%E3%83%87%E3%82%B6%E3%82%A4%E3%83%8A%E3%83%BC%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%9F%E3%81%AE%EF%BC%9F">なんでデザイナーになったの?</a><ul><li><a href="#%E4%BB%8A%E5%9B%9E%E3%81%AE%E8%BB%A2%E8%81%B7%E6%B4%BB%E5%8B%95%E3%81%A7%E6%84%9F%E3%81%98%E3%81%9F%E3%81%93%E3%81%A8">今回の転職活動で感じたこと</a></li></ul></li><li><a href="#%E5%AE%9F%E9%9A%9B%E3%81%AB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%8A%E3%83%BC%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%A6%E3%81%A9%E3%81%86%EF%BC%9F">実際にデザイナーになってどう?</a></li><li><a href="#%E3%81%93%E3%82%8C%E3%81%8B%E3%82%89%E8%80%83%E3%81%88%E3%81%A6%E3%81%84%E3%82%8B%E3%81%93%E3%81%A8">これから考えていること</a></li></ul></details><p></p>
<p>最近転職してUIデザイナーっぽくなったので振り返ってみました。<br />
自分語りですが誰かのキャリアの参考になれば嬉しいです。</p>
<h2 id="%E3%81%82%E3%81%AA%E3%81%9F%E3%81%AF%E3%81%A0%E3%82%8C%EF%BC%9F" tabindex="-1">あなたはだれ?</h2>
<p>takanoripです。前職までフロントエンドエンジニアとして5年くらい働いてました。今でも副業とか趣味プロジェクトとかでコード書いてます。</p>
<p>Web制作会社でマークアップしたりアニメーション実装したり事業会社でReactとかVue.jsとかでアプリケーション開発したりしてました。</p>
<p>今はClassDoという会社でインターフェースデザイナー兼エンジニアみたいなポジションで働いてます。ここ1ヶ月はデザインばっかりやってます。</p>
<h2 id="%E3%81%AA%E3%82%93%E3%81%A7%E3%83%87%E3%82%B6%E3%82%A4%E3%83%8A%E3%83%BC%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%9F%E3%81%AE%EF%BC%9F" tabindex="-1">なんでデザイナーになったの?</h2>
<p>これまでのキャリアの話とかはこの記事でしてるので、気になる方いたら読んでみてください。</p>
<p><a href="https://note.com/foliobackstage/n/nf3cec220e11f" title="https://note.com/foliobackstage/n/nf3cec220e11f" target="_blank" rel="noopener noreferrer"><strong>様々な職種の「橋渡し」ができる、理想のフロントエンドエンジニアを目指して|FOLIO Backstage|note</strong><br />
_今回はFOLIOでフロントエンドエンジニアとして活躍している大木尊紀(@takanoripe)へのインタビューです。エンジニアでありながら、ディレクター的、デザイン的な思考でプロダクトの開発に寄与している大木は、どういう思いでFOLIOに入…_note.com</a><a href="https://note.com/foliobackstage/n/nf3cec220e11f" target="_blank" rel="noopener noreferrer"></a></p>
<h3 id="%E4%BB%8A%E5%9B%9E%E3%81%AE%E8%BB%A2%E8%81%B7%E6%B4%BB%E5%8B%95%E3%81%A7%E6%84%9F%E3%81%98%E3%81%9F%E3%81%93%E3%81%A8" tabindex="-1">今回の転職活動で感じたこと</h3>
<p>上の記事とか各種登壇とかのおかげで「UIデザイン+エンジニアの人」という認識が広まったのか、今回の転職活動では「<strong>UIデザイン寄りのフロントエンドエンジニア</strong>」みたいなポジションでお誘いをいただくことが多かったです。僕自身もその分野に興味があったし面接でもそういうポジションやっていきたいという話をしていて、とても良いお誘いをいくつも頂けて感謝しかありません。しかし、一方でこう思っていました…。</p>
<p><strong>「デザイナー経験がないやつがデザインのこと偉そうに語ってて大丈夫なんか?」</strong></p>
<p>ということでデザイナーとして働き今まで以上にインターフェースデザインに真剣に向き合うことは僕のキャリアにプラスになるんじゃないかなと思ったわけです。<br />
また今までずっとエンジニア目線でデザインに取り組んでいたので、デザイナーとして働くときに今まで蓄えてきた経験がどう生きるのか(もしくは全く生きないのか)試してみたいなと思ったというのもあります。</p>
<p>でも全くコードを書かなくなるのも違うなと思ってて、デザイナーとエンジニア両方できるとこで働けたらいいな、なんて考えていました。今の職場はそれが実現できそうだなと思って入社を決めました。</p>
<h2 id="%E5%AE%9F%E9%9A%9B%E3%81%AB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%8A%E3%83%BC%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%A6%E3%81%A9%E3%81%86%EF%BC%9F" tabindex="-1">実際にデザイナーになってどう?</h2>
<p>いままでデザインに興味はあったけどメイン業務がデザインではなかったので、実務スキル(チーム内でのコミュニケーションとかデザインプロセスどうやってくかとか1つの作業にかかる時間とか)がめちゃくちゃ足りてないことを実感しています。ひよっこです。世の中のデザイナーの方々まじすごい。</p>
<p>エンジニアとしてデザインをレビューする側のときは気づけてた部分がデザインする側になると気づけなくなるとかもあり、もっと場数を踏んで鍛えていかねば…という気持ちしかないです。</p>
<p>あとデザインレビューかなり緊張します。PRのレビューより緊張します。</p>
<h2 id="%E3%81%93%E3%82%8C%E3%81%8B%E3%82%89%E8%80%83%E3%81%88%E3%81%A6%E3%81%84%E3%82%8B%E3%81%93%E3%81%A8" tabindex="-1">これから考えていること</h2>
<p>直近は実務スキル鍛えつつ、インターフェースデザインだけじゃなくてグラフィックデザインも少しずつやっていきたいです。(アイコンとかバナーとかデザインできると捗るので、やはり避けては通れないか…という気持ち。)</p>
<p>オンラインのデザインスクール通いたいので、良いデザインスクール知ってる方いたら教えて下さい!(英語でも可、たぶん)</p>
<p>しかしコードはこれからも書いてくつもりなので、何かしらの形でコード書いたり、オーガナイザーをしている<a href="https://www.youtube.com/channel/UCfToJ-sTOqvBnnuVq3zdZhA" target="_blank" rel="noopener noreferrer">Web Platform Study Group</a>の活動を通してフロントエンド周辺の技術を追いかけたりしたいなと思ってます。(チャンネル登録よろしくお願いします!)</p>
<p>なんとなく「Webでインターフェースの人と言ったらtakanorip」って感じになれたら嬉しいなと思ってます。技術とデザインの両面から新しいインターフェースを創造できる、そんな人間になりたいな。</p>
2020-06-30T00:00:00Z
/posts/2020-06-30-init2020/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#%E6%8A%80%E8%A1%93%E6%A7%8B%E6%88%90">技術構成</a><ul><li><a href="#%E4%BB%8A%E5%BE%8C%E5%AF%BE%E5%BF%9C%E3%81%97%E3%81%9F%E3%81%84%E6%A9%9F%E8%83%BD%E4%B8%80%E8%A6%A7">今後対応したい機能一覧</a></li></ul></li></ul></details><p></p>
<p>こんにちは。takanoripです。ブログをつくってみました。</p>
<h2 id="%E6%8A%80%E8%A1%93%E6%A7%8B%E6%88%90" tabindex="-1">技術構成</h2>
<p>今回は<a href="https://www.11ty.dev/" target="_blank" rel="noopener noreferrer"><code>11ty</code></a>を使った。プレーンなStatic Site Generator。もともとあったポートフォリオを増築したので、ちょっといびつな設計になってなくもない。気になる人は<a href="https://github.com/takanorip/portfolio-version3" target="_blank" rel="noopener noreferrer">GitHubのリポジトリ</a>をみてね。(コード汚いのは許して)</p>
<p>11tyは比較的Pluginも充実しててお手軽に始められるので良い。今回使用したPlugin, Libraryたちはこんな感じ。</p>
<ul>
<li><a href="https://github.com/11ty/eleventy-plugin-syntaxhighlight" target="_blank" rel="noopener noreferrer">Syntax Highlighting</a></li>
<li><a href="https://github.com/11ty/eleventy-plugin-rss" target="_blank" rel="noopener noreferrer">RSS</a></li>
<li><a href="https://github.com/valeriangalliat/markdown-it-anchor" target="_blank" rel="noopener noreferrer">markdown-it-anchor</a></li>
<li><a href="https://github.com/Oktavilla/markdown-it-table-of-contents" target="_blank" rel="noopener noreferrer">markdown-it-table-of-contents</a></li>
</ul>
<p>今回対応した機能はこちら。画像のLazy Loadはあんまり画像使う予定ないので後回しにした。</p>
<ul>
<li>タグ</li>
<li>Syntax Highlighting</li>
<li>RSS</li>
<li>目次</li>
</ul>
<p>記事はマークダウンで書けるので、GitHub上で直接編集&コミットする運用でいこうかなとおもいます。Headless CMSも検討したんだけど、そこまでするモチベーションがなかったという話もある。</p>
<h3 id="%E4%BB%8A%E5%BE%8C%E5%AF%BE%E5%BF%9C%E3%81%97%E3%81%9F%E3%81%84%E6%A9%9F%E8%83%BD%E4%B8%80%E8%A6%A7" tabindex="-1">今後対応したい機能一覧</h3>
<ul>
<li>タイトルからog:image自動生成</li>
<li>全文検索</li>
<li>画像遅延読み込み</li>
</ul>
2020-07-01T00:00:00Z
/posts/2020-07-01-suika/
<p>僕はスイカが好き。ひと夏に中くらいのスイカ4つ食べるほどには好き。小さい頃熱を出したときは必ずスイカをねだっていたらしい。ということで僕なりのスイカの食べ方をまとめていこうと思う。</p>
<p>まず、スイカの選び方。これは適当に選ぶのが良い。叩いて確認とか見た目で判断とかできなくもないけど、売り物を叩くのは良くないし見た目が悪くても中身が良いこともある。結局は運なのだ。なので僕は適当になんとなく美味しそうに見えたやつを選ぶ。美味しいかどうかは割ってみてのお楽しみ。それが楽しいと思う。楽しんでなんぼ。</p>
<p>次にスイカを食べるとき。切り方は特にこだわらないけど、三角に切ってかじるのがすき。スイカの汁服につくとしみになるので、あまりスプーンを使って食べないかな。あと僕はスイカの種を出さない。一緒に飲み込んでしまう。スイカの種を出すのはめんどくさいし、テンポが悪くなるし、口の中に含んだ種を出すのは少し汚いように思える。種など気にせずばくばくと食べるのが良い。種を噛んでしまうと苦いとか喉に詰まるとかいう人がいるが、それは無駄な心配だ。スイカの種を飲み込んでも喉にはつまらないし、種を噛み砕くほど強く噛まなくてもスイカは食べれる。僕くらいになると種を噛むことなくスイカを食べることがか可能になる。スイカの種を飲み込むと体に良くないという迷信を信じている人もいるが、健康に一切害はない。</p>
<p>最後にスイカの皮の後片付け。小玉スイカは皮が薄いので普通に捨てる。皮が厚いスイカのときは、皮を漬物にして食べている。一番外側の硬い部分を削ぎ、果肉も少しトリミングする。それを少し厚めにスライスして漬物にする。おすすめはキムチの素で漬けるやつ。うまい。浅漬けの素とかでも良いし塩とうま味調味料とか塩昆布とかで漬けても良い。味は瓜の漬物を少し甘くした感じ。僕はとても好きだけどいつもしょっぱくしすぎてしまう。みなさん是非試してほしい。本当におすすめ。</p>
<p>よいスイカライフを送りましょう。</p>
2020-07-02T00:00:00Z
/posts/2020-07-02-automatic-generated-teasers/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#%E6%A6%82%E8%A6%81">概要</a></li><li><a href="#%E7%B4%B0%E3%81%8B%E3%81%84%E8%A9%B1">細かい話</a><ul><li><a href="#html-to-png">HTML to PNG</a></li><li><a href="#css-in-puppeteer">CSS in puppeteer</a></li><li><a href="#computed-data">Computed Data</a></li></ul></li><li><a href="#%E3%81%9D%E3%81%AE%E4%BB%96">その他</a></li><li><a href="#%E6%84%9F%E6%83%B3">感想</a></li></ul></details><p></p>
<h2 id="%E6%A6%82%E8%A6%81" tabindex="-1">概要</h2>
<p>シェア画像自動生成機能をつけた。<a href="https://fettblog.eu/11ty-automatic-twitter-cards/" target="_blank" rel="noopener noreferrer">この記事</a>を参考にした。</p>
<p>大体こんな感じ。</p>
<ol>
<li>タイトルからシェア画像の元になるページを生成</li>
<li>ブログのデータにシェア画像URLをセット</li>
<li>ベースレイアウトでURLをog:imageにセット</li>
<li>生成元ページのHTMLからPNGを生成</li>
</ol>
<h2 id="%E7%B4%B0%E3%81%8B%E3%81%84%E8%A9%B1" tabindex="-1">細かい話</h2>
<h3 id="html-to-png" tabindex="-1">HTML to PNG</h3>
<p>参考にした記事ではSVGを作ってそれをPNGに変換しているけど、僕はSVGでいろいろ調整していくのがめんどくさかったのでHTMLをPNGにする方法にした。HTMLをPNGに変換するのは<a href="https://github.com/frinyvonnick/node-html-to-image" target="_blank" rel="noopener noreferrer">node-html-to-image</a>を使った。このライブラリはpuppeteerを使ってHTMLを画像に変換してくれるやつ。記事数増えてビルドに時間かかりすぎるようなら考え直すかも。</p>
<h3 id="css-in-puppeteer" tabindex="-1">CSS in puppeteer</h3>
<p><s>外部CSSは反映されなかったので</s>インラインスタイルでCSSを書いた。<s>Google Fontsのフォントを参照したかったんだけど無理だったのでbase64にしてHTMLに埋め込んだ。おかげでHTMLがクソ長になってしまった…。</s><br />
<code>node-html-to-image</code>のoptionにある<code>waitUntil</code>に<code>domcontentloaded</code>を設定すれば外部CSSも適用される。(base64でフォント埋め込んだせいでビルドが大変遅くなっていた…。)</p>
<pre class="language-js"><code class="language-js"><span class="token punctuation">{</span>
<span class="token literal-property property">waitUntil</span><span class="token operator">:</span> <span class="token string">'domcontentloaded'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span></code></pre>
<p>あと「ブラウザで見ると問題ないのに生成した画像だとちょっとずれる」みたいなことがあったのでCSSを調整した。<code>margin-top</code>があると良くないみたいだったので<code>padding</code>にした。</p>
<h3 id="computed-data" tabindex="-1">Computed Data</h3>
<p>記事のデータに<code>ogImageUrl</code>を持たせる必要があったので、11tyの<a href="https://www.11ty.dev/docs/data-computed/" target="_blank" rel="noopener noreferrer"><code>Computed Data</code></a>という仕組みを利用した。<code>blog</code>ディレクトリに<code>blog.11tydata.js</code>を配置して下記のようなコードを書けば、<code>blog</code>配下にある記事すべてに<code>ogImageUrl</code>というデータが追加される。</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">eleventyComputed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token function-variable function">ogImageUrl</span><span class="token operator">:</span> <span class="token parameter">data</span> <span class="token operator">=></span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">https://takanorip.com/teasers/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>page<span class="token punctuation">.</span>fileSlug<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.png</span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h2 id="%E3%81%9D%E3%81%AE%E4%BB%96" tabindex="-1">その他</h2>
<p>11tyの<a href="https://www.11ty.dev/docs/pagination/" target="_blank" rel="noopener noreferrer">Pagination</a>と<a href="https://www.11ty.dev/docs/permalinks/" target="_blank" rel="noopener noreferrer">Permalink</a>はマジで便利。この2つを使えば任意のデータからページを簡単に出力できる。タグの記事一覧もこれらの機能を使って実装されてる。</p>
<h2 id="%E6%84%9F%E6%83%B3" tabindex="-1">感想</h2>
<p>意外とかんたんだった。だいぶ11tyを理解してきた気がする。</p>
2020-07-03T00:00:00Z
/posts/2020-07-03-color-schema/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#%E8%A8%98%E4%BA%8B">記事</a><ul><li><a href="#the-color-system---material-design">The color system - Material Design</a></li><li><a href="#color-in-design-systems---eightshapes">Color in Design Systems - EightShapes</a></li><li><a href="#creating-a-design-system%3A-building-a-color-palette---uxpin">Creating A Design System: Building a Color Palette - UXPin</a></li></ul></li><li><a href="#%E3%83%84%E3%83%BC%E3%83%AB">ツール</a><ul><li><a href="#deep-learning-color-generator---eva-design-system">Deep learning color generator - Eva Design System</a></li><li><a href="#color-tool---material-design">COLOR TOOL - Material Design</a></li><li><a href="#color-designer">Color Designer</a></li></ul></li><li><a href="#%E3%81%9D%E3%81%AE%E4%BB%96%E9%9D%A2%E7%99%BD%E3%81%8B%E3%81%A3%E3%81%9F%E8%A8%98%E4%BA%8B">その他面白かった記事</a><ul><li><a href="#re-approaching-color">Re-approaching Color</a></li><li><a href="#designing-accessible-color-systems---stripe">Designing accessible color systems - stripe</a></li></ul></li></ul></details><p></p>
<p>最近仕事でColor Schema Designをする機会があった。全くの未経験分野だったので様々な記事やツールを参考にしたので、その中でも特に役立ったなと思うものを紹介しようと思う。</p>
<h2 id="%E8%A8%98%E4%BA%8B" tabindex="-1">記事</h2>
<h3 id="the-color-system---material-design" tabindex="-1">The color system - Material Design</h3>
<p><a href="https://material.io/design/color/the-color-system.html" target="_blank" rel="noopener noreferrer">https://material.io/design/color/the-color-system.html</a></p>
<p>言わずと知れたMaterial Designのドキュメント。色の組み合わせ方や選び方などの理論に加えて色の組み合わせ例もたくさんあってとても参考になる。これは必読。<code>Tools for picking colors</code>が便利。全体的に有益な情報しか書いてないが、他にも<a href="https://material.io/design/color/applying-color-to-ui.html" target="_blank" rel="noopener noreferrer">Applying color to UI</a>や<a href="https://material.io/design/color/text-legibility.html" target="_blank" rel="noopener noreferrer">Text legibility</a>のページも読んどくと良さそう。</p>
<h3 id="color-in-design-systems---eightshapes" tabindex="-1">Color in Design Systems - EightShapes</h3>
<p><a href="https://eightshapes.com/articles/color-in-design-systems.html" target="_blank" rel="noopener noreferrer">https://eightshapes.com/articles/color-in-design-systems.html</a></p>
<p>グラフィックデザイナーではない人がカラーパレットを構築するための記事。16項目に項目にわたってかなり丁寧に解説されていて、あまり詳しくない人が躓きそうなポイントが網羅されてる感がある。Accessibilityについても丁寧に書かれているのでグッド。これ読めばだいたいいける気がする。</p>
<h3 id="creating-a-design-system%3A-building-a-color-palette---uxpin" tabindex="-1">Creating A Design System: Building a Color Palette - UXPin</h3>
<p><a href="https://www.uxpin.com/create-design-system-guide/build-color-palette-for-design-system" target="_blank" rel="noopener noreferrer">https://www.uxpin.com/create-design-system-guide/build-color-palette-for-design-system</a></p>
<p>カラーパレット作成の手順をチェックリスト形式で分かりやすく紹介してくれている記事。100%この手順通りにしなくても良いと思うけど、初めてやる人にとっては良い道標になりそう。先に紹介した<code>Color in Design Systems</code>と一緒に読むと良さそう。</p>
<h2 id="%E3%83%84%E3%83%BC%E3%83%AB" tabindex="-1">ツール</h2>
<h3 id="deep-learning-color-generator---eva-design-system" tabindex="-1">Deep learning color generator - Eva Design System</h3>
<p><a href="https://colors.eva.design/" target="_blank" rel="noopener noreferrer">https://colors.eva.design/</a></p>
<p>Brand ColorからSemantic Colorを自動生成してくれるやつ。僕はこれを使って大体の色を決めた後、コントラスト比とかみながら微調整したりした。かなり便利。</p>
<h3 id="color-tool---material-design" tabindex="-1">COLOR TOOL - Material Design</h3>
<p><a href="https://material.io/resources/color/" target="_blank" rel="noopener noreferrer">https://material.io/resources/color/</a></p>
<h3 id="color-designer" tabindex="-1">Color Designer</h3>
<p><a href="https://colordesigner.io/" target="_blank" rel="noopener noreferrer">https://colordesigner.io/</a></p>
<h2 id="%E3%81%9D%E3%81%AE%E4%BB%96%E9%9D%A2%E7%99%BD%E3%81%8B%E3%81%A3%E3%81%9F%E8%A8%98%E4%BA%8B" tabindex="-1">その他面白かった記事</h2>
<h3 id="re-approaching-color" tabindex="-1">Re-approaching Color</h3>
<p><a href="https://design.lyft.com/re-approaching-color-9e604ba22c88" target="_blank" rel="noopener noreferrer">https://design.lyft.com/re-approaching-color-9e604ba22c88</a></p>
<p>カラーセットを決める際のネーミングやどういうアルゴリズムに従うと良いかとその実践について書かれている。色を3次元的に捉えた図がとても新鮮だった。(僕はこういう考え方をしたことがなかった。)</p>
<blockquote>
<p>In interfaces, we don’t need an even distribution of light and dark shades. We need pockets of concentration in light and dark shades with only a few middle shades. We also need to have more control in how colors progress in hue and saturation.</p>
</blockquote>
<p>この部分「たしかにーーー」と思った。</p>
<h3 id="designing-accessible-color-systems---stripe" tabindex="-1">Designing accessible color systems - stripe</h3>
<p><a href="https://stripe.com/blog/accessible-color-systems" target="_blank" rel="noopener noreferrer">https://stripe.com/blog/accessible-color-systems</a></p>
<p>アクセシブルなカラーシステムをどうやって構築するかという記事。色空間について解説されてて非常に為になった。この記事で紹介されてるツールを是非公開してほしい…。</p>
2020-07-08T00:00:00Z
/posts/2020-07-08-medium-11ty/
<h2 id="%E3%82%84%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8" tabindex="-1">やったこと</h2>
<p>このブログを作る前にMediumで書いていた記事をすべて移行してきた。画像はまだMedium上にあるものを参照している。</p>
<p>MediumからHTML形式で記事がエクスポートされるので、このブログで利用するには下記手順でコンテンツを整形する必要がある。</p>
<ol>
<li>HTMLをmarkdownに変換しやすい形に編集</li>
<li>HTMLをmarkdownに変換</li>
<li>markdownに11ty用YAMLヘッダを追加</li>
</ol>
<h2 id="html%E3%82%92markdown%E3%81%AB%E5%A4%89%E6%8F%9B%E3%81%97%E3%82%84%E3%81%99%E3%81%84%E5%BD%A2%E3%81%AB%E7%B7%A8%E9%9B%86" tabindex="-1">HTMLをmarkdownに変換しやすい形に編集</h2>
<p>やったことは下記。<a href="https://github.com/jsdom/jsdom" target="_blank" rel="noopener noreferrer">jsdom</a>を使ってこれらの処理を行った。</p>
<ul>
<li>コンテンツ部分の抜き出し(styleなどの余計な部分を省くため)</li>
<li>iframeとかscriptで表示してたとこをリンクにする</li>
<li>見出しタグ変更</li>
</ul>
<p>iframeはそのまま埋め込んでも良かったんだけど、レスポンシブ対応とかめんどくさかったのでリンクに変換した。見出しはMediumの記事だと<code>h3, h4</code>タグが使われているんだけどこちらの都合で<code>h2, h3</code>タグに変換した。</p>
<h2 id="html%E3%82%92markdown%E3%81%AB%E5%A4%89%E6%8F%9B" tabindex="-1">HTMLをmarkdownに変換</h2>
<p><a href="https://github.com/domchristie/turndown" target="_blank" rel="noopener noreferrer">turndown</a>を使った。<code>headingStyle</code>と<code>codeBlockStyle</code>は11tyの設定と違う書式がデフォルトになってるので上書きした。それ以外は特に問題なく使えた。感謝。</p>
<h2 id="%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E5%85%AC%E9%96%8B%E3%81%97%E3%81%9F" tabindex="-1">ライブラリ公開した</h2>
<p>雑に<code>npm publish</code>した。( <a href="https://www.npmjs.com/package/medium-11ty" target="_blank" rel="noopener noreferrer">https://www.npmjs.com/package/medium-11ty</a> )<br />
こんな感じで使える。</p>
<pre class="language-bash"><code class="language-bash">$ npx medium-11ty index.js <span class="token parameter variable">--input</span> InputPath <span class="token parameter variable">--output</span> OutputPath</code></pre>
2020-07-12T00:00:00Z
/posts/2020-07-12-chaofan/
<p>僕の得意料理の一つにチャーハンがある。わりと美味しく作れると思う。</p>
<p>チャーハンを作るときに気をつけることは唯一つ。<strong>油を多めに使うこと</strong>だ。チャーハンが美味しくできない原因の9割は油が少ないから。たぶん。</p>
<p>そもそも、なぜチャーハンがパラパラになるかというと、ご飯の粒が油でコーティングされるからである。これによりご飯の水分が抜けてパサパサになってしまうことも防げる。卵を先に絡める方法が有名だけど、これをやると卵が邪魔をして米粒が油でコーティングされにくく、ぱさつきやすいのでおすすめできない。米を水で洗う方法はちょっと試したことがないのでわからん。</p>
<p>僕のおすすめの方法は「先に多めの油でご飯だけ炒める」という方法だ。よくあるレシピでは卵を先に炒めるが、家庭のフライパンと火力でこれをやるのは難しいと思う。油の目安は大さじ1、2杯。<br />
ご飯を炒めるときのポイントは、ご飯をほぐすようにすることだ。鍋を振ったりする必要はない。木べらやお玉で少し潰す感じでやると良いかも。おおよそご飯に油がまわったら卵を投入して炒めていく。</p>
<p>油が多いと不健康だから…という人がいるが、サラダ油は飽和脂肪酸が少ないので多少取りすぎても問題ない。そういうのが気になる人はそもそもチャーハンを作るべきではない。炊き込みご飯とか作れば良い。</p>
<p>レッツエンジョイチャーハン</p>
2020-07-13T00:00:00Z
/posts/2020-07-13-algolia-11ty/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#%E6%A6%82%E8%A6%81">概要</a></li><li><a href="#%E8%A8%98%E4%BA%8B%E3%82%92%E7%99%BB%E9%8C%B2%E3%81%99%E3%82%8B">記事を登録する</a><ul><li><a href="#%E8%A8%98%E4%BA%8B%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92json%E5%8C%96%E3%81%99%E3%82%8B">記事データをJSON化する</a></li><li><a href="#api%E7%B5%8C%E7%94%B1%E3%81%A7%E7%99%BB%E9%8C%B2">API経由で登録</a></li></ul></li><li><a href="#%E6%A4%9C%E7%B4%A2ui%E5%AE%9F%E8%A3%85">検索UI実装</a><ul><li><a href="#%E6%9C%AC%E6%96%87%E3%82%92%E6%8A%9C%E7%B2%8B%E3%81%99%E3%82%8B">本文を抜粋する</a></li><li><a href="#index.js">index.js</a></li></ul></li><li><a href="#%E6%84%9F%E6%83%B3">感想</a></li></ul></details><p></p>
<h2 id="%E6%A6%82%E8%A6%81" tabindex="-1">概要</h2>
<p>ブログに全文検索機能を実装したかったので<a href="https://www.algolia.com/" target="_blank" rel="noopener noreferrer">Algolia</a>を導入した。ドキュメントがすごく充実していて助かったが、いくつかつまずいたところがあるのでこの記事にまとめた。ここではAlgoliaとは何かについては特に解説しない。</p>
<p>検索ページは<a href="https://blog.takanorip.com/search/" target="_blank" rel="noopener noreferrer">こちら</a>か右上のナビゲーションからいけるよ。</p>
<h2 id="%E8%A8%98%E4%BA%8B%E3%82%92%E7%99%BB%E9%8C%B2%E3%81%99%E3%82%8B" tabindex="-1">記事を登録する</h2>
<p>まず最初に検索に必要な情報をAlgoliaに登録する。GatsbyだとPluginがあってよしなにやってくれるのだけど、11tyにはそういう便利Pluginがなさそうなので自力実装した。</p>
<h3 id="%E8%A8%98%E4%BA%8B%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92json%E5%8C%96%E3%81%99%E3%82%8B" tabindex="-1">記事データをJSON化する</h3>
<p>Algoliaに登録したい記事データをJSONファイルとして出力する。11tyの<code>Custom Collection</code>と<code>Permalink</code>の機能を利用する。</p>
<p>まず<code>algolia</code>というCustom Collectionをつくる。<a href="https://github.com/takanorip/portfolio-version3/blob/master/.eleventy.js" target="_blank" rel="noopener noreferrer"><code>.eleventy.js</code></a>に次のように書いた。</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token operator">...</span>
<span class="token keyword">const</span> format <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"date-fns/format"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> removeMd <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"remove-markdown"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">bodyText</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">md</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> text <span class="token operator">=</span> <span class="token function">removeMd</span><span class="token punctuation">(</span>md<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> text<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\[\[toc\]\]</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\r?\n</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
eleventyConfig<span class="token punctuation">.</span><span class="token function">addCollection</span><span class="token punctuation">(</span><span class="token string">"algolia"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">collection</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> collection<span class="token punctuation">.</span><span class="token function">getFilteredByTags</span><span class="token punctuation">(</span><span class="token string">"blog"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> body <span class="token operator">=</span> <span class="token function">bodyText</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>template<span class="token punctuation">.</span>frontMatter<span class="token punctuation">.</span>content<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
<span class="token literal-property property">id</span><span class="token operator">:</span> item<span class="token punctuation">.</span>fileSlug<span class="token punctuation">,</span>
<span class="token literal-property property">objectID</span><span class="token operator">:</span> item<span class="token punctuation">.</span>fileSlug<span class="token punctuation">,</span>
<span class="token literal-property property">body</span><span class="token operator">:</span> body<span class="token punctuation">,</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> item<span class="token punctuation">.</span>data<span class="token punctuation">.</span>title<span class="token punctuation">,</span>
<span class="token literal-property property">createdAt</span><span class="token operator">:</span> <span class="token function">format</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>date<span class="token punctuation">,</span> <span class="token string">"yyyy-MM-dd"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token operator">...</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>今回ここで一番時間を使った気がする。<code>item.template.frontMatter.content</code>に記事のmarkdownが格納されているので、こいつをいい感じに整形して本文として使った。(多分このプロパティは参照されることを想定していない気がする。)</p>
<p><code>objectID</code>はAlgoliaが記事を識別するのに参照する値なので必須。これをJSON出力時にセットしておかないとデータの更新ができなくなってしまう。</p>
<p>次にここで定義した<code>algolia</code>CollectionをJSONファイルに出力する。<code>algolia.njk</code>を用意して次のように書く。(<code>\</code>がないとデータが展開されちゃうので実際に書くときは省略してね。)</p>
<pre class="language-html"><code class="language-html">---
permalink: index.json
eleventyExcludeFromCollections: true
---
{\{ collections.algolia | dump | safe }\}</code></pre>
<p>これで記事情報をJSON出力できた。</p>
<h3 id="api%E7%B5%8C%E7%94%B1%E3%81%A7%E7%99%BB%E9%8C%B2" tabindex="-1">API経由で登録</h3>
<p>続いてAlgoliaのAPIをたたいてデータを登録する。これは11tyのbuild処理外でやるので別途ファイルを用意する。</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> algoliasearch <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'algoliasearch'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'../_site/index.json'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> key <span class="token operator">=</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">ALGOLIA_API_KEY</span>
<span class="token keyword">const</span> client <span class="token operator">=</span> <span class="token function">algoliasearch</span><span class="token punctuation">(</span><span class="token string">'YOUR_PROJECT_ID'</span><span class="token punctuation">,</span> key<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> index <span class="token operator">=</span> client<span class="token punctuation">.</span><span class="token function">initIndex</span><span class="token punctuation">(</span><span class="token string">'YOUR_INDICES_NAME'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
index<span class="token punctuation">.</span><span class="token function">saveObjects</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> <span class="token punctuation">{</span>
<span class="token literal-property property">autoGenerateObjectIDIfNotExist</span><span class="token operator">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> objectIDs <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>objectIDs<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<h2 id="%E6%A4%9C%E7%B4%A2ui%E5%AE%9F%E8%A3%85" tabindex="-1">検索UI実装</h2>
<p>記事データを登録できたので検索UIを実装する。UI実装にはAlgoliaが提供している<a href="https://www.algolia.com/products/instantsearch/" target="_blank" rel="noopener noreferrer">Instant Search</a>というプロダクトを利用する。ReactやVue.js、Angularなどは公式UIライブラリが提供されているらしい。今回は特にフレームワークを利用していないので<code>InstantSearch.js</code>を使って実装していく。</p>
<p>Algoliaのプロダクトはどれもドキュメントがすごく充実しているので、僕が書くことは特になにもない。ドキュメントを読めば大丈夫。<br />
<a href="https://www.algolia.com/doc/guides/building-search-ui/getting-started/js/" target="_blank" rel="noopener noreferrer">https://www.algolia.com/doc/guides/building-search-ui/getting-started/js/</a></p>
<h3 id="%E6%9C%AC%E6%96%87%E3%82%92%E6%8A%9C%E7%B2%8B%E3%81%99%E3%82%8B" tabindex="-1">本文を抜粋する</h3>
<p>本文は全文表示されると長すぎるので、検索キーワード周辺を抜粋して表示したい。下記のように設定を追加すると、指定文字数で抜粋された本文が<code>hit._snippetResult</code>に格納されるのでそれを表示する。<code>["body:40"]</code>の<code>body</code>は本文のプロパティ名。</p>
<pre class="language-js"><code class="language-js">instantsearch<span class="token punctuation">.</span>widgets<span class="token punctuation">.</span><span class="token function">configure</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">attributesToSnippet</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"body:40"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span></code></pre>
<h3 id="index.js" tabindex="-1">index.js</h3>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> search <span class="token operator">=</span> <span class="token function">instantsearch</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">indexName</span><span class="token operator">:</span> <span class="token string">"blog"</span><span class="token punctuation">,</span>
<span class="token literal-property property">searchClient</span><span class="token operator">:</span> <span class="token function">algoliasearch</span><span class="token punctuation">(</span><span class="token string">"T3J60MBUA8"</span><span class="token punctuation">,</span> <span class="token string">"8f49853dd7e9830263fdea7ff69497ee"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> configure<span class="token punctuation">,</span> searchBox<span class="token punctuation">,</span> poweredBy<span class="token punctuation">,</span> hits<span class="token punctuation">,</span> pagination <span class="token punctuation">}</span> <span class="token operator">=</span> instantsearch<span class="token punctuation">.</span>widgets
search<span class="token punctuation">.</span><span class="token function">addWidgets</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
<span class="token function">configure</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">attributesToSnippet</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"body:40"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">snippetEllipsisText</span><span class="token operator">:</span> <span class="token string">"[…]"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token function">searchBox</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">container</span><span class="token operator">:</span> <span class="token string">"#searchbox"</span><span class="token punctuation">,</span>
<span class="token literal-property property">placeholder</span><span class="token operator">:</span> <span class="token string">"Search posts"</span><span class="token punctuation">,</span>
<span class="token literal-property property">autofocus</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token function">poweredBy</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">container</span><span class="token operator">:</span> <span class="token string">"#poweredby"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token function">hits</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">container</span><span class="token operator">:</span> <span class="token string">"#hits"</span><span class="token punctuation">,</span>
<span class="token literal-property property">templates</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token function">item</span><span class="token punctuation">(</span><span class="token parameter">hit</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
<a class="takanorip-hitLink" href="/posts/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>hit<span class="token punctuation">.</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">">
<p class="takanorip-hitName"></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>hit<span class="token punctuation">.</span>_highlightResult<span class="token punctuation">.</span>title<span class="token punctuation">.</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></p>
<p class="takanorip-hitExcerpt"></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>hit<span class="token punctuation">.</span>_snippetResult<span class="token punctuation">.</span>body<span class="token punctuation">.</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></p>
</a>
</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token function">pagination</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">container</span><span class="token operator">:</span> <span class="token string">"#pagination"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
search<span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>テンプレートはhandlebarsのように書くこともできるみたいだけど、僕は関数で書いたほうがわかりやすいと思った。</p>
<h2 id="%E6%84%9F%E6%83%B3" tabindex="-1">感想</h2>
<p>けっこうサクッと実装できたので満足。</p>
2020-07-18T00:00:00Z
/posts/2020-07-18-my-favorite-shoes-brands/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#rivieras">Rivieras</a></li><li><a href="#camper">Camper</a></li><li><a href="#clarks">Clarks</a></li></ul></details><p></p>
<h2 id="rivieras" tabindex="-1">Rivieras</h2>
<p><a href="https://www.aman.ne.jp/brands/rivieras/" target="_blank" rel="noopener noreferrer">https://www.aman.ne.jp/brands/rivieras/</a></p>
<p>スリッポンのブランド。スリッポンとかエスパドリーユは安っぽい見た目のものが多い気がするけど、これはとてもかっこよく作りもしっかりしてて良い。サンダルより見た目おしゃれで歩きやすく、普通の靴より涼しいし洗いやすいのでとても重宝する。毎年買っては履きつぶすを繰り返してたけど今年はまだ買ってない。弱点は雨。</p>
<h2 id="camper" tabindex="-1">Camper</h2>
<p><a href="https://www.camper.com/ja_JP/" target="_blank" rel="noopener noreferrer">https://www.camper.com/ja_JP/</a></p>
<p>丸みのあるデザインが特徴のブランド。左右非対称な靴とかスニーカーっぽい革靴とか面白い靴が多くて好き。エナメルのスニーカーを持っていて愛用している。かっちりしつつ丸くてかわいいので好き。左右非対称靴は今シーズンのやつで欲しいデザインのがあったんだけど微妙にサイズ合わなくて諦めた。</p>
<h2 id="clarks" tabindex="-1">Clarks</h2>
<p><a href="https://www.clarks.co.jp/" target="_blank" rel="noopener noreferrer">https://www.clarks.co.jp/</a></p>
<p>デザートブーツが有名なブランド。スニーカーとかカジュアルシューズも扱ってる。メンズブーツはゴツい見た目のものが多いけどClarksのデザートブーツはシンプルで使い勝手が良い。わりとどんな服装にも合う気がする。ゴツいブーツは疲れるのであんまり好きじゃない。難点はスエードのお手入れがちょっとめんどくさいことかな。</p>
2020-09-30T00:00:00Z
/posts/2020-09-30-skills-for-finding-information/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#%E6%A4%9C%E7%B4%A2%E3%83%AF%E3%83%BC%E3%83%89">検索ワード</a><ul><li><a href="#%E8%AA%9E%E5%BD%99%E5%8A%9B%E3%81%AE%E9%8D%9B%E3%81%88%E6%96%B9">語彙力の鍛え方</a></li></ul></li><li><a href="#%E6%83%85%E5%A0%B1%E3%81%AE%E4%BF%A1%E7%94%A8%E5%BA%A6">情報の信用度</a><ul><li><a href="#%E6%83%85%E5%A0%B1%E6%BA%90">情報源</a></li><li><a href="#%E7%89%A9%E4%BA%8B%E3%82%92%E5%A4%9A%E8%A7%92%E7%9A%84%E3%81%AB%E6%A4%9C%E8%A8%8E%E3%81%99%E3%82%8B">物事を多角的に検討する</a></li></ul></li><li><a href="#%E3%81%BE%E3%81%A8%E3%82%81">まとめ</a></li></ul></details><p></p>
<p>LTの題材にしようと思ってたけど発表しなかったのでブログにまとめておこうと思う。</p>
<h2 id="%E6%A4%9C%E7%B4%A2%E3%83%AF%E3%83%BC%E3%83%89" tabindex="-1">検索ワード</h2>
<p>これが一番大事。自分が欲しい情報にたどり着くためにはそれなりに言葉を知っておく必要がある。つまり <strong>語彙力と一般教養</strong> が重要ということである。それらがない人々は自分が欲しい情報にたどり着けないし、もし何かを得たとしてもそれが正しいかどうか、自分が欲しいものなのか判断できない。正しい情報を得るには知識が必要、検索とはとても知識が必要な行為なのだ。</p>
<p>知識のある人々は欲しい情報を得られる一方で知識のない人は知識の無さ故に情報が得られず「情弱」と呼ばれるようになってしまう。ここでもやはり富めるものはますます富み貧しきものはますます貧しくなるのだ。</p>
<h3 id="%E8%AA%9E%E5%BD%99%E5%8A%9B%E3%81%AE%E9%8D%9B%E3%81%88%E6%96%B9" tabindex="-1">語彙力の鍛え方</h3>
<p>センター試験の現代社会や政治経済を勉強するのが良さそう。あとはニュースを毎日欠かさずみる、新聞を読む、新書を読む、とかかな。エッセイとか小説を読んでも検索に必要な語彙力はつかない。「これからの5G時代について」みたいな、最新の話題についてまとめた本が良い。時事的な知識量を増やすことを心がけたら良さそう。</p>
<h2 id="%E6%83%85%E5%A0%B1%E3%81%AE%E4%BF%A1%E7%94%A8%E5%BA%A6" tabindex="-1">情報の信用度</h2>
<p>情報源がどこなのかは非常に重要。特にインターネット上には間違った情報やニセモノ、デマなどがはびこっている。そこで、自分が得た情報を適切に判断するための基準が必要になってくる。</p>
<h3 id="%E6%83%85%E5%A0%B1%E6%BA%90" tabindex="-1">情報源</h3>
<p>一番先に確認するのはその情報の出どころだ。個人的な信用度は下記の通り。</p>
<ol>
<li>公式な情報</li>
<li>公式ではないが、比較的信用できる組織が発表した情報</li>
<li>公式ではないが、公式な組織の中の人が個人名義で発表した情報</li>
<li>雑多な個人ブログ、Twitter、など</li>
</ol>
<p>一番はもちろん公式な情報だ。政府機関が発表した情報、ライブラリの公式ドキュメント、AppleのHIGなどがそれにあたる。これらは一番正しく効力を持った情報であることがほとんどなので、必ず目を通すべきだ。公式な情報を知らない人はトラブルに巻き込まれやすい。</p>
<p>次に参照するのが「比較的信用できる組織が発表した情報」だ。「比較的信用できる組織」とは、過去の実績からおおよそ間違ったことは書いてないだろうという判断ができる組織のことだ。組織名義で発表する情報が間違っていた場合、その組織自体の信用低下に直結するので、事実確認がきちんとなされているケースが多く信用度も高い。(もちろん事実確認してない雑な情報を発信する企業もあるが…)<br />
この情報は100%正しいわけではないので鵜呑みにしてはいけないが、重要かつ影響力が大きい情報であることが多いので、要チェックだ。この例でいうと、ヤフーやサイバーエージェントの自社技術ブログなどが当てはまる。</p>
<p>その次が「公式な組織の中の人が個人名義で発表した情報」だ。これはちょっと注意が必要で、この人の個人的な意見を組織の影響力を盾にあたかも正しい公式情報かのように発信しているケースもあるからだ。しかし、ライブラリやゲームの開発者が内部情報など興味深い情報を発信しているケースもとても多い。要チェックではあるが、情報に踊らされないようにしよう。</p>
<p>一番信用できないのは個人が発信している情報だ。インターネットにはこういった情報が溢れているし、どれもとても正しそうなことが書いてある。しかしこれは話半分に聞き流すのが正解だろう。たしかに、ドキュメントでわかりにくい部分を解説してくれていたり、実際のユースケースでの問題を指摘してくれてるものがあったりするので一概に不要であるとは言えないしとてもお世話になっているのは確かだけど、信用度としては一番低い。鵜呑みにせず、自分で情報の正しさを確認することが大事。(公式ドキュメントを見返してみる、自分でコードを書く、他の意見も確認する、など)</p>
<h3 id="%E7%89%A9%E4%BA%8B%E3%82%92%E5%A4%9A%E8%A7%92%E7%9A%84%E3%81%AB%E6%A4%9C%E8%A8%8E%E3%81%99%E3%82%8B" tabindex="-1">物事を多角的に検討する</h3>
<p>情報を適切に扱うためのもう一つの指標は、「情報の偏り」だ。</p>
<p>例えばある刑事事件についての2つの記事があるとする。1つは加害者、1つは被害者の視点から書かれたものである。もし加害者側の記事だけ読んだ場合は「加害者も大変だったんだな。仕方ない。」と思うかもしれないし、被害者視点の記事だけ読んだら「加害者は許せん!厳罰を!」となるかもしれない。情報や事実というものは視点が変わることで内容も変化するものなのだ。</p>
<p>こういった視点の偏りがあると、情報を誤って判断してしまう可能性がある。自分が集めた情報がどの視点からのものか、偏りがないか、ということに注意し、できるだけ視点の異なる情報を集め判断することが大事である。</p>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81" tabindex="-1">まとめ</h2>
<p>検索力を鍛えていこう。</p>
2020-10-03T00:00:00Z
/posts/2020-10-03-baked-egg/
<p>目玉焼きは両面焼くのが良い。</p>
<p>A fried egg should be cooked on both sides.</p>
<p>目玉焼きには大きく2つ焼き方がある。片面だけ焼くか両面焼くか、だ。目玉焼きと言われたら、日本人の多くは片面焼きの方をイメージするだろう。しかし僕は両面焼いた目玉焼きが好きだ。この辺のルーツについて話すと長くなるので今回は割愛する。</p>
<p>There are two ways to cook a fried egg: on one side or on both sides. Most Japanese people think of the one-sided way when they hear "fried eggs", but I like fried eggs cooked on both sides. The roots of cooking method of fried egg are a long story, so I won't bore you with it this time.</p>
<p>片面焼きの場合、卵の上側にも火を通すため少し水を入れて蒸し焼きにする。この工程が好きじゃない。水を入れて蒸し焼きにすることで、せっかく水分が飛んでカリカリになった白身がしんなりしてしまう。蒸した後に再びカリカリにすると今度は黄身に火が通り過ぎてしまう。とてもナンセンスだ。</p>
<p>In the case of one-side cooking, we steam the eggs with a little water to cook of the top side of it. I don't like this process. Steaming the eggs with water makes the crispy white meat wilted. If you make it crispy again after steaming, the yolk gets overcooked. It's very nonsense.</p>
<p>両面焼けばこの問題は起きない。カリカリになった白身ととろっと半熟の黄身の両方を味わうことができる。しかし両面焼きは少し難しい。油断すると黄身の膜が破れて溢れてしまうからだ。両面焼きの目玉焼きを作る際のポイントは次のとおりだ。</p>
<ul>
<li>油は多めに敷く。</li>
<li>強めの中火か強火でやる。外側だけ一気に火を通す。</li>
<li>必ずフライパンを温めてから卵を入れる。フライパンが冷えてると最悪。</li>
<li>卵を入れたら、卵の周りに油がしっかる回るようにフライパンを回す。卵の縁が油で揚がって少し膨らむ感じが良い。</li>
<li>片面に焼き色がついたら、フライ返しでひっくり返す。このとき勢いよく返しすぎると黄身が割れてしまうので、ゆっくりかつスムーズに返すのを意識する。</li>
<li>返したらしばらくそっとしておく。黄身の周りに火が通るまで我慢。</li>
<li>フライパンを軽く揺すって卵が動くようになったら再び引っくり返して出来上がり。</li>
</ul>
<p>if you cooked both sides, you won't have this problem. You can taste both the crispy white meat and the melted, half-ripe yolk. However, cooking on both side is a little more difficult. If you are not careful, the yolk film will break and the yolk will overflow. The following is the key to make a double-side fried egg.</p>
<ul>
<li>Put more oil in a frypan.</li>
<li>Cook the eggs high-medium or high heat. Only the outside should be cooked all at once.</li>
<li>Always warm the pan before adding the eggs. It is the worse when the pan is cold.</li>
<li>Once the eggs are in the pan, turn the pan until the edges of the eggs are coated with oil. They should be fried and slightly puffed up with oil.</li>
<li>When one side is browned, turn the eggs over with the spatula. Be careful not to flip too vigorously or the yolk will break, so be careful to do it slowly and smoothly.</li>
<li>When you turn them over, leave them gently for a while. Be patient until the yolk is cooked around.</li>
<li>If the eggs move when you lightly shake the pan, turn them over again and they are done!</li>
</ul>
2020-10-03T00:00:00Z
/posts/2020-10-03-start-english-study-2020/
<p>I started studying English for TOEFL iBT in order to enter an online college University of People. I want to study computer science and get a bachelor's degree in CS.</p>
<p>If we want to work as a software engineer in a country other than Japan, you will always need a degree in CS because you cannot get a work visa if you don't have a degree in CS.The COVID-19 makes it harder and harder to work abroad without a degree.</p>
<p>My goal is to get a TOEFL score of at least 61 by next spring because the score is required for UoP admission is 61.</p>
<p>There is another reason to take the TOEFL exam. It is because I want to make it a milestone in my English learning. I use English everyday at work now but recently my motivation to study English has been low because I didn't have a specific goal and don't know how my English level changing.<br />
I think that studying English for the TOEFL will have a positive impact on my daily work.</p>
2020-10-08T00:00:00Z
/posts/2020-10-08-eat-seasonal-food/
<p>旬のものを食べる。</p>
<p>僕はリモートワークになってからほとんど家から出なくなった。そして四季の移り変わりを感じる機会が減った。</p>
<p>桜の花で埋め尽くされた小川、雨の匂い、青空にそびえる入道雲、紅葉。それらはどこか遠くの世界のもののように思えてしまう。</p>
<p>家の中にいると季節を感じない。最近時間がすぎるのがとても早く感じるのだが、その理由の1つはこの季節感のなさなのではないかと思った。</p>
<p>旬の食材は僕に様々な角度から四季を教えてくれる。色、手触り、匂い、味、食感、音。外に出れなくても五感で季節を感じることができる。</p>
<p>たしかに桜を見たり海に行ったりする体験に比べれば小さいものかもしれない。しかし、こうした小さな豊かさの積み重ねが日々の生活に充足感をもたらしてくれるのではないだろうか。</p>
<p>これからの時代、全てがオンラインになっていく中で、いかに季節を感じ楽しむかというのが重要になってくるのではないかなと思う。</p>
<p>この生活がいつまで続くかわからないけど、日本の四季を忘れないようにしたいと思った10月であった。</p>
2020-10-12T00:00:00Z
/posts/2020-10-12-keyboard-20201012/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#atom66">Atom66</a><ul><li><a href="#atom66%E3%81%AE%E4%B8%8D%E8%AA%BF">Atom66の不調</a></li></ul></li><li><a href="#keychron-k6">Keychron K6</a><ul><li><a href="#%E4%BD%BF%E7%94%A8%E6%84%9F">使用感</a></li></ul></li><li><a href="#%E3%81%BE%E3%81%A8%E3%82%81">まとめ</a></li></ul></details><p></p>
<p>キーボードを<a href="https://www.nizkeyboard.com/products/niz-2019-new-member-atom66-the-smallest-electro-capactive-bluetooth-keyboard-with-rgb-or-non-rgb" target="_blank" rel="noopener noreferrer">Niz Atom66</a>から<a href="https://www.keychron.com/products/keychron-k6-wireless-mechanical-keyboard" target="_blank" rel="noopener noreferrer">Keychron K6</a>に乗り換えた。</p>
<h2 id="atom66" tabindex="-1">Atom66</h2>
<p>Atom66は静電容量無接点方式の中華キーボードだ。<br />
<a href="https://www.nizkeyboard.com/products/niz-2019-new-member-atom66-the-smallest-electro-capactive-bluetooth-keyboard-with-rgb-or-non-rgb" target="_blank" rel="noopener noreferrer">https://www.nizkeyboard.com/products/niz-2019-new-member-atom66-the-smallest-electro-capactive-bluetooth-keyboard-with-rgb-or-non-rgb</a></p>
<p>静電容量無接点方式キーボードだとHHKBとかRealforceが有名だ。Atom66を買った理由は2つある。</p>
<ul>
<li>価格が安い</li>
<li>打鍵の重さ、打鍵感</li>
<li>キーキャップがCherry MX互換なので、市販のキーキャップに変えられる</li>
</ul>
<p>Atom66は$149.00とHHKBなどに比べて安い。HHKBは3万くらいする。</p>
<p>またAtom66の打鍵感がけっこう独特だというレビューを見たのと、HHKBとRealforceの間くらいの重さであるというところにも魅力を感じた。</p>
<p>一番魅力的だったのはCherry MX対応のキーキャップが装着できる点だ。他の静電容量無接点方式キーボードは軸の形が独特なため、一般的に自作キーボードで使われるCherry MX互換のキーキャップを装着できない。キーボードを買うからにはかわいいキーキャップにしたいと思っていたので、Atom66は非常に魅力的だった。</p>
<h3 id="atom66%E3%81%AE%E4%B8%8D%E8%AA%BF" tabindex="-1">Atom66の不調</h3>
<p>使って数ヶ月たったある日、ESCキーとCtrlキーが妙に重たく押しづらくなっていることに気づいた。原因はわからない。Nizはサポートが期待できないので自分で直すか諦めるかしかない。静電容量無接点方式は自分で修理することが難しい。スイッチの交換も容易ではない。分解してみようかと考えたが、失敗したときの心理的な損傷も考慮して今回は素直に諦めることにした。使っているとたまに直ったりするんだけどやはり気になってしまうので、諦めてApple Magic Keyboardに戻った。</p>
<h2 id="keychron-k6" tabindex="-1">Keychron K6</h2>
<p>Apple Magic Keyboardはとても良いキーボードだけど、使ってて楽しくない。わくわくしない。</p>
<p>そろそろ新しいメカニカルキーボードがほしいなと思い始めていたときにKeychron K6を見つけた。Keychron K6に決めた理由は</p>
<ul>
<li>安い</li>
<li>Macモードがある</li>
<li>65%レイアウト</li>
</ul>
<p>Keychron K6は$69.00とメカニカルキーボードの中ではかなり安い。(キースイッチがCherry MXではなくGateronという中華メーカーの安物だから)</p>
<p>それからKeychronのキーボードはすべてMacモードとWinモードの切り替えができる。しかもスイッチで簡単に操作できる。これはMacユーザーにとってとても嬉しい。キーマッピングを自分でいじらなくてよいのは便利だ。</p>
<p>また65%レイアウトであるところも良い。様々なキーボードを試してきて、自分が一番使いやすいキーボードは65%レイアウトのキーボードであるとわかった。Atom66は少し変わったキー配列になっていて、↑矢印と右シフトキーがかぶっている。これが地味に使いにくくストレスの原因となっていた。65%レイアウトでなら矢印がありつつ必要最小限のキーで構成されていて比較的コンパクトだ。</p>
<h3 id="%E4%BD%BF%E7%94%A8%E6%84%9F" tabindex="-1">使用感</h3>
<p>Keychron K6についてくるキーキャップはとても安っぽくて、カチャカチャ音がするとても実用に堪えるものではなかった。しかし新しいキーキャップに変えたことで打鍵感や音が改善し、とても使いやすくなった。でもやっぱり打鍵感はAtom66のほうが好きかな…。その他は特に不満なく使えている。やはりかわいいキーキャップだとテンション上がる。今回買ったキーキャップはこれ。</p>
<p><a href="https://www.banggood.com/KBDfans-Moon-Landing-Mars-Keycaps-XDA-Sublimation-PBT-Two-Color-121-Keys-Mechanical-Keyboard-Keycap-p-1617859.html?cur_warehouse=CN" target="_blank" rel="noopener noreferrer">https://www.banggood.com/KBDfans-Moon-Landing-Mars-Keycaps-XDA-Sublimation-PBT-Two-Color-121-Keys-Mechanical-Keyboard-Keycap-p-1617859.html?cur_warehouse=CN</a></p>
<p><img src="https://pbs.twimg.com/media/EkHW1kzU0AEKkV1?format=jpg&name=medium" alt="" loading="lazy" /></p>
<p>バックライトは切っているけど電池の持ちも結構良い。かれこれ1週間位充電せず使えている。Atom66はバッテリーがすぐ切れるので常に有線で使用していたが、こちらなら無線で気兼ねなく使えるのでストレスがなくて良い。</p>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81" tabindex="-1">まとめ</h2>
<p>キーボードは沼。</p>
2020-12-06T00:00:00Z
/posts/2020-12-06-best-buy-2020/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#%E6%9B%87%E3%82%8A%E6%AD%A2%E3%82%81%E3%83%A1%E3%82%AC%E3%83%8D%E6%8B%AD%E3%81%8D">曇り止めメガネ拭き</a></li><li><a href="#%E8%B6%85%E5%A4%A7%E5%88%A4%E3%83%87%E3%82%B9%E3%82%AF%E3%83%9E%E3%83%83%E3%83%88(%E3%82%A8%E3%83%AC%E3%82%B3%E3%83%A0)">超大判デスクマット(エレコム)</a></li><li><a href="#keychron-k6">Keychron K6</a></li><li><a href="#%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB-pc%E3%82%A2%E3%82%AF%E3%82%A2%E3%83%9C%E3%83%88%E3%83%AB%EF%BC%88%E3%83%91%E3%83%BC%E3%83%AB%E9%87%91%E5%B1%9E%EF%BC%89">ブロックスタイル PCアクアボトル(パール金属)</a></li><li><a href="#%E8%A1%A3%E9%A1%9E%E4%B9%BE%E7%87%A5%E9%99%A4%E6%B9%BF%E5%99%A8%EF%BC%88%E3%82%A2%E3%82%A4%E3%83%AA%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%A4%E3%83%9E%EF%BC%89">衣類乾燥除湿器(アイリスオーヤマ)</a></li><li><a href="#%E5%8D%93%E4%B8%8A%E4%BC%B8%E7%B8%AE%E3%83%9E%E3%82%A4%E3%82%AF%E3%82%B9%E3%82%BF%E3%83%B3%E3%83%89">卓上伸縮マイクスタンド</a></li><li><a href="#majestouch-%E3%83%AA%E3%82%B9%E3%83%88%E3%83%AC%E3%82%B9%E3%83%88-%22%E3%83%9E%E3%82%AB%E3%83%AD%E3%83%B3%22%EF%BC%88filco%EF%BC%89">Majestouch リストレスト "マカロン"(FILCO)</a></li><li><a href="#powercore-slim-10000ma%EF%BC%88anker%EF%BC%89">PowerCore Slim 10000mA(Anker)</a></li><li><a href="#%E3%82%A2%E3%82%B5%E3%83%92%E3%82%AF%E3%83%83%E3%82%AD%E3%83%B3%E3%82%B0%E3%82%AB%E3%83%83%E3%83%88">アサヒクッキングカット</a></li><li><a href="#surface-laptop-go">Surface Laptop Go</a></li><li><a href="#%E3%82%A8%E3%83%AB%E3%82%B4%E3%83%92%E3%83%A5%E3%83%BC%E3%83%9E%E3%83%B3-%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%A7%E3%82%A4">エルゴヒューマン エンジョイ</a></li><li><a href="#flexispot-e7">FLEXISPOT E7</a></li></ul></details><p></p>
<p>2020年もたくさん買い物したので振り返ってみる。</p>
<h2 id="%E6%9B%87%E3%82%8A%E6%AD%A2%E3%82%81%E3%83%A1%E3%82%AC%E3%83%8D%E6%8B%AD%E3%81%8D" tabindex="-1"><a href="https://www.amazon.co.jp/dp/B089QM51ZT/ref=cm_sw_r_tw_dp_.Ko1Fb68R4YNY?_x_encoding=UTF8&psc=1" target="_blank" rel="noopener noreferrer">曇り止めメガネ拭き</a></h2>
<p>これはこの冬ベストバイなやつ。<br />
マスクをするときに一番ストレスなのがメガネが曇ることなんだけど、これでメガネ拭けば全く曇らない。最高。<br />
メガネユーザーの人はすぐに買うべき。</p>
<h2 id="%E8%B6%85%E5%A4%A7%E5%88%A4%E3%83%87%E3%82%B9%E3%82%AF%E3%83%9E%E3%83%83%E3%83%88(%E3%82%A8%E3%83%AC%E3%82%B3%E3%83%A0)" tabindex="-1"><a href="https://www.amazon.co.jp/dp/B0754DVKV2/ref=cm_sw_r_tw_dp_xXo1Fb1BSA2PS?_x_encoding=UTF8&psc=1" target="_blank" rel="noopener noreferrer">超大判デスクマット(エレコム)</a></h2>
<p>キーボードの打鍵音を抑えたかったのと、トラックパッドを操作するときに手首にクッションほしかったので買った。<br />
打鍵音は少し落ち着いたし、いい感じのクッションになってくれて手首痛くないので大満足。コスパめちゃ良いと思う。</p>
<h2 id="keychron-k6" tabindex="-1"><a href="https://www.keychron.com/products/keychron-k6-wireless-mechanical-keyboard" target="_blank" rel="noopener noreferrer">Keychron K6</a></h2>
<p>これについてはこの記事に詳しく書いてある。<br />
<a href="https://blog.takanorip.com/posts/keyboard-20201012/" target="_blank" rel="noopener noreferrer">https://blog.takanorip.com/posts/keyboard-20201012/</a></p>
<p>今のところ何も不満がない。安いメカニカルキーボード探してる人におすすめ。</p>
<h2 id="%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB-pc%E3%82%A2%E3%82%AF%E3%82%A2%E3%83%9C%E3%83%88%E3%83%AB%EF%BC%88%E3%83%91%E3%83%BC%E3%83%AB%E9%87%91%E5%B1%9E%EF%BC%89" tabindex="-1"><a href="https://www.amazon.co.jp/dp/B0076E1TRG/ref=cm_sw_r_tw_dp_x_GYo1FbCAE5M5Z" target="_blank" rel="noopener noreferrer">ブロックスタイル PCアクアボトル(パール金属)</a></h2>
<p>在宅勤務するようになり水とかお茶とかをコップに注いで飲んでたんだけど、PC周りでこぼすのが怖かったので直飲みできるプラスチック製の水筒を買った。<br />
安いし洗いやすいし軽くて扱いやすいのでとても重宝している。キャップも押し込むタイプなので片手でも使いやすい。</p>
<h2 id="%E8%A1%A3%E9%A1%9E%E4%B9%BE%E7%87%A5%E9%99%A4%E6%B9%BF%E5%99%A8%EF%BC%88%E3%82%A2%E3%82%A4%E3%83%AA%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%A4%E3%83%9E%EF%BC%89" tabindex="-1"><a href="https://www.amazon.co.jp/dp/B0194P7RCU/ref=cm_sw_r_tw_dp_dlC_mZo1Fb8B0BWR5?_x_encoding=UTF8&psc=1" target="_blank" rel="noopener noreferrer">衣類乾燥除湿器(アイリスオーヤマ)</a></h2>
<p>夏、部屋の湿気がやばかったので友人にすすめられたままに買った。めちゃくちゃ快適になった。洗濯物も一晩でかなり乾く。日本の夏は除湿機必須だと思った。</p>
<h2 id="%E5%8D%93%E4%B8%8A%E4%BC%B8%E7%B8%AE%E3%83%9E%E3%82%A4%E3%82%AF%E3%82%B9%E3%82%BF%E3%83%B3%E3%83%89" tabindex="-1"><a href="https://www.amazon.co.jp/dp/B072151KG5/ref=cm_sw_r_tw_dp_x_p0o1FbS6YQNG5" target="_blank" rel="noopener noreferrer">卓上伸縮マイクスタンド</a></h2>
<p>これ以前に持ってたマイクスタンドの高さが足りず手持ちマイクと化していたので買った。話しやすい位置にマイクを持ってこれるのですごく良い。<br />
しかしこの製品ちょっとねじが緩かったりするので、もうちょい高くてしっかりしたやつ買ったほうが幸せかもしれない。</p>
<h2 id="majestouch-%E3%83%AA%E3%82%B9%E3%83%88%E3%83%AC%E3%82%B9%E3%83%88-%22%E3%83%9E%E3%82%AB%E3%83%AD%E3%83%B3%22%EF%BC%88filco%EF%BC%89" tabindex="-1"><a href="https://www.amazon.co.jp/dp/B07LB3M4SM/ref=cm_sw_r_tw_dp_x_10o1FbA6Z3FZA" target="_blank" rel="noopener noreferrer">Majestouch リストレスト "マカロン"(FILCO)</a></h2>
<p>初めてリストレストを買ったんだけど、ちょうどいい柔らかさでとても使い心地がよい。とても満足してる。</p>
<h2 id="powercore-slim-10000ma%EF%BC%88anker%EF%BC%89" tabindex="-1"><a href="https://www.amazon.co.jp/dp/B0851B8QGT/ref=cm_sw_r_tw_dp_x_h3o1FbFK98DK1" target="_blank" rel="noopener noreferrer">PowerCore Slim 10000mA(Anker)</a></h2>
<p>軽くて薄くて大容量。安定のAnker。モバイルバッテリーこれ買えば間違いない。</p>
<h2 id="%E3%82%A2%E3%82%B5%E3%83%92%E3%82%AF%E3%83%83%E3%82%AD%E3%83%B3%E3%82%B0%E3%82%AB%E3%83%83%E3%83%88" tabindex="-1"><a href="https://www.amazon.co.jp/dp/B000KL7Q9C/ref=cm_sw_r_tw_dp_x_h4o1FbD5V1YZE" target="_blank" rel="noopener noreferrer">アサヒクッキングカット</a></h2>
<p>良いまな板。木くずが配合されたゴム素材でできてるらしい。YouTubeで紹介されているのを見て知った。<br />
安定していて刃滑りもなくとても良いしすぐ乾くので清潔に保てる。ちょっと重いのが難点かな。<br />
もう安いまな板には戻れないね。</p>
<h2 id="surface-laptop-go" tabindex="-1"><a href="https://www.microsoft.com/ja-jp/p/surface-laptop-go/94fc0bdgq7wv" target="_blank" rel="noopener noreferrer">Surface Laptop Go</a></h2>
<p>持ち運び用のPCがなかったので買った。10年ぶりくらいにWindowsのPCを買ったけど、キー配列以外は全然問題なく使えてる。WLSもスムーズに構築できたので開発環境もいい感じに整った。<br />
本格的な開発するにはメモリとかCPUとか足りないけど、外でちょっとした作業するなら全然問題ない。<br />
(しかしもうちょっと待ってM1 MacBookAir買えばよかったかなと後悔していなくもない…。)</p>
<h2 id="%E3%82%A8%E3%83%AB%E3%82%B4%E3%83%92%E3%83%A5%E3%83%BC%E3%83%9E%E3%83%B3-%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%A7%E3%82%A4" tabindex="-1"><a href="https://www.ergohuman.jp/product/ergohuman_enjoy.php" target="_blank" rel="noopener noreferrer">エルゴヒューマン エンジョイ</a></h2>
<p>リモートワークになって腰が痛くなってきたので買った。本当はハーマンミラーのセイルチェアが買いたかったけど、ちょうどCOVID-19でロックダウン真っ最中な時期で輸入時期未定な感じだったので、在庫があったエルゴヒューマン エンジョイを買った。<br />
今のところすごく快適に使えていて満足。これ以前に使ってたニトリの椅子に比べたらはるかに疲れにくいし腰も痛くならない。<br />
ヘッドレストの調整がちょっと難しいかも。</p>
<h2 id="flexispot-e7" tabindex="-1"><a href="https://flexispot.jp/e7-set.html" target="_blank" rel="noopener noreferrer">FLEXISPOT E7</a></h2>
<p>買ったけどまだ使ってない。楽しみ。</p>
2020-12-12T00:00:00Z
/posts/2020-12-12-careful-point-for-single-designer/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#%E3%83%AF%E3%82%A4%E3%83%A4%E3%83%BC%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%81%AF%E8%A6%8B%E3%81%9B%E3%81%AA%E3%81%84">ワイヤーフレームは見せない</a></li><li><a href="#%E4%BB%95%E6%A7%98%E3%82%92%E3%81%A7%E3%81%8D%E3%82%8B%E3%81%A0%E3%81%91%E8%A9%B3%E7%B4%B0%E3%81%AB%E8%A9%B0%E3%82%81%E3%82%8B">仕様をできるだけ詳細に詰める</a></li><li><a href="#%E5%AE%9F%E8%A3%85%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E3%81%AF%E6%9C%80%E5%BE%8C%E3%81%AB%E3%81%BE%E3%81%A8%E3%82%81%E3%81%A6%E3%82%84%E3%82%8B">実装のデザインレビューは最後にまとめてやる</a></li><li><a href="#%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E3%81%93%E3%81%A8%E3%82%92%E6%98%8E%E7%A2%BA%E3%81%AB%E3%81%99%E3%82%8B">できないことを明確にする</a></li><li><a href="#%E3%81%BE%E3%81%A8%E3%82%81">まとめ</a></li></ul></details><p></p>
<p>これは<a href="https://adventar.org/calendars/5700" target="_blank" rel="noopener noreferrer">inHouseDesigners Advent Calendar 2020</a>12日目の記事です。</p>
<p>2020年5月に転職してからスタートアップでおひとりUIデザイナーとして働いています。<br />
今回は組織で一人だけのUIデザイナーとして普段の仕事で気を付けていることを書いてこうと思います。</p>
<h2 id="%E3%83%AF%E3%82%A4%E3%83%A4%E3%83%BC%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%81%AF%E8%A6%8B%E3%81%9B%E3%81%AA%E3%81%84" tabindex="-1">ワイヤーフレームは見せない</h2>
<p>デザインをレビューしてもらうとき、基本的にほぼ完成したデザインを見せます。もちろんデザインする過程でワイヤフレームを作るとことはありますが、それをレビューしてもらうことはありません。<br />
これには2つ理由があります。</p>
<ul>
<li>細かい見た目の議論をさせないため</li>
<li>ユースケースに当てはまっているか、使いやすいかどうか、などをイメージしやすくするため</li>
</ul>
<p>基本的にワイヤーフレームはデザイナー以外の人々にとってよくわからない存在です。</p>
<p>ワイヤーフレームは白黒で簡素な見た目で作ることが多いと思います。<br />
僕はデザイナーなので「ここは何色かな」とか「ここにはこういう装飾を入れよう」とかある程度イメージできますが、僕以外のメンバーはデザインの専門家ではないので「ここはどうなるんだろう?」と気になってしまい、細かい見た目の話にどうしてもなってしまうことが多いと思います。</p>
<p>肉付けされたデザインであれば「このデザインが目的を達成できるかどうか」に注力しやすいですし、細かいところはデザイナーに任せてくれと言いやすいと思います。</p>
<p>ここでメンバーに「ワイヤーフレームをレビューするときの心得」みたいなのを共有してマインドを変えていってもらう方法もあると思うのですが、スタートアップだとそんなことしてる時間はないので、デザイナー側がやり方を工夫するほうが得策だと思います。</p>
<p>完成に近いデザインを見せることで実際に使っている様子を想像しやすいのも大事なポイントです。<br />
ワイヤーフレームは簡素さゆえに実際の使用イメージが定まらないので、デザイナー以外の人に見せても良い意見がもらえないことが多いです。</p>
<h2 id="%E4%BB%95%E6%A7%98%E3%82%92%E3%81%A7%E3%81%8D%E3%82%8B%E3%81%A0%E3%81%91%E8%A9%B3%E7%B4%B0%E3%81%AB%E8%A9%B0%E3%82%81%E3%82%8B" tabindex="-1">仕様をできるだけ詳細に詰める</h2>
<p>ワイヤーフレームをレビューしてもらわない代わりに、デザインする機能の仕様やユースケースなどを企画、エンジニアなどなどとかなり細かく詰めます。<br />
これによってワイヤーフレームをレビューしてもらまなくてもデザインの手戻りをできるだけ少なくできます。<br />
この段階でメンバー全員の認識を揃えることが重要です。ここが曖昧だとデザインのやり直しが発生してしまいます。</p>
<p>僕が仕事するときは主に以下の点について話しています。</p>
<ul>
<li>機能の仕様</li>
<li>機能が必要な理由、現状の課題</li>
<li>ユースケース(できるだけ具体的に)</li>
<li>実装上の懸念</li>
</ul>
<h2 id="%E5%AE%9F%E8%A3%85%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E3%81%AF%E6%9C%80%E5%BE%8C%E3%81%AB%E3%81%BE%E3%81%A8%E3%82%81%E3%81%A6%E3%82%84%E3%82%8B" tabindex="-1">実装のデザインレビューは最後にまとめてやる</h2>
<p>一人なので、まとめてできることはまとめてやる、これ大事。</p>
<h2 id="%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E3%81%93%E3%81%A8%E3%82%92%E6%98%8E%E7%A2%BA%E3%81%AB%E3%81%99%E3%82%8B" tabindex="-1">できないことを明確にする</h2>
<p>一人で何でもできるのも素晴らしいことですが、人間得手不得手があります。ひとりだからこそできないことを明確にして、できないタスクが来た時の対処法を定めておくのが得策だと思います。<br />
僕はグラフィック系のデザインが苦手なので、そういう仕事が来た時にどうしようかといろいろ考えてます。</p>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81" tabindex="-1">まとめ</h2>
<p>2021年もがんばるぞ!</p>
2020-12-31T00:00:00Z
/posts/2020-12-31-review-2020/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#%E7%84%9A%E3%81%8D%E7%81%AB%E3%81%97%E3%81%9F">焚き火した</a></li><li><a href="#%E8%BB%A2%E8%81%B7%E3%81%97%E3%81%9F">転職した</a><ul><li><a href="#%E3%83%95%E3%83%AB%E3%83%AA%E3%83%A2%E3%83%BC%E3%83%88%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%9F">フルリモートになった</a></li></ul></li><li><a href="#%E3%82%B3%E3%83%9F%E3%83%A5%E3%83%8B%E3%83%86%E3%82%A3%E3%81%AEpodcast%E3%82%92%E5%A7%8B%E3%82%81%E3%81%9F">コミュニティのPodcastを始めた</a></li><li><a href="#%E5%89%AF%E6%A5%AD%E3%81%AF%E3%81%98%E3%82%81%E3%81%9F">副業はじめた</a></li><li><a href="#%E5%BC%95%E3%81%A3%E8%B6%8A%E3%81%97%E3%81%9F">引っ越した</a><ul><li><a href="#%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%8D%E3%83%83%E3%83%88%E5%B7%A5%E4%BA%8B%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%8B%E3%81%A3%E3%81%9F">インターネット工事ができなかった</a></li></ul></li><li><a href="#2021%E5%B9%B4%E3%81%AB%E3%82%80%E3%81%91%E3%81%A6">2021年にむけて</a></li></ul></details><p></p>
<p>今年もいろいろあったので簡単に2020年を振り返っていくよ。</p>
<h2 id="%E7%84%9A%E3%81%8D%E7%81%AB%E3%81%97%E3%81%9F" tabindex="-1">焚き火した</h2>
<p>今年の1月に若洲キャンプ場で焚き火をした。薪はキャンプ場で買えるので、最小限の装備で行けたので楽だった。楽しかった。<br />
思い返せばこれが上半期唯一の遠出というかアウトドアだったなあ。また行きたい。</p>
<h2 id="%E8%BB%A2%E8%81%B7%E3%81%97%E3%81%9F" tabindex="-1">転職した</h2>
<p>ClassDoというシンガポールの会社に転職してUIデザイナーになった。この話は色んなとこでしてるので割愛。<br />
UIのフルリニューアルとか新機能リリースとかを無事リリース出来たので、これで見習いからUIデザイナーから初心者UIデザイナーくらいにはなれたかな。</p>
<p>シンガポールの会社ということで業務中は英語なんだけど、日本人が多いので意外と英語を話す場面が少ないなと感じてる。チャットはすべて英語なので、読み書きの速度は向上してる気がする。<br />
来年はもっと積極的に英語を使っていきたい。(日本語に逃げない)</p>
<h3 id="%E3%83%95%E3%83%AB%E3%83%AA%E3%83%A2%E3%83%BC%E3%83%88%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%9F" tabindex="-1">フルリモートになった</h3>
<p>転職した影響でフルリモートになった。起床即MTGみたいな生活をしてる。<br />
仕事にはほとんど支障なく、オフィスに行ってたころと変わらず仕事できてるきがする。自分のペースを作れるので自分はリモートで仕事するほうが快適かもしれない。</p>
<p>通勤に時間を使わなくて良い一方、気を抜くと1週間くらい家から出なくなるので運動不足になりすぎてやばい。<br />
来年はキックボクシングジムを始めるか少林寺拳法を再開するかして運動不足解消したい。</p>
<h2 id="%E3%82%B3%E3%83%9F%E3%83%A5%E3%83%8B%E3%83%86%E3%82%A3%E3%81%AEpodcast%E3%82%92%E5%A7%8B%E3%82%81%E3%81%9F" tabindex="-1">コミュニティのPodcastを始めた</h2>
<p>僕がOrganizerをしてるWPSGというコミュニティのPodcastを2020年1月から始めた。おおよそ月1回YouTube Liveを使って収録していて、2020年は10回更新できた。</p>
<p>これを始めたのはきっかけはコミュニティのメンバーが忙しくなり勉強会を開催するのが難しくなったことだ。2019年はみんなのスケジュールがあわず1度もイベントなどを開催できず、コミュニティとしての活動が止まってしまっていた。<br />
そんな状況を打開したくて、同じ場所に集まらず気軽にできる活動としてPodcastが最適なんじゃないかと思い始めてみた。軽いノリで始めたけど、なんだかんだ1年続けられてよかった。</p>
<p>来年はもっと中身のあるPodcastにできるよう頑張りたい。あとゲストとかもちゃんと探してきて、聴き応えのある内容にしていきたいな。</p>
<h2 id="%E5%89%AF%E6%A5%AD%E3%81%AF%E3%81%98%E3%82%81%E3%81%9F" tabindex="-1">副業はじめた</h2>
<p>11月からCADDiで副業フロントエンドエンジニアをしている。<br />
バグ修正とかライブラリ移行とかドメイン知識が薄くてもできる作業を中心にやっていて、今のところとても快適にお仕事してる。<br />
副業ということで時間の確保が難しいけど、フルリモートなおかげで柔軟に対応できるのは良かったなと感じてる。</p>
<h2 id="%E5%BC%95%E3%81%A3%E8%B6%8A%E3%81%97%E3%81%9F" tabindex="-1">引っ越した</h2>
<p>東京都渋谷区から神奈川県横浜市に引っ越した。代々木公園近くのシェアハウスに住んでたんだけど、ネズミがうるさかったのと部屋の日当たりが悪く精神的につらかったので引っ越した。<br />
ネズミと日当たり以外はすごく良い家だった。</p>
<p>新居はすごく見晴らしが良い部屋でとても満足。いまのところ快適に生活してる(インターネット以外。後述)</p>
<p>新居に引っ越すにあたり、生活家電やデスク周りの設備も一気に整えた。モニターアーム、35インチワイドディスプレイ、昇降デスクを揃えたので最強になった。<br />
ドラム式洗濯乾燥機、大きめの冷蔵庫、ダイニングソファも買った。QOL爆上がり。</p>
<h3 id="%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%8D%E3%83%83%E3%83%88%E5%B7%A5%E4%BA%8B%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%8B%E3%81%A3%E3%81%9F" tabindex="-1">インターネット工事ができなかった</h3>
<p>新居での唯一の不満はインターネット工事が内装不備によってできなかったことだ。共用部まで光回線が来ているが電話線の配管が途中で詰まってるので引き込み工事が出来ないと言われてしまった。<br />
とりあえず管理会社とオーナーさんに話をして強くお願いしたら、なんだかんだあり、壁に穴開けて回線を引き込めるように工事してくれることになった。一応解決の目処がたって一安心。<br />
関係各所に電話しまくってとても疲れた。この話はいつか詳しくまとめたい。</p>
<p>P.S. 光回線までのつなぎとしてSoftbank Airを契約してみたが、噂に違わぬくそ回線だった。すぐ解約したい。</p>
<h2 id="2021%E5%B9%B4%E3%81%AB%E3%82%80%E3%81%91%E3%81%A6" tabindex="-1">2021年にむけて</h2>
<p>来年もなんとなく元気に行きていきたい。早く光回線来てくれ!!!!</p>
2021-01-29T00:00:00Z
/posts/2021-01-29-internet-issue-2020/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#%E3%83%88%E3%83%A9%E3%83%96%E3%83%AB%E6%A6%82%E8%A6%81">トラブル概要</a><ul><li><a href="#%E8%A7%A3%E6%B1%BA">解決</a></li></ul></li><li><a href="#%E5%BC%95%E8%B6%8A%E3%81%97%E6%99%82%E3%81%AB%E6%B0%97%E3%82%92%E3%81%A4%E3%81%91%E3%82%8B%E3%81%93%E3%81%A8">引越し時に気をつけること</a><ul><li><a href="#%E5%85%89%E5%9B%9E%E7%B7%9A%E5%AF%BE%E5%BF%9C%E7%89%A9%E4%BB%B6%E3%81%8B">光回線対応物件か</a></li><li><a href="#%E9%9B%BB%E8%A9%B1%E7%B7%9A%E9%85%8D%E7%AE%A1%E3%81%8C%E5%B7%AE%E8%BE%BC%E5%8F%A3%E3%81%AE%E8%A3%8F%E3%81%BE%E3%81%A7%E6%9D%A5%E3%81%A6%E3%82%8B%E3%81%8B">電話線配管が差込口の裏まで来てるか</a></li><li><a href="#%E9%9B%BB%E8%A9%B1%E7%B7%9A%E9%85%8D%E7%AE%A1%E3%81%8C%E8%A9%B0%E3%81%BE%E3%81%A3%E3%81%A6%E3%81%84%E3%81%AA%E3%81%84%E3%81%8B">電話線配管が詰まっていないか</a></li></ul></li><li><a href="#%E3%81%BE%E3%81%A8%E3%82%81">まとめ</a></li></ul></details><p></p>
<p>最近引っ越しをしたのだが、インターネット回線工事で思いっきりトラブったので備忘録として記録しつつ、これから引っ越しする人のために注意するべき点をまとめておく。</p>
<h1 id="%E3%83%88%E3%83%A9%E3%83%96%E3%83%AB%E6%A6%82%E8%A6%81" tabindex="-1">トラブル概要</h1>
<p>12月に新居に引っ越しをした際、光回線の工事をしたのだが下記の理由で回線の引き込みが出来ないと言われた。</p>
<ul>
<li>電話線の配管が電話線差込口の裏側まできていない(天井裏までしか配管が来てない)</li>
<li>電話線の配管が途中で詰まっていてケーブルが出てこない</li>
</ul>
<p>要するに <strong>「共用部まで回線は来ているが、自宅内の配管に不備があるため工事が出来ない」</strong> ということだった。自宅内の天井にある点検口の近くまで配管が来ていることが確認できたのはせめてもの救いだった。これがわけわからんところで詰まってたら、まじでなすすべ無かった。</p>
<p>物件申込時に管理会社に確認したときは「光回線利用可能、共用部まで回線が来てるので宅内に引き込めば使える」と言われていたため、これは完全に想定外だった。管理会社に確認したところ、管理会社もこの状況を把握していなかったらしく、オーナーやオーナーが物件を購入した不動産会社に問い合わせをし、詳しく現況を調査してもらった。この連絡まじで疲れた。なぜ今までの人がこの問題に直面しなかったのか謎だが、おそらくVDSL接続していたのだろう。(共用部の光回線に宅内から電話線で接続する方式)</p>
<p>一番疲れたのは管理会社やオーナーに現状とその解決策を理解してもらうことだ。物件の状況を見てない人に電話で説明するのまじむずい。1週間で2年分くらい電話した。</p>
<h2 id="%E8%A7%A3%E6%B1%BA" tabindex="-1">解決</h2>
<p>その後なんやかんやあり、不動産会社が手配した業者にお願いして配管の詰まりを解消してもらったあと、壁の外側に配線を這わせるやり方で工事してもらい、無事に光回線が開通した。NTTは内装工事が出来ないとのことだったので、配線を通すモールを業者に付けてもらった。<br />
電話線配管の工事は請け負ってくれるところが少なく自分で準備するのは大変そうだったので、不動産会社に用意してもらえたのはありがたかった。<br />
オーナーも壁に穴開けるよりはそっちのほうが良いとのことだったのでなんとかOKもらえた。</p>
<h1 id="%E5%BC%95%E8%B6%8A%E3%81%97%E6%99%82%E3%81%AB%E6%B0%97%E3%82%92%E3%81%A4%E3%81%91%E3%82%8B%E3%81%93%E3%81%A8" tabindex="-1">引越し時に気をつけること</h1>
<h2 id="%E5%85%89%E5%9B%9E%E7%B7%9A%E5%AF%BE%E5%BF%9C%E7%89%A9%E4%BB%B6%E3%81%8B" tabindex="-1">光回線対応物件か</h2>
<p>おそらく全員確認するだろうけれども、確認必須。光回線対応とうたっていてもケーブルテレビに付属する回線だったり、管理会社が指定したプロバイダしか選択できなかったり、VDSL接続だったりするので、しっかり確認することが重要。</p>
<h2 id="%E9%9B%BB%E8%A9%B1%E7%B7%9A%E9%85%8D%E7%AE%A1%E3%81%8C%E5%B7%AE%E8%BE%BC%E5%8F%A3%E3%81%AE%E8%A3%8F%E3%81%BE%E3%81%A7%E6%9D%A5%E3%81%A6%E3%82%8B%E3%81%8B" tabindex="-1">電話線配管が差込口の裏まで来てるか</h2>
<p>これは普通の賃貸物件では確認不要だけど、分譲賃貸の物件、特にリノベーションとかリフォームとかしてる物件は要確認必須。リノベーション時に電話線差込口の位置を変更した場合、配管を延長せず電話線だけ延長してしまうことはよくあるらしいので、注意が必要。(僕の物件はそのパターン)</p>
<h2 id="%E9%9B%BB%E8%A9%B1%E7%B7%9A%E9%85%8D%E7%AE%A1%E3%81%8C%E8%A9%B0%E3%81%BE%E3%81%A3%E3%81%A6%E3%81%84%E3%81%AA%E3%81%84%E3%81%8B" tabindex="-1">電話線配管が詰まっていないか</h2>
<p>配管が詰まっていて光回線のケープルが引き込めないのは、賃貸・戸建て問わずあるあるな問題らしかった。<br />
可能なら申込時に管理会社に電話線配管につまりがないか調査してもらうのが一番安全。いくらか費用はかかるけど、入居決めたあとに発覚し光回線が利用できないほうがつらいし、再度引っ越しとなるとめちゃくちゃお金かかるので、入居決まる前に調査お願いしたほうが良い。</p>
<h1 id="%E3%81%BE%E3%81%A8%E3%82%81" tabindex="-1">まとめ</h1>
<p>事前調査マジ大事!!!</p>
2021-03-02T00:00:00Z
/posts/2021-03-02-feel-depression/
<p>うつ病がまた悪化してきたかもしれない。<br />
病院で症状を話すための備忘録として今の状態を記す。</p>
<ul>
<li>食欲は普通〜少しない。間食はよくする。</li>
<li>過眠ぎみ。日中も抗えないほど眠い時がある。</li>
<li>頭がボーッとする。無気力。何もやる気がしない。</li>
<li>仕事が手につかず困っている。思考がまとまらず、メッセージへの返信もままならない。</li>
<li>ゲームはまだ楽しめるが、勝ったときの喜びは少ない。</li>
<li>性欲はあるが減退気味だと思う。</li>
</ul>
2021-03-15T00:00:00Z
/posts/2021-03-15-chinese-tea/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#tl%3Bdr">TL;DR</a></li><li><a href="#%E3%80%8C%E4%B8%AD%E5%9B%BD%E8%8C%B6%E3%81%A3%E3%81%A6%E7%83%8F%E9%BE%8D%E8%8C%B6%E3%81%A7%E3%81%97%E3%82%87%EF%BC%9F%E3%80%8D">「中国茶って烏龍茶でしょ?」</a></li><li><a href="#%E4%B8%AD%E5%9B%BD%E8%8C%B6%E3%81%AE%E9%AD%85%E5%8A%9B">中国茶の魅力</a></li><li><a href="#%E4%B8%AD%E5%9B%BD%E8%8C%B6%E3%81%AE%E5%A7%8B%E3%82%81%E6%96%B9">中国茶の始め方</a><ul><li><a href="#%E4%B8%AD%E5%9B%BD%E8%8C%B6%E3%81%AE%E5%BA%97%E3%81%AB%E8%A1%8C%E3%81%8F">中国茶の店に行く</a></li><li><a href="#%E3%81%A8%E3%82%8A%E3%81%82%E3%81%88%E3%81%9A%E8%8C%B6%E8%91%89%E3%82%92%E8%B2%B7%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B">とりあえず茶葉を買ってみる</a></li><li><a href="#%E8%8C%B6%E5%99%A8%E3%82%92%E6%8F%83%E3%81%88%E3%81%A6%E3%81%BF%E3%82%8B">茶器を揃えてみる</a></li></ul></li><li><a href="#%E3%81%95%E3%81%84%E3%81%94%E3%81%AB">さいごに</a></li></ul></details><p></p>
<p>みんなコーヒーばっかり飲んでてさみしいので、中国茶の良さを解説する</p>
<h2 id="tl%3Bdr" tabindex="-1">TL;DR</h2>
<ul>
<li>烏龍茶だけが中国茶ではない、様々な種類のお茶があり入れ方で味も変わる
<ul>
<li>日本のお茶もヨーロッパの紅茶も中国から伝わったものが形を変えたもの</li>
</ul>
</li>
<li>中国茶の魅力は「香り」「種類の多さ」「茶器」「健康的」「入れ方」</li>
<li>横浜中華街にある悟空という中国茶専門店に行きなさい
<ul>
<li>おすすめ茶葉は白桃烏龍茶、黄金桂、白芽奇蘭</li>
</ul>
</li>
</ul>
<h2 id="%E3%80%8C%E4%B8%AD%E5%9B%BD%E8%8C%B6%E3%81%A3%E3%81%A6%E7%83%8F%E9%BE%8D%E8%8C%B6%E3%81%A7%E3%81%97%E3%82%87%EF%BC%9F%E3%80%8D" tabindex="-1">「中国茶って烏龍茶でしょ?」</h2>
<p>否、烏龍茶だけが中国茶ではない。中国茶には大きく分けると、緑茶、白茶、黄茶、青茶、紅茶、黒茶の6種類のお茶がある。これらは茶葉の発酵の度合いで色が変わることに由来していて、紅茶が一番発酵が進んだお茶である。黒茶は発酵させた茶葉に微生物を付着させさらに深く発酵させたお茶だ。また最近は花茶という茶葉に花の香りを吸着させたお茶も定番化している。有名どころだと烏龍茶は青茶、ジャスミン茶は花茶、プーアール茶は黒茶に分類される。この大きな分類の中でさらに茶葉の産地や品種の違いなどでより細かく分類される。</p>
<p>よく誤解されているが、中国で一番飲まれているのは青茶(烏龍茶)ではなく緑茶だ。中国の緑茶は日本の緑茶と製法が違うため、同じ緑茶でも風味や香りが違う。(緑茶は不発酵茶なので加熱して発酵を止める必要がある。日本では茶葉を蒸して発酵を止めているが、中国では茶葉を煎る製法で作られている。)中国の緑茶は一般的な日本の緑茶と比べてとても香りが良いのが特徴だ。中国ではお茶の香りがとても重要視されるため、それが強く反映された風味になっている。中国茶と日本茶やヨーロッパの紅茶などを飲み比べてみるのも面白いかも。</p>
<p>中国茶についてより詳しく知りたい人は<a href="https://www.goku-teahouse.com/tea/" target="_blank" rel="noopener noreferrer">中国茶専門店 悟空 のウェブサイト</a>を見てくれたまえ。</p>
<p>ここまででざっくり中国茶のことがわかってもらえたんじゃないかと思う。もう中国茶は烏龍茶しかないみたいなこと言わないでね。</p>
<h2 id="%E4%B8%AD%E5%9B%BD%E8%8C%B6%E3%81%AE%E9%AD%85%E5%8A%9B" tabindex="-1">中国茶の魅力</h2>
<p>僕が思う中国茶の魅力はこんな感じ。</p>
<ul>
<li>香りが良い</li>
<li>茶葉の種類が豊富</li>
<li>茶器がかわいい</li>
<li>健康的</li>
</ul>
<p>中国茶は香りが良い。聞香杯という香りを楽しむためだけの杯もある。中国茶は日本茶や紅茶より茶葉ごとの香りや味の違いを感じやすい(個人談)ので、飽きが来にくいと思う。</p>
<p>また、中国茶はとても健康に良い(とされている)。中国茶は生薬や漢方の側面もあるということだ。例えば、烏龍茶にはリラグゼーション・ダイエット・消化促進・利尿作用などの効果があるとされている。</p>
<h2 id="%E4%B8%AD%E5%9B%BD%E8%8C%B6%E3%81%AE%E5%A7%8B%E3%82%81%E6%96%B9" tabindex="-1">中国茶の始め方</h2>
<h3 id="%E4%B8%AD%E5%9B%BD%E8%8C%B6%E3%81%AE%E5%BA%97%E3%81%AB%E8%A1%8C%E3%81%8F" tabindex="-1">中国茶の店に行く</h3>
<p>まず一番最初は、とりあえず茶葉を売ってるお店に行くことをおすすめする。お店の人にいろいろ聞いてみるのもあり。僕のおすすめのお店は横浜中華街にある悟空という中国茶専門店。いい感じに入りやすいし茶葉や茶器の種類もいい感じ。悟空茶荘というカフェもあるので、そこで飲んだお茶の茶葉を買って帰るのも良さそう。原宿にも遊茶という中国茶専門店がある。そっちはちょっと綺麗目な感じ。</p>
<p><a href="https://www.goku-teahouse.com/" target="_blank" rel="noopener noreferrer">https://www.goku-teahouse.com/</a></p>
<h3 id="%E3%81%A8%E3%82%8A%E3%81%82%E3%81%88%E3%81%9A%E8%8C%B6%E8%91%89%E3%82%92%E8%B2%B7%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B" tabindex="-1">とりあえず茶葉を買ってみる</h3>
<p>気になった茶葉を買ってみる。僕が好きな茶葉は白桃烏龍茶、黄金桂、白芽奇蘭。ティーバッグも売ってるので最初はそういうのを買ってみるものあり。</p>
<h3 id="%E8%8C%B6%E5%99%A8%E3%82%92%E6%8F%83%E3%81%88%E3%81%A6%E3%81%BF%E3%82%8B" tabindex="-1">茶器を揃えてみる</h3>
<p>最初は茶器を買わなくても良いと思うが、茶器を買ったほうが雰囲気が出るし気に入ったデザインの茶器があるとテンション上がるよね。</p>
<p>中国茶の茶器は種類が多い。一気に揃えてもいいし、茶壺(小さい急須)や茶杯だけ買っても良い。中国茶の茶器は全体的に小さいのでかわいいデザインの物が多い気がする。</p>
<p>入れ方は様々あるが、そんなに難しくない。コーヒーより簡単。</p>
<h2 id="%E3%81%95%E3%81%84%E3%81%94%E3%81%AB" tabindex="-1">さいごに</h2>
<p>みんな中国茶を飲もう。中国茶談義しよう。</p>
2021-08-29T00:00:00Z
/posts/2021-08-29-fire-burning-projects/
<p>炎上案件だからスキルアップするのではない。<br />
炎上案件は短い間にたくさんのことを要求されるので、うまい案件に当たれば他の人が3年かかるスキルアップを1年でできたりしてしまうだけだ。<br />
しかしそんな良い炎上案件はそう多くはない。<br />
大抵の炎上案件でやらされるのは大してスキルの必要ない大量のつまらない仕事であり、そういった仕事を限界までやらされればスキルアップなんてできず精神を病む。<br />
炎上案件とか激務をこなすことを賛美している人たちはこの点に気づいていないか目をつむっている。完全な生存者バイアスだ。<br />
また炎上案件に長く関わってしまうと目先の課題を手っ取り早く解決することしかできなくなってしまう。<br />
僕はそういう人を何人も見てきた。<br />
もちろん目先の課題を素早く解決できることも大切だが、それと同じくらい、長期的な視点に立って実装や設計の正否を考えたり1つの問題について深く考えることも重要だ。<br />
激務をこなしているだけではこれは身につかない。</p>
<p>僕も炎上案件に関わったことのある人間の一人だが、他人に激務をこなすことを勧めたりしない。<br />
しかしその経験が今の自分の一部となり良い影響をもたらしていることも認識している。<br />
これは誰に批難されるものでも称賛されるものでもなく、ただ僕の運が良かった、それだけの話しである。</p>
<p>大切なのは炎上案件に関わるか否かなどという再現性のない話ではなく、どうやって労働基準法の中で働きながら人を育てるかだと思う。<br />
炎上案件を経験し生き抜いた人間がすべきことは、経験を集合知としてまとめ、適切にプロジェクトを進行できるよう最大限の努力をすることではないのか。<br />
またその中から次に繋がるヒントを見つけ、後から育ってくる人に伝えていくことではないのか。<br />
自分たちのような存在は生まれないほうが幸せなのだ。<br />
現実から目を背け自分たちの経験を美化し思考することをやめたら、そこからは何も生まれない。</p>
2021-08-29T00:00:00Z
/posts/2021-08-29-life-changing-books/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#%E4%B9%B1%E8%AA%AD%E3%81%AE%E3%82%BB%E3%83%AC%E3%83%B3%E3%83%87%E3%82%A3%E3%83%94%E3%83%86%E3%82%A3">乱読のセレンディピティ</a></li><li><a href="#%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3">デザインのデザイン</a></li><li><a href="#%E8%BA%AB%E9%8A%AD%E3%82%92%E5%88%87%E3%82%8C">身銭を切れ</a></li><li><a href="#%E3%82%A2%E3%82%A4%E3%83%87%E3%82%A2%E3%81%AE%E3%81%A4%E3%81%8F%E3%82%8A%E6%96%B9">アイデアのつくり方</a></li></ul></details><p></p>
<p>今までたくさんの本を読んできた中で、僕の人生に影響を与えたかもしれない本をいくつか紹介しようと思う。</p>
<h2 id="%E4%B9%B1%E8%AA%AD%E3%81%AE%E3%82%BB%E3%83%AC%E3%83%B3%E3%83%87%E3%82%A3%E3%83%94%E3%83%86%E3%82%A3" tabindex="-1">乱読のセレンディピティ</h2>
<p>「思考の整理学」の著者でもある外山滋比古先生の本。<br />
この本が僕の読書に関する考え方のベースになっている。</p>
<p><a href="https://www.amazon.co.jp/dp/4594075584/ref=cm_sw_r_tw_dp_C60FZS4WMXFXJX9PRJZ9" target="_blank" rel="noopener noreferrer">https://www.amazon.co.jp/dp/4594075584/ref=cm_sw_r_tw_dp_C60FZS4WMXFXJX9PRJZ9</a></p>
<h2 id="%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3" tabindex="-1">デザインのデザイン</h2>
<p>原研哉さんの本。<br />
ディレクター時代に読んでデザイナーに対する憧れを強くした記憶がある。<br />
特に第三章「情報の建築という考え方」はとても感心して読んだ。</p>
<p><a href="https://www.amazon.co.jp/dp/4000240056/ref=cm_sw_r_tw_dp_WTYHZ2BP94NX86Q127QT" target="_blank" rel="noopener noreferrer">https://www.amazon.co.jp/dp/4000240056/ref=cm_sw_r_tw_dp_WTYHZ2BP94NX86Q127QT</a></p>
<h2 id="%E8%BA%AB%E9%8A%AD%E3%82%92%E5%88%87%E3%82%8C" tabindex="-1">身銭を切れ</h2>
<p><a href="https://twitter.com/better_than_i_w" target="_blank" rel="noopener noreferrer">中西さん</a>から勧められて読んだ本。<br />
「リスクをとって行動しろ。行動で示せ。」ということを具体的なエピソードと共に語っている。<br />
知的俗物にはなりたくないなと思う。<br />
要所要所で出てくる歴史や宗教論に関する記述も面白い。</p>
<p><a href="https://www.amazon.co.jp/dp/447810381X/ref=cm_sw_r_tw_dp_VZS2BF1VNRBPJ3K1GQ8B" target="_blank" rel="noopener noreferrer">https://www.amazon.co.jp/dp/447810381X/ref=cm_sw_r_tw_dp_VZS2BF1VNRBPJ3K1GQ8B</a></p>
<h2 id="%E3%82%A2%E3%82%A4%E3%83%87%E3%82%A2%E3%81%AE%E3%81%A4%E3%81%8F%E3%82%8A%E6%96%B9" tabindex="-1">アイデアのつくり方</h2>
<p>就活時代に誰かが勧めてたのを見て読んだ。<br />
知識からアイデアは生まれる、という至極当たり前のことを書いた本。<br />
薄いけど要点がまとまっていて良い。</p>
<p><a href="https://www.amazon.co.jp/dp/4484881047/ref=cm_sw_r_tw_dp_QTSY3T94N8Q0ZRN9JVQF" target="_blank" rel="noopener noreferrer">https://www.amazon.co.jp/dp/4484881047/ref=cm_sw_r_tw_dp_QTSY3T94N8Q0ZRN9JVQF</a></p>
2021-09-05T00:00:00Z
/posts/2021-09-05-do-not-burn-your-boats/
<p>「背水の陣で頑張る」なんてことはしないほうが良い。<br />
頑張りたいときこそ退路を作ることが大事だ。<br />
退路があると人間安心する。<br />
頑張るときは頑張る対象以外の不安要素を極力少なくするのが良い。<br />
失敗したら逃げよう、うまく行かなくても別の道がある、そう思えるからこそ頑張れる。</p>
2021-09-22T00:00:00Z
/posts/2021-09-22-adjustment-disorder/
<p>適応障害になりました。<br />
お仕事少しお休みします。<br />
日常生活は特に問題なく送れていますが仕事ができません。<br />
ワクチン打ったので美味しいものを一緒に食べに行ってくれたらうれしいです。</p>
2021-09-25T00:00:00Z
/posts/2021-09-25-what-i-can-cook/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#%E3%83%81%E3%83%A3%E3%83%BC%E3%82%B7%E3%83%A5%E3%83%BC">チャーシュー</a></li><li><a href="#%E5%91%B3%E7%8E%89">味玉</a></li><li><a href="#%E3%82%B9%E3%82%A4%E3%82%AB%E3%81%AE%E7%9A%AE%E3%81%AE%E3%82%AD%E3%83%A0%E3%83%81">スイカの皮のキムチ</a></li><li><a href="#%E3%83%81%E3%82%AD%E3%83%B3%E3%82%B9%E3%83%86%E3%83%BC%E3%82%AD">チキンステーキ</a></li><li><a href="#%E3%82%B9%E3%83%86%E3%83%BC%E3%82%AD%EF%BC%88%E7%89%9B%EF%BC%89">ステーキ(牛)</a></li><li><a href="#%E5%94%90%E8%BE%9B%E5%AD%90%E5%91%B3%E5%99%8C">唐辛子味噌</a></li><li><a href="#%E3%83%81%E3%83%A3%E3%83%BC%E3%83%8F%E3%83%B3">チャーハン</a></li><li><a href="#%E3%83%9A%E3%83%9A%E3%83%AD%E3%83%B3%E3%83%81%E3%83%BC%E3%83%8E">ペペロンチーノ</a></li><li><a href="#%E7%84%BC%E3%81%8D%E3%81%9D%E3%81%B0">焼きそば</a></li><li><a href="#%E3%82%AB%E3%83%AC%E3%83%BC">カレー</a></li><li><a href="#%E3%83%9F%E3%83%BC%E3%83%88%E3%82%BD%E3%83%BC%E3%82%B9">ミートソース</a></li><li><a href="#%E9%B6%8F%E3%82%80%E3%81%AD%E8%82%89%E3%81%AE%E3%83%88%E3%83%9E%E3%83%88%E3%82%B9%E3%83%BC%E3%83%97">鶏むね肉のトマトスープ</a></li><li><a href="#%E9%BA%BB%E5%A9%86%E8%8C%84%E5%AD%90">麻婆茄子</a></li><li><a href="#%E3%81%AA%E3%81%99%E3%81%AE%E7%84%BC%E3%81%8D%E6%B5%B8%E3%81%97">なすの焼き浸し</a></li><li><a href="#%E8%B1%9A%E3%83%90%E3%83%A9%E3%81%A8%E5%86%AC%E7%93%9C%E3%81%AE%E7%82%92%E3%82%81%E7%85%AE">豚バラと冬瓜の炒め煮</a></li><li><a href="#%E3%83%9D%E3%83%BC%E3%82%AF%E3%82%B8%E3%83%B3%E3%82%B8%E3%83%A3%E3%83%BC">ポークジンジャー</a></li><li><a href="#%E7%94%9F%E5%A7%9C%E7%84%BC%E3%81%8D">生姜焼き</a></li><li><a href="#%E3%81%B6%E3%82%8A%E3%81%AE%E7%85%A7%E7%84%BC">ぶりの照焼</a></li><li><a href="#%E3%81%B6%E3%82%8A%E5%A4%A7%E6%A0%B9">ぶり大根</a></li><li><a href="#%E3%82%AA%E3%83%A0%E3%83%A9%E3%82%A4%E3%82%B9">オムライス</a></li><li><a href="#%E3%83%8F%E3%83%B3%E3%83%90%E3%83%BC%E3%82%B0">ハンバーグ</a></li><li><a href="#%E3%83%91%E3%82%B9%E3%82%BF%EF%BC%88%E3%81%84%E3%82%8D%E3%81%84%E3%82%8D%EF%BC%89">パスタ(いろいろ)</a></li><li><a href="#%E9%9B%91%E3%81%AA%E9%87%8E%E8%8F%9C%E7%82%92%E3%82%81">雑な野菜炒め</a></li></ul></details><p></p>
<p>僕がよく作る料理を紹介します。</p>
<h2 id="%E3%83%81%E3%83%A3%E3%83%BC%E3%82%B7%E3%83%A5%E3%83%BC" tabindex="-1">チャーシュー</h2>
<p>レシピを確認しなくてもわりと美味しく作れます。<br />
茹でてタレ作って漬け込むだけなので誰でも簡単に作れます。<br />
このレシピがおすすめ。<br />
<a href="https://youtu.be/WV0xqkdVurs" target="_blank" rel="noopener noreferrer">https://youtu.be/WV0xqkdVurs</a></p>
<h2 id="%E5%91%B3%E7%8E%89" tabindex="-1">味玉</h2>
<p>チャーシューのタレにゆで卵をつけるだけ。<br />
半熟卵だと完璧だけど固茹ででも全然問題ないです。<br />
うまい。</p>
<h2 id="%E3%82%B9%E3%82%A4%E3%82%AB%E3%81%AE%E7%9A%AE%E3%81%AE%E3%82%AD%E3%83%A0%E3%83%81" tabindex="-1">スイカの皮のキムチ</h2>
<p>皮の厚いスイカを買ってきて果肉と緑色の硬い皮を外してちょっと塩もみした後に市販のキムチの素を入れるだけ。<br />
スイカの皮はどんな漬物にしてもうまい。</p>
<h2 id="%E3%83%81%E3%82%AD%E3%83%B3%E3%82%B9%E3%83%86%E3%83%BC%E3%82%AD" tabindex="-1">チキンステーキ</h2>
<p>皮パリジューシーに焼くことができます。</p>
<h2 id="%E3%82%B9%E3%83%86%E3%83%BC%E3%82%AD%EF%BC%88%E7%89%9B%EF%BC%89" tabindex="-1">ステーキ(牛)</h2>
<p>とても美味しく焼けます。<br />
鉄フライパンを使って焼きます。</p>
<h2 id="%E5%94%90%E8%BE%9B%E5%AD%90%E5%91%B3%E5%99%8C" tabindex="-1">唐辛子味噌</h2>
<p>青唐辛子を炒めたものを砂糖とみりんで甘くした味噌に混ぜて作ります。<br />
このレシピを参考に作ってます。<br />
<a href="https://youtu.be/uRWeJFUUa1s" target="_blank" rel="noopener noreferrer">https://youtu.be/uRWeJFUUa1s</a></p>
<h2 id="%E3%83%81%E3%83%A3%E3%83%BC%E3%83%8F%E3%83%B3" tabindex="-1">チャーハン</h2>
<p>レシピを見なくてもわりと美味しく作れます。<br />
うちでは中華鍋を使います。<br />
卵とごはんを最初に混ぜたらだめです。</p>
<h2 id="%E3%83%9A%E3%83%9A%E3%83%AD%E3%83%B3%E3%83%81%E3%83%BC%E3%83%8E" tabindex="-1">ペペロンチーノ</h2>
<p>素人以上プロ以下の味です。<br />
にんにく唐辛子たっぷりのやつが好きです。<br />
オリーブオイルをケチったら負けです。<br />
セミドライトマトがあるときは入れます。</p>
<h2 id="%E7%84%BC%E3%81%8D%E3%81%9D%E3%81%B0" tabindex="-1">焼きそば</h2>
<p>けっこう美味しく作れます。<br />
市販のやきそば麺についてくるソースを2/3くらい使って、ウスターソースとケチャップを加えると美味しくできます。</p>
<h2 id="%E3%82%AB%E3%83%AC%E3%83%BC" tabindex="-1">カレー</h2>
<p>1ヶ月に1回は必ず作ります。<br />
けっこう美味しく作れます。<br />
市販のカレールーを使うタイプのカレーが好きです。<br />
具材は肉と玉葱だけで、あとから焼いた野菜をトッピングするのが好きです。<br />
たまにトマト缶を煮詰めたやつとかフレッシュトマトとかを入れます。<br />
冷凍保存ができなくなるのでじゃがいもにんじんは入れません。</p>
<h2 id="%E3%83%9F%E3%83%BC%E3%83%88%E3%82%BD%E3%83%BC%E3%82%B9" tabindex="-1">ミートソース</h2>
<p>パスタが好きなのでよく作ります。<br />
レシピ見なくても作れます。<br />
隠し味にウスターソースを入れます。</p>
<h2 id="%E9%B6%8F%E3%82%80%E3%81%AD%E8%82%89%E3%81%AE%E3%83%88%E3%83%9E%E3%83%88%E3%82%B9%E3%83%BC%E3%83%97" tabindex="-1">鶏むね肉のトマトスープ</h2>
<p>鶏むね肉、玉ねぎ、その他野菜+トマト缶にコンソメぶちこんで作るスープです。<br />
オリジナルレシピです。たぶん。<br />
似たようなことしてる人はたくさんいそう。<br />
ダイエット食としておすすめです。</p>
<h2 id="%E9%BA%BB%E5%A9%86%E8%8C%84%E5%AD%90" tabindex="-1">麻婆茄子</h2>
<p>レシピを見なくても作れます。<br />
甜麺醤と豆板醤が必要なのでちょっと大変です。<br />
ナスを少し多めの油で皮目から焼くのがポイントです。</p>
<h2 id="%E3%81%AA%E3%81%99%E3%81%AE%E7%84%BC%E3%81%8D%E6%B5%B8%E3%81%97" tabindex="-1">なすの焼き浸し</h2>
<p>なす好きなのでよくつくります。<br />
めんつゆがあればできるので簡単です。<br />
ししとうがあればししとうも一緒に焼きびたしにして食べます。</p>
<h2 id="%E8%B1%9A%E3%83%90%E3%83%A9%E3%81%A8%E5%86%AC%E7%93%9C%E3%81%AE%E7%82%92%E3%82%81%E7%85%AE" tabindex="-1">豚バラと冬瓜の炒め煮</h2>
<p>冬瓜が好きなのでよく作ります。<br />
鶏もも肉でも美味しいですが僕は豚バラで作るのが一番好きです。<br />
ひき肉でも良いです。</p>
<h2 id="%E3%83%9D%E3%83%BC%E3%82%AF%E3%82%B8%E3%83%B3%E3%82%B8%E3%83%A3%E3%83%BC" tabindex="-1">ポークジンジャー</h2>
<p>生姜焼きよりポークジンジャーが好きです。<br />
玉ねぎをすりおろすのが大変なのであまり多くは作りません。</p>
<h2 id="%E7%94%9F%E5%A7%9C%E7%84%BC%E3%81%8D" tabindex="-1">生姜焼き</h2>
<p>レシピみなくても作れます。<br />
白ごはんドットコムのレシピが最強です。</p>
<h2 id="%E3%81%B6%E3%82%8A%E3%81%AE%E7%85%A7%E7%84%BC" tabindex="-1">ぶりの照焼</h2>
<p>すごく美味しく作れます。<br />
魚料理で一番好きです。<br />
白ごはんドットコムのレシピがおすすめです。</p>
<h2 id="%E3%81%B6%E3%82%8A%E5%A4%A7%E6%A0%B9" tabindex="-1">ぶり大根</h2>
<p>レシピを見なくてもだいたい美味しく作れます。<br />
ブリは何しても美味しいです。<br />
白ごはんドットコムのレシピがおすすめです。</p>
<h2 id="%E3%82%AA%E3%83%A0%E3%83%A9%E3%82%A4%E3%82%B9" tabindex="-1">オムライス</h2>
<p>美味しく作れますが卵でライスを包んだりぱかっとするタイプのオムライスは作れません。</p>
<h2 id="%E3%83%8F%E3%83%B3%E3%83%90%E3%83%BC%E3%82%B0" tabindex="-1">ハンバーグ</h2>
<p>レシピを見なくても作れます。<br />
大事なのは塩を入れて練ることとタネを温めないこと。<br />
個人的には牛乳を入れないほうが好きです。</p>
<h2 id="%E3%83%91%E3%82%B9%E3%82%BF%EF%BC%88%E3%81%84%E3%82%8D%E3%81%84%E3%82%8D%EF%BC%89" tabindex="-1">パスタ(いろいろ)</h2>
<p>パスタ好きなので冷蔵庫にある野菜や缶詰などを使っていろいろなパスタを作ります。<br />
どれもうまいです。</p>
<h2 id="%E9%9B%91%E3%81%AA%E9%87%8E%E8%8F%9C%E7%82%92%E3%82%81" tabindex="-1">雑な野菜炒め</h2>
<p>キャベツやその他冷蔵庫に余ってる野菜や肉を使って野菜炒めを作ります。<br />
中華鍋を使うようになってからレベルアップしました。</p>
2021-09-26T00:00:00Z
/posts/2021-09-26-weekly-report/
<h3 id="9%E6%9C%8820%E6%97%A5%EF%BC%88%E6%9C%88%EF%BC%89" tabindex="-1">9月20日(月)</h3>
<p>敬老の日。<br />
家でゴロゴロした。<br />
先週打ったワクチンの副反応がまだ残っていたのか、すごく頭が痛かった。<br />
DEATHLOOPというゲームを買ってやっていたんだが、これが思いの外面白かった。</p>
<h3 id="9%E6%9C%8821%E6%97%A5%EF%BC%88%E7%81%AB%EF%BC%89" tabindex="-1">9月21日(火)</h3>
<p>一日なにもせず過ごした。<br />
seyaさんとすごく久しぶりに話をした。<br />
キャリアと言うかやりたいことが近そうだなと勝手に思っていたので、いろいろお話できて楽しかった。</p>
<h3 id="9%E6%9C%8822%E6%97%A5%EF%BC%88%E6%B0%B4%EF%BC%89" tabindex="-1">9月22日(水)</h3>
<p>心療内科に行き適応障害だと診断された。<br />
しばらく休職することになった。<br />
いろいろ考えてたけど、とりあえず全部忘れることにした。<br />
夜はよしこさんの模擬面接に参加した。<br />
いろいろ質問されてぱっと答えられないことがいくつかあったので勉強し直さないとなあと思った。<br />
模擬面接をする試みはすごく良いと思ったので、これを機に広まると良さそう。</p>
<h3 id="9%E6%9C%8823%E6%97%A5%EF%BC%88%E6%9C%A8%EF%BC%89" tabindex="-1">9月23日(木)</h3>
<p>赤レンガ倉庫に散歩しに行った。<br />
途中で象の鼻パークのカフェでソフトクリームを食べた。<br />
大さん橋に飛鳥Ⅱが停泊してて、きれいだった。<br />
よく晴れていて少し暑かったが海沿いを歩くにはちょうどよい天気だった。</p>
<p><img src="https://lh3.googleusercontent.com/XUOGVihkDNht75qJevMWYo-YxXOBLH_BQZTvgmtvq3CjHDRzNql0qdqaPCz3GmrFCWcewTj5Ckc4VHfIYaEvrCB3tQnYzmHQM2BrjUwKUYWqV_3VYR-gWKeFWI3O-CacXYr-Dy_uLrH62Ng816z15zXhDNSDufR7mCVSOleU3ZnRxU4QkQsCHOY8mtBfcnku_2G2sIuvUB1pqgWkACJPid20s-imSoFBrpCm5Fu7XccHJ1skI0T5kVGvnOIspYE2N1A2-6JVdBtsc8L9Fk3zACPFGCKoe75-3A06XnlRctY3VTNp7vzyNSokQtvHEPTy8MyhTpgMrp7QTpkfsbh88Quikru-IVx5XsDh8TOkY9F9kV-SqvI-S5HFiMGV7SBBYlXREbh2zf7yeCn_tqsE8vAEFS_7hZEKiGgkcK9uhe6nOlyFsdRKd-AHlZUbVuh1sjDzoFh0O6bsqTvC3pnD948CEsEvEIPKmzl2-jIk1_kBF1PNGUG8DX_ss0n6TbnUCFkVDsKs0I35V9ElDSjGRor-Q8BMsVooewc4JRD0m99mQY4H1P81GYQp5IqBvOzmctGEPnC2TXk8QDQu8WnUZe1ZT9m7kG81mzQL2BcL4-3zkkhmDxOpL-co4-g6DHleMihp9kNv9EuDmKpB8AJ2Z-MAxP1H2oOyc3jsgNsTBSpw9tvgnO6mLNmrjfbF4rJzjdoyFgfNU9Jc3ncGaPYqALA=w2294-h1291-no?authuser=0" alt="" loading="lazy" /></p>
<h3 id="9%E6%9C%8824%E6%97%A5%EF%BC%88%E9%87%91%EF%BC%89" tabindex="-1">9月24日(金)</h3>
<p>久しぶりにサイゼリヤに行った。<br />
サイゼリヤはキャッシュレス決済ができるようになり死角がなくなった。<br />
辛味チキンの本数が減っていて、最近の様々なものの価格高騰について思いを馳せるなどした。<br />
有隣堂にも行った。<br />
処方された漢方薬がセロリ味でまじで吐きそうだったが、もっと変な味の薬を出されても困るので我慢して飲むことにしよう。</p>
<h3 id="9%E6%9C%8825%E6%97%A5%EF%BC%88%E5%9C%9F%EF%BC%89" tabindex="-1">9月25日(土)</h3>
<p>Podcastの編集作業をした後にコメダ珈琲に行きコメ牛を食べた。<br />
うまかった。<br />
コメダのサイズ感は何回行っても慣れない。</p>
<p><img src="https://lh3.googleusercontent.com/KX5WX6l56L49n0OhNJC98aP3BzRw-wOrYgDodrknE6B4jzAn_yEzPhVQfouWtZjxuxTjgUw5N0fK7ITT71n8ZgBPWOPm3AVU5016ki5NWAsYo4oiTLStQs4_j0aG9Khs22m3XxrsnRWl0uUNZCm0cNCFPh_-C85YwPGxvqmx5UPnEkkzda7YIuPyKNCe7K3cO4gIZcI0OvDoYp8snYw1cLKjxU_pS75AXTQCbGXh6pv1fYV5s1SA76GHgH3vI2TJjdajm5HOELk5KxRFnPP0ZOLlrtZUT5AxL3JZnesmc7ncBvOYdyvtHZ1a62MS4jkvOC_lZ680fwz51Kgoi6rCWtGtee8rWU1kZfhHJ8Vk61r1pHfHdiQXFqZJIkhM76IpU3WKoKlhMX29joU2TbMgelUeScWIs4om0WDtNilabQ5vYgLjkomEwdaZWVmtOFO6sl4f8asOwmcY7_x9QftUmRo7cM7R4zVsYSwxhMH0XGGzSu6xiU-LV3yi08q8qUDk4Ufc5ZM481JbWabvJcuRW3NEp42Dgez5xzVv1H_1OBCcA5LoqF0507uJ0OnUhvqwpwydmM01pQ1ZOXdQmNA32KW3382S2nbzaAGgpqMBCUhW-hatACOF2_Zhlu4kJD4fubcBtGmdU6lVX9q2Ch-HjjDgceukC0hyXKl9PEFOFch-sh_YNJXxcDAOVtWQss_JXML5oUcb2WsOohuS2GYl48o=w2294-h1291-no?authuser=0" alt="" loading="lazy" /></p>
<h3 id="9%E6%9C%8826%E6%97%A5%EF%BC%88%E6%97%A5%EF%BC%89" tabindex="-1">9月26日(日)</h3>
<p>職務経歴書を書いた。<br />
今まできちんと書いたことがなかったので疲れた。<br />
すこし休んだおかげか、文章を書いたり読んだりするのがちょっとできるようになってきた。<br />
007:スカイフォールを見た。<br />
隣駅まで散歩した。<br />
ミスドでお茶して味噌ラーメンを食べて帰った。<br />
短いながら満足感のある外出だった。<br />
久しぶりに湯船につかった。</p>
2021-10-03T00:00:00Z
/posts/2021-10-03/
<h3 id="9%E6%9C%8827%E6%97%A5%EF%BC%88%E6%9C%88%EF%BC%89" tabindex="-1">9月27日(月)</h3>
<p>鮭のムニエルを作った。<br />
思いの外よくできた。<br />
<img src="https://lh3.googleusercontent.com/_bi2dMbqpZlYK1snrjl1mSqZXlJF_RZTvmoUYi6u0kf1Mr9jMdlZ7EDQYO294pF5uqpI-C2Zmkq5WHX1upQoz0cvcCmc-VwRBM2zDxvRk8TVZtJUZdcipM9bWfQfMMbzjHyiVbSPXmDeF6RmHe_RAhQUjpWOHYF9YIZLtn5nIGnsYR86-TgpeKWu0zVZrKzKLhct2__j54zTnUD7ykttb1vLl0ofFQ3tHi6sVIaHkyd0OF4u77M8xiIrbwmAG_cHr4KX8e7K8LnGzjZFnsd6W-bqoFcYZ2BcTio_j5TtH0FFjw8b1DMQn3PoT7bcxnpC4OAyhImDe_HLi5-ibug4UsAgwLJhti5ZuRJru8JjEptE6nyWsnJSMXpyLjDyDBZxEwrdfIkbOD8f4uPySpU3KKtHzrrcPFHIzqUJi2JHPGvMDFRJmEAPwANPpj76jLSSp_5Vg0OxlaqjeNhXAb5STsRx-WH6zg-VG57p6duqiNI4aJWC7OLw-_bJpR1n1tKRfu3IQmkdXDK2SOiuIJ_5nLh2VOlKbHFlh46YBuiMyskL_d3p1ZTLsbzIKhkggNCEDHfX7YitAh8FTaDNSbsvg5mfvkaasBeC8VvkOIx_B_WsyxbGSNUk91oMPqvHyGQX7tM3LDHmip36MhZEbldKNYY9U8SDnAxm5hc9eqhJHVzDLpIvpUkLzuRquO49DjMYZ7oDE09yii5Yo00TmGtRjrU=w2294-h1291-no?authuser=0" alt="" loading="lazy" /></p>
<p>お元気ですかFMの第2回を公開した。<br />
けっこう聴いてもらえてるみたいで嬉しい。<br />
Podcastでのリスナーが聴きやすい話し方がまだよくわかってないので、他のPodcastとか聴いて改善したい。<br />
<a href="https://open.spotify.com/episode/0oxUbWQNIDvu8uMb9nfeqz?si=kxHq5pYETUyF_JLiU1yVOA&dl_branch=1" target="_blank" rel="noopener noreferrer">https://open.spotify.com/episode/0oxUbWQNIDvu8uMb9nfeqz?si=kxHq5pYETUyF_JLiU1yVOA&dl_branch=1</a></p>
<p>FROCLUBというめちょ良いアパレルを見つけてしまった。<br />
とりあえず<a href="https://froclub.shop/items/5f801e398ac39440c2a302c9" target="_blank" rel="noopener noreferrer">白地の長袖シャツ</a>を買った。<br />
こういう銭湯系のアパレルに弱い。<br />
いつか自分で銭湯を経営してみたいなと1年に2回くらい考える。<br />
<a href="https://froclub.shop/" target="_blank" rel="noopener noreferrer">https://froclub.shop/</a></p>
<h3 id="9%E6%9C%8828%E6%97%A5%EF%BC%88%E7%81%AB%EF%BC%89" tabindex="-1">9月28日(火)</h3>
<p>KOBA789さんが人工衛星のソフトウェアを書いてるというエントリを読んだ。<br />
<a href="https://twitter.com/KOBA789/status/1442647753847291905?s=20" target="_blank" rel="noopener noreferrer">https://twitter.com/KOBA789/status/1442647753847291905?s=20</a><br />
将来宇宙系の会社で働いてみたいなと思うが日本には宇宙開発の会社が少ないのでもっと英語を頑張らねばなという気持ちが強くなった。</p>
<p>資金調達ニュースがいくつかあってめでたいなという気持ちになった。<br />
資金調達はゴールではないけどお金がないと何もできないから、大事なことだよなと思ったりする。</p>
<p>雑談をしていて、多肉植物の個人間売買がアツいということを知った。<br />
やり込んでいる人は同じ種類の多肉植物をとても大量に持っていたりするらしく、それが珍しい種類だったりすると「そんなに持ってるなら売ってくれよ」となるらしい。<br />
まだまだ世界は広いなと思った。</p>
<h3 id="9%E6%9C%8829%E6%97%A5%EF%BC%88%E6%B0%B4%EF%BC%89" tabindex="-1">9月29日(水)</h3>
<p>久しぶりにシーシャを吸った。<br />
シーシャ吸って美味しいなと感じること今までなかったんだけど、今回のはとても美味しかった。<br />
ちょっと遠いのであまり行けないけど、また行きたいな。</p>
<p>今持ってるキーボードの静音化をした。<br />
詳しくは別の記事に書くかも。<br />
Oリングを付けたのと吸音スポンジを基盤とケースの間にいれた。<br />
個人的にかなり好みの打鍵感になったので良かった。(Oリングは好き嫌いが分かれる。)</p>
<p>セロリ味の漢方を飲むのがつらすぎたので久しぶりにオブラートを買った。<br />
オブラートがあればどんな漢方だって飲めちゃうもんね。</p>
<p>Crazy Racoonというゲーミングチームがスマーフという違反行為をして炎上してた&それに関わっていたVTuberが活動休止になってた。<br />
CRは最近すごく伸びてる勢いのあるチームで、かなりクリーンな印象があったので今回の騒動には驚いた。<br />
ゲーム配信者の人たちは気を使わないといけないことがたくさんありすぎて、めちゃくちゃ大変そうだなと思う。<br />
CR天月と花芽すみれはたたの巻き込み事故みたいなので本当に気の毒でならない。<br />
また元気に配信してくれるといいな。</p>
<h3 id="9%E6%9C%8830%E6%97%A5%EF%BC%88%E6%9C%A8%EF%BC%89" tabindex="-1">9月30日(木)</h3>
<p>分割キーボードほしい気持ちが高まってきて色々調べてた。<br />
Mistel MD770からFunctionキーを取り除いたやつがほしいのだけどどこにも売ってない。<br />
と思ったが、YMDKでこれを見つけた。<br />
<a href="https://ymdkey.com/collections/split-75-60/products/ymdk-split-64-sp64-cnc-aluminum-case-plate-hot-socket-hot-swap-pcb-underglow-rgb-fully-programmable-diy-kit" target="_blank" rel="noopener noreferrer">https://ymdkey.com/collections/split-75-60/products/ymdk-split-64-sp64-cnc-aluminum-case-plate-hot-socket-hot-swap-pcb-underglow-rgb-fully-programmable-diy-kit</a><br />
キーキャップまで含めるとMDで770より高くなってしまうので迷うけど、完全に求めていたものなので気になっている。</p>
<p>分割キーボードの自作キット、キー配列がトチ狂っていたり矢印キーがなかったりしてまともなやつが1つもないの、まじで困る。<br />
そのへんの背景とかをみやおかさんが日報に書いてて、おおよそ理解はできたけど共感はできないなと思った。<br />
矢印キーは必要。</p>
<p>#UIT_INSIDE ep.100でCSSとかフォントとかの話をすることになった。<br />
何話そう。</p>
<h3 id="10%E6%9C%881%E6%97%A5%EF%BC%88%E9%87%91%EF%BC%89" tabindex="-1">10月1日(金)</h3>
<p>SmartHRの「年末調整書類があつまる封筒」の出来がプロセスまで含めて良すぎてなんか感動した。<br />
本当にまっとうにデザインの力を最大限に活用してるなと思ったし、何かを強力にリードする人の重要性を改めて感じた。<br />
そういうデザイナーになりたい人生だったなあ。</p>
<p>nabettuさんがやっていたWraptasが買収されてた。<br />
めでたい。<br />
<a href="https://prtimes.jp/main/html/rd/p/000000072.000017103.html" target="_blank" rel="noopener noreferrer">https://prtimes.jp/main/html/rd/p/000000072.000017103.html</a></p>
<h3 id="10%E6%9C%882%E6%97%A5%EF%BC%88%E5%9C%9F%EF%BC%89" tabindex="-1">10月2日(土)</h3>
<p>第24回文化庁メディア芸術祭に行った。<br />
今年はお台場の日本科学未来館での開催だった。<br />
日本科学未来館は中学生のころ年パス買って通っていたのでなんか懐かしい気持ちになった。<br />
個人的に一番印象に残った展示は「Bricolage」というオーストラリアの人たちが作った作品だ。<br />
<a href="https://www.online24th.j-mediaarts.jp/award/169" target="_blank" rel="noopener noreferrer">https://www.online24th.j-mediaarts.jp/award/169</a><br />
絹で培養された心筋細胞が自律的に動く様子を見せるもので、人造人間のようなものを連想させる面白い展示だった。</p>
<p>日本科学未来館のとなりでTOKYO IDOL FESTIVAL 2021が開催されてて、温度差がやばくてうけた。</p>
<p><img src="https://lh3.googleusercontent.com/Qqe3BGAqZbPhXP7r-GHAy5kUbPZ6zF2cYDDE6agZUVxWsXk6v3n9LdSRroy8C-CKDvgCTHFCVYP6bSebAeAta7Qmu1YDYSnNLa7LPUnjfRPdMUxLs0sENw7x4oPr0eO3O6GFchex8aUY8Kz1-NeoUDGiULZ7zXG8NWitr3-825Itg9qTvQc5oZ0i4QkAq4lHhb1VFsAjhfgS2MhFK0hCl4NBIY0hrsJy2Q_WXk5z5fDiu5zVuAjjwc_158tnDR7YGY01yZTKvVqCEqSnBrAshyQt35W9K6ov4NE8974UzkOb9-6mDeak333bdRBFVOfwJXin4REC0vPLWHqthiP-AjQ58dJIg5Hj8XR1TTSQ3EDc0uClHYka5mCSio3PRgPzWGbbkYCnpbD1kQ3iI4xkT4FS2yin1EBWmqIy1UKlABW7gWChAOpJVcuhUuEDT6bkxn9gN0AXxMUsmbKSsQmsY2cWGqBUYnet4Kp37w3poT-BXakGRPEjrFPqe56iQvhSf-2XxlfRwxcNPumLDVqoAfypEsSea0KH2jRRtcpRwWym53jkzzFiS6xFVpW35FIeomvVTICR_digOJzLPTVIjUt6TtkniWDN4jgEPJfif9_RUWiM57BdZEzEYwqLWQekKQW3XIQRedKYM8zazIzPI74-ZuDs4nDtryzymmk4wS-q6jAnQa7v2vnTQVx1CwNCx-Sn42sGOJDj_mQNoqXCkuY=w752-h1336-no?authuser=0" alt="" loading="lazy" /></p>
<p>せっかくお台場に来たのでガンダムを見た。<br />
<img src="https://lh3.googleusercontent.com/A2YEf9GohBv6yPusb27RrEUdrZ6oZfi_324tUZzktZA6cVE9VnFXyhUuW_JTDz8TWO8m-fbdsvU3Xv5eoZlFtFvUZWu6ipO87Rj_UcaeGpZW_wko5KOnZ3dd66KmZwQ1f2cbOM65BOF-0o9zkfjVYTY4RHpP6mV-a9p98-2f61mCrCz-OEWCzEHtuzXM92oP4JuDohnofh15xWaX2bZNrcEfJ0N3AQVBMZkELjTpT92_wptjZ8vU5KoDulHhCiLzDHpEWLVdBEo2z8iJptG4WGK3lCBpUruur0u0AFuJ643xCNpqs2B1gwO2AFkRRZDb3UugmMAxOR3PtNH0GCAm7IkitnyOmGSReE1-NPjM_kJ5C58y2P-j9NuGXWy4VAXYbARaWwFmA6y71PKjK9ZWRrdGJ_MWP9pqc1NxFejEAQnw8vfO2L84lu7X33RgjecM7Cs8y-wdWQ2Ae1zKHLO_oo8F58pIl8b9Ej03VNDdBXVnu7IBlvF8knWcBKhDZ3qItr6IJQV_seTi6qWIgHw5wmIX4n_k-enktBNpb1XEVINPNtNLsWkTQP7CvNv8FOHXCEmQh8Nl8z2nS_1kH9HazBvvZxYvD3UOEUJ_3qLstxfSGycU32YIfoGQC_qkf-Y7AdDjSOmTfp4Z6trjIS4cugNUWUU0bN5xHrq2yIt8UfhJ6b6d5D-eOoyg3adYl7f4eSJrR58ToDvJEgui8mteEMA=w752-h1336-no?authuser=0" alt="" loading="lazy" /></p>
<p>家のベランダから遠の雷光が見えてとてもきれいだった。<br />
こんなにはっきり雷を見たのは初めてかもしれない。<br />
<a href="https://twitter.com/takanoripe/status/1444330073444610048?s=20" target="_blank" rel="noopener noreferrer">https://twitter.com/takanoripe/status/1444330073444610048?s=20</a></p>
<h3 id="10%E6%9C%8803%E6%97%A5%EF%BC%88%E6%97%A5%EF%BC%89" tabindex="-1">10月03日(日)</h3>
<p>近所の公園に散歩に行った。<br />
近くに大きい公園があると何も考えずに散歩できて楽しい。<br />
今日は日曜日だからか犬と子供が多かった。<br />
公園に行ったら必ずセブンティーンアイスの自販機でアイスを買うんだけど、僕が好きなミルクあずきモナカがなくなっててショックだった。<br />
<img src="https://lh3.googleusercontent.com/K0MsXXJjOI3C6iCCtDoC9ZXciVw-gwTggF0KfEdEueaPAt1wARgyofMNRBIB0uoN--8BnNgNBZ_BPOjx19J_SDEq6eMqwOzkrqISddhhd5p-Xo2hr1C0e8TKThAJ4JSET2mAgSaHdcBLKi0ZC6SXiu4wp5YPKiF3wLNValUTRjZrLim_gsCSYl1IBSZTyR0xnWUyiNo5qCmGxMQgp2wT0ccHYAKRZXmvG0Krljp-mCbZmb1C6pOCIT62l-A5t_n4Kkrz_3IjM_2XN2VimV1pQ6tYYO1LclfSG_R8sZCRj3wYN5kHMr8BQgODJNl1oIXCwdovGMfVSHbz3r_MM95Cgi7rvFL3UZ8VuUF8OwyM9ZOmb4z6LoP63rja3QYMPxsLgGqPWyFANs84iRzx1ufCl4Drm0sFq4ehrTC6cMDAklhx55b1LvLbEZKWU1NGkRVGjFp42fQ7WedNdvDwimTkZ79kQDmpANJtG02UmYhDmz7xbRR2hnam1fzsRrEdDQHy_OMb6bqRZ1gETYMvowwIeylKrfIFmIW49yKgSN-V74nlx1Z0Ch78lePOVUs8-Xui5QvWblVBBGUq9uTQiTBuwUzYWadwUlOBCjtp4WsKV6JyZOxKoWgF-R62onC2mqRZ_tl6v6iU1Xx__SbJskCASf0Gvm4S8M6a9GB-e3tFKvR6y6wC_iAwdfFSte-jl0ABVv4Z5QDZ5NXTDThohz5nqto=w2294-h1291-no?authuser=0" alt="" loading="lazy" /></p>
2021-10-04T00:00:00Z
/posts/2021-10-04-keyboard-sound-dampening/
<h2 id="%E6%A6%82%E8%A6%81" tabindex="-1">概要</h2>
<p>僕の持っている<a href="https://www.keychron.com/products/keychron-k6-wireless-mechanical-keyboard" target="_blank" rel="noopener noreferrer">Keychron K6</a>というメカニカルキーボードを静音化した。<br />
軸はGateronの赤軸だ。<br />
やったことはこの2つ。</p>
<ul>
<li>基盤とケースの間に吸音スポンジを入れる</li>
<li>Oリングを付ける</li>
</ul>
<h2 id="%E5%90%B8%E9%9F%B3%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B8" tabindex="-1">吸音スポンジ</h2>
<p>写真を撮るのを忘れたので、詳しくはこの動画を見てほしい。</p>
<div class="youtube">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/tpKf1mFV6WA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
<p>今回使った吸音スポンジはこれ。<br />
<a href="https://www.amazon.co.jp/dp/B00ME34GNS/ref=cm_sw_r_tw_dp_P4B9QGMKA0126A0MZ363?_encoding=UTF8&psc=1" target="_blank" rel="noopener noreferrer">https://www.amazon.co.jp/dp/B00ME34GNS/ref=cm_sw_r_tw_dp_P4B9QGMKA0126A0MZ363?_encoding=UTF8&psc=1</a><br />
厚さ3mmでちょうどよかった。</p>
<p>実際にやってみて、すごく静かというほどではないけど、音が響かなくなって心地よい音になった気がした。<br />
特にKeychronは薄めのプラスチックケースで音が響きやすいので、他のキーボードより効果を実感しやすかったのかもしれない。<br />
けっこう手軽にできるのでおすすめ。</p>
<p>1点、バッテリーの周りをスポンジで覆って大丈夫かという問題があるが、キーボードの無線接続くらいじゃ大して発熱しないし、まあたぶん大丈夫だろう。</p>
<h2 id="o%E3%83%AA%E3%83%B3%E3%82%B0" tabindex="-1">Oリング</h2>
<p>Oリングもつけてみた。</p>
<p>今回買ったのはこれ。<br />
<a href="https://www.amazon.co.jp/dp/B00N85L5QC/ref=cm_sw_r_tw_dp_SFDV1VZ888J2NYDSCM00?_encoding=UTF8&psc=1" target="_blank" rel="noopener noreferrer">https://www.amazon.co.jp/dp/B00N85L5QC/ref=cm_sw_r_tw_dp_SFDV1VZ888J2NYDSCM00?_encoding=UTF8&psc=1</a></p>
<p>つけた感想としては、少しメカニカルキーボード感がなくなったというかNizのキーボードに近い打鍵感になった気がする。<br />
メンブレンキーボードとも少し違う、メカニカルっぽいんだけどゴムの柔らかさみたいなものもがあって、なんか独特な感じになった。<br />
好き嫌いが分かれそうな感じではあるが、僕はこっちのほうが好きかもしれない。</p>
<p>音はだいぶ静かになった。<br />
吸音スポンジを入れただけのときより明らかにタイピング音が小さくなった。<br />
少しさみしいような気もするが、個人的には大満足の仕上がり。</p>
<p>あと、Oリングを付けると2mmキーストロークが短くなるのも個人的には嬉しいポイントだった。<br />
今までずっとストロークの浅いキーボードばかり使ってきたので、やはり少しストローク短いほうが打ちやすいと感じた。</p>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81" tabindex="-1">まとめ</h2>
<p>メカニカルキーボードの音が気になる方はぜひ試してほしい。<br />
現場からは以上です。</p>
2021-10-09T00:00:00Z
/posts/2021-10-09-new-split-keyboard/
<p>分割キーボードが欲しかったので<a href="https://ymdkey.com/collections/split-75-60/products/ymdk-split-64-sp64-cnc-aluminum-case-plate-hot-socket-hot-swap-pcb-underglow-rgb-fully-programmable-diy-kit" target="_blank" rel="noopener noreferrer">YMDK Split 64</a>を買った。<br />
大満足な素晴らしいキーボードだった。</p>
<h2 id="%E8%B2%B7%E3%81%A3%E3%81%9F%E7%90%86%E7%94%B1" tabindex="-1">買った理由</h2>
<p>分割キーボードを買うのはこれが初めてではなく、一昨年に<a href="https://archisite.co.jp/products/mistel/md650l-barocco/" target="_blank" rel="noopener noreferrer">Mistel MD650L</a>を買って少しの間使っていた。<br />
しかしこれにはいくつか不満があり、すぐに使わなくなってしまった。</p>
<ul>
<li>キースイッチの打鍵感が好みじゃない</li>
<li>ロープロファイルのキースイッチなのでキーキャップの選択肢が少ない</li>
<li>バックライトがないのでテンションが上がらない</li>
</ul>
<p>これらの問題点を解決してくれる分割キーボードを探していたところ、2020年にこれの後継機である<a href="https://archisite.co.jp/products/mistel/barocco-md770/" target="_blank" rel="noopener noreferrer">MD 770</a>が発売された。<br />
Cherry MXキースイッチを採用してるし打鍵感も良さそうだし買いかなと思っていたが唯一不満だったのがファンクションキー列があることだった。<br />
ファンクションキー列があって困ることはないのだが、個人的にすこしもっさりして見えるため好みではない。<br />
できれば65%キーボードレイアウトで分割キーボードになっているものが欲しかった。</p>
<p>そんな理想のキーボードを探してたどり着いたのが<a href="https://ymdkey.com/collections/split-75-60/products/ymdk-split-64-sp64-cnc-aluminum-case-plate-hot-socket-hot-swap-pcb-underglow-rgb-fully-programmable-diy-kit" target="_blank" rel="noopener noreferrer">YMDK Split 64</a>だった。<br />
中国のサイトが販売しているのと、知名度が低いキーボードなので購入を躊躇していたが、思い切って購入してみた。<br />
キースイッチはGateronの黄軸、キーキャップは<a href="https://ymdkey.com/collections/dsa/products/ymdk-120-key-dye-sub-dsa-profile-pbt-keycap-for-mx-mechanical-keyboard-104-87-61-ymd96-kbd75-fc980m-vea-75-sp64-gk64-tada68" target="_blank" rel="noopener noreferrer">これ</a>にした。<br />
少し不安だったけど、大変素晴らしいキーボードが届いたので良かった。疑ってごめんなさい。</p>
<h2 id="ymdk-split-64%E3%81%AE%E8%89%AF%E3%81%84%E3%81%A8%E3%81%93%E3%82%8D" tabindex="-1">YMDK Split 64の良いところ</h2>
<ul>
<li>64キーという多すぎず少なすぎないレイアウト</li>
<li>Hot Swap PCBを採用しているのでキースイッチの交換が可能</li>
<li>頑丈なアルミボディ</li>
<li>カラフルに光るLEDでライバルに差をつけろ!</li>
</ul>
<p><img src="https://massdrop-s3.imgix.net/product-images/ymdk-splt-64-hot-swappable-mechanical-keyboard-kit/FP/zA3dSMHhQkunrSCvx8Mo_1500x1000_MD-91229_06.jpg?auto=format&fm=jpg&fit=max&w=1300&h=1068&dpr=1&q=80" alt="暗闇で光るキーボード" loading="lazy" /></p>
<h2 id="ymdk-split-64%E3%81%AE%E3%82%A4%E3%83%9E%E3%82%A4%E3%83%81%E3%81%AA%E3%81%A8%E3%81%93%E3%82%8D" tabindex="-1">YMDK Split 64のイマイチなところ</h2>
<ul>
<li>左右のキーボードの接続がUSB miniB
<ul>
<li>延長コードや換えのケーブルを探すのが困難</li>
</ul>
</li>
<li>左手親指の位置にFnキーがあり、左手でスペースキーが押しにくい</li>
<li>キーの配列のりRemapにBootMapperという怪しげなソフトウェアが必要</li>
</ul>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81" tabindex="-1">まとめ</h2>
<p>MD770からファンクションキー列を除いたやつがほしいと思ってる人はみんなこれ買ったら良いと思う。</p>
2021-10-10T00:00:00Z
/posts/2021-10-10/
<h3 id="10%E6%9C%884%E6%97%A5%EF%BC%88%E6%9C%88%EF%BC%89" tabindex="-1">10月4日(月)</h3>
<p>何もしないをした。<br />
ゲームをしてYouTubeを観て過ごした。</p>
<h3 id="10%E6%9C%885%E6%97%A5%EF%BC%88%E7%81%AB%EF%BC%89" tabindex="-1">10月5日(火)</h3>
<p>整体に行った。<br />
外は日差しが強く、本当に10月なのかと思うくらい暑かった。</p>
<p>せっかく外に出たので隣の隣駅まで散歩しに行った。</p>
<p><a href="https://ramendb.supleks.jp/s/90471.html" target="_blank" rel="noopener noreferrer">寿々㐂家</a>でラーメンを食べた。<br />
めちゃくちゃ美味しくてびっくりした。<br />
今まで食べた家系ラーメンで一番美味しかったかもしれない。<br />
有名な店なのでレビューを読んだりしていたけど、噂通りの美味しさだった。<br />
また行きたい。</p>
<p>カルディでチーズとホールトマト缶と生ベーコンとディ・チェコのパスタを買った。<br />
たまに行くと面白い調味料とかお酒とかがあって面白い。(あんまり買わないけど。)<br />
個人的にディ・チェコのパスタが一番好き。</p>
<p>ユニクロでスヌーピーのスウェットを3着買った。<br />
ユニクロは定期的にスヌーピーとコラボしてくれるのでありがたい。</p>
<p>arayaさん、uhyoさん、yoshikoさんと CSS Cascading Layer のドラフトの輪読会をやった。<br />
複数人でドラフトを読むといろいろ参考になる話が多くて理解が進むので良かった。</p>
<h3 id="10%E6%9C%886%E6%97%A5%EF%BC%88%E6%B0%B4%EF%BC%89" tabindex="-1">10月6日(水)</h3>
<p>心療内科に行った。<br />
簡単な質問に答えて同じ漢方を処方された。<br />
仕事と同じ時間に起きて仕事っぽいことを何かやってみて、何をすると心がつらいか教えて下さいと言われた。</p>
<p>知人と渋谷でランチをして表参道をブラブラした。<br />
知人もメンタルと体調を崩していて、2人で健康は大事だねという話をした。</p>
<p>南青山にある<a href="https://www.higashiya.com/shop/man/" target="_blank" rel="noopener noreferrer">HIGASHIYA man</a>という和菓子屋でくるみ餅とカステラを買って帰った。<br />
東京に住んでいたときはちょくちょく行っていたお気に入りのお店だ。<br />
以前は最中と最中アイスを売っていたので今回もそれを目当てに行ったのだが、最中は売っていなかった。残念。</p>
<p>夜は<a href="https://uit.connpass.com/event/226426/" target="_blank" rel="noopener noreferrer">UIT INSIDE ep.100</a>に出演して<a href="https://twitter.com/spring_raining" target="_blank" rel="noopener noreferrer">spring_rainingさん</a>、<a href="https://twitter.com/terkel" target="_blank" rel="noopener noreferrer">terkelさん</a>とCSSやフォントについて話した。<br />
面白い話ができたかどうかはわからないけど、久しぶりにterkelさんとお話できて楽しかった。</p>
<h3 id="10%E6%9C%887%E6%97%A5%EF%BC%88%E6%9C%A8%EF%BC%89" tabindex="-1">10月7日(木)</h3>
<p>何もしないをした。<br />
Udemyで買ったRustの動画を観たりゴロゴロしたりしていた。</p>
<h3 id="10%E6%9C%888%E6%97%A5%EF%BC%88%E9%87%91%EF%BC%89" tabindex="-1">10月8日(金)</h3>
<p><a href="https://ear-esthetique.co.jp/tokyo/" target="_blank" rel="noopener noreferrer">ボニータボニート東京</a>というイヤーエステに行った。<br />
自分の耳が掃除される様子を見るのは面白かった。</p>
<p>恵比寿の麺亭しま田でラーメンを食べ、たい焼きを買って帰った。</p>
<p>YMDKで買った分割キーボードが届いたので組み立てた。<br />
最高のキーボードだった。</p>
<h3 id="10%E6%9C%889%E6%97%A5%EF%BC%88%E5%9C%9F%EF%BC%89" tabindex="-1">10月9日(土)</h3>
<p>朝起きてミートソースを作ってミートソースとパンチェッタとモッツァレラチーズのパスタを作った。<br />
我ながら美味しかった。</p>
<p>お昼を食べたらすぐ昼寝をしてしまって、結局6時過ぎに起きた。</p>
<p>買い物に行きたかったが時間が時間だったので近所のカフェでコーヒーとモンブランをいただいた。<br />
美味しかった。</p>
<p>夜は金目鯛とカツオの刺し身、ナスと豚バラのみぞれ煮、スーパーで買ったきんぴらごぼうを食べた。<br />
みぞれ煮は大根を大量に消費できるので助かる。</p>
<h3 id="10%E6%9C%8810%E6%97%A5%EF%BC%88%E6%97%A5%EF%BC%89" tabindex="-1">10月10日(日)</h3>
<p>川崎に買い物しに行った。<br />
スウェットを2着買った。<br />
今年はスウェットをたくさん買う年みたいだ。<br />
ZARAでコートを買いたかったんだけど、まだあまり商品が冬っぽくなかったので買えなかった。</p>
<p>夜は串カツ田中に行った。<br />
数カ月ぶりに串カツと一緒に飲むハイボールはうまかった。<br />
チンチロハイボールを頼んだら2回連続ゾロ目になってしまい嬉しいような気まずいような感じになった。<br />
やはり外でお酒を飲むのはよいものだと思った。</p>
2021-12-01T00:00:00Z
/posts/2021-12-01-book-review-hutsuu/
<p>この記事は <a href="https://adventar.org/calendars/7125" target="_blank" rel="noopener noreferrer">takanorip Advent Calendar 2021</a> 1日目の記事です。</p>
<p>深澤直人さんの「ふつう」という本を読んだ。<br />
<a href="https://www.d-department.com/item/2018000100098.html" target="_blank" rel="noopener noreferrer">https://www.d-department.com/item/2018000100098.html</a><br />
2020年出版の比較的新しい本だ。<br />
D&DEPERTMENTがやっている「d design travel」と「d long life design」で連載されていたコラムを1冊にまとめたものらしい。</p>
<p>この本を買ったのは装丁に惹かれたからだ。<br />
表紙が淡いブルーの布で覆われていて、すこし懐かしいような新しいような雰囲気があった。<br />
彼のデザインはどれもシンプルで新しいけどどこか懐かしい感じがするものが多いと思うのだが、この本もそんな感じがした。</p>
<p>本の内容は彼の経験をもとに「ふつう」とは何なのか、「ふつうのデザイン」とは一体どういうものなのかについて様々な角度から書かれている。<br />
僕が特に印象に残っているのは「スーパーノーマル」という概念だ。<br />
「スーパーノーマル」について本書では「とても普通だけど良いもの」と説明されている。<br />
僕もアノニマスでスーパーノーマルなUIやプロダクトを作っていきたいなと強く思った。</p>
<p>深澤さんは実体のあるものを多くデザインされているからか、Webの世界に閉じがちな僕とは全く違う視点から物事を捉えていて、彼のエッセイはとても刺激になる。<br />
特にこの本はこれから何回も読み直したくなる、自分の考えを真ん中に戻してくれる、そんな本だと思った。</p>
2021-12-02T00:00:00Z
/posts/2021-12-02-book-review-nazehonn/
<p>この記事は <a href="https://adventar.org/calendars/7125" target="_blank" rel="noopener noreferrer">takanorip Advent Calendar 2021</a> 2日目の記事です。</p>
<p><a href="https://www.chikumashobo.co.jp/product/9784480251121/" target="_blank" rel="noopener noreferrer">「未来のきみを変える読書術 なぜ本を読むのか?」 苫野一徳</a></p>
<p>この本はTwitterで見かけて良さそうだったので買った。<br />
<a href="https://twitter.com/kasaharu/status/1456889629752258560" target="_blank" rel="noopener noreferrer">https://twitter.com/kasaharu/status/1456889629752258560</a><br />
高校生や大学生の若者が対象読者のようだったが読書論は個人的に好きな話なので読んでみたかった。</p>
<p>この本はけっこう小さくて薄くて文字も大きい典型的な若者向けの本という感じのデザインになっているが、構成もしっかりしていて内容はとても面白かった。<br />
社会人でも読書習慣のない人やどうやって本を読んだら良いかわからない人はこの本を読むと短い時間で多くの学びが得られるのではないだろうか。</p>
<p>本書では「クモの巣電流流し」すなわち「読書経験を通じて作られた知識のネットワークが新しいアイデアにつながる」という考えをベースに読書の効用と方法について書かれている。<br />
方法論だけでなく、知識を得ることがどう自分の役に立つか丁寧に示されているのが良いなと思った。(自分に子供がいたらこの本を読ませたいと思った。)</p>
<p>僕が特に良いなと思った節は「読書もまた一つの”経験”」と「市民としての読書」だ。</p>
<p>「読書もまた一つの”経験”」では、自分が直接経験できないことを読書という行為を通じて「経験」するのだということが書かれている。<br />
まさにそのとおりだと思う。本とは他人の経験を詰め込んだものであり、自分とは生きている時代、国、境遇、身体的特徴などが違う人の経験を追体験できる良さがある。<br />
また自分の経験を過度に一般化してしまう「一般化のワナ」について触れられているのも良かった。<br />
大人になる前に自分の経験だけが全てではないと自覚することは非常に重要だと思う。</p>
<p>「市民としての読書」では、社会の一員として教養を身に着け自分が所属している社会について考えることの重要性について述べられている。<br />
読書一般とはあまり関係ない話のように思えるが、とても大事な着眼点だと思う。<br />
自分が属する社会をより良く作っていくためには社会の仕組みについて知らなければならず、それを得るための読書が必要だ。</p>
<p>非常に満足度の高い本だったのでみなさんも読んでみてはいかがでしょうか。</p>
2021-12-03T00:00:00Z
/posts/2021-12-03-book-review-keikaku/
<p>この記事は <a href="https://adventar.org/calendars/7125" target="_blank" rel="noopener noreferrer">takanorip Advent Calendar 2021</a> 3日目の記事です。</p>
<p><a href="http://www.bnn.co.jp/books/9415/" target="_blank" rel="noopener noreferrer">「UX・情報設計から学ぶ計画づくりの道しるべ」 ピーター・モービル</a></p>
<p>この本は有隣堂 伊勢佐木町本店で見つけて面白そうだったので楽天ブックスで買った。楽天ブックス最高!<br />
原題の「Planning for Everything」のほうが邦題より数倍良いと思うのだが、なんで変えてしまったんだろう。<br />
この本の趣旨は「何事においてもプランニングが大事で、プランニングにはデザインが必要だ」というものだと僕は理解しているのだが、邦題だと「何事においてもプランニングが大事」というメッセージが伝わらない気がする。<br />
この題名を考えた人は本当に本の内容をちゃんと理解していたのか疑問だ。</p>
<p>この本は筆者が考えた「STAR FINDER」というプランニングの原則と実践手法を中心にプランニングスキルについて解説している。<br />
内容は良いのだが、非常に読みにくい。なぜなら本筋と関係あるようで関係ない筆者の家族とのやり取りやポエムがそこら中に散りばめられているからである。<br />
僕はこれのせいで読み切るのを諦めてしまった。本当にもったいない。<br />
この本をこれから読もうとしてる人がもしたら、この点に注意してほしい。ポエムが出てきたら最初から全て読み飛ばしたほうがいい。<br />
体験談が全く必要ないわけではないが、まずは結論を示してくれないと何が言いたい話なのか全くわからず読者に優しい構成になっていない。</p>
<p>まあこの本は「問題を正しく理解し大枠を定めてから具体的な選択肢を考え決断し実行し振り返りそれを計画に反映しそれを繰り返せ」という至極当たり前のことを言っているだけなので、その他のビジネス本や開発手法本などで書かれていることをプランニングという題材で書いているだけである。なので僕はこの本は長ったらしい家族談を我慢してまで読む価値のある本ではないかなと思った。</p>
2021-12-04T00:00:00Z
/posts/2021-12-04-book-review-seiton/
<p>この記事は <a href="https://adventar.org/calendars/7125" target="_blank" rel="noopener noreferrer">takanorip Advent Calendar 2021</a> 4日目の記事です。<br />
このアドベントカレンダーは僕が今年読んだ本を振り返っていこうという趣旨のやつです。(今まで説明するの忘れてた)</p>
<p><a href="https://www.kurashi-no-techo.co.jp/books/b_1147.html" target="_blank" rel="noopener noreferrer">「考えの整頓」 佐藤雅彦</a></p>
<p>この本もTwitterで見かけたので買った。僕が買う本の大半はTwitterで見かけたやつ。</p>
<p>僕は学者が書くエッセイが大好きだ。<a href="https://www.iwanami.co.jp/book/b249129.html" target="_blank" rel="noopener noreferrer">寺田寅彦随筆集</a>は大学生の時の愛読書であったし、外山滋比古先生の本も何度も読んでいるし、深澤直人さんのエッセイも好きだ。<br />
学者のエッセイの何が良いかというと、一つ一つのエピソードがよく分析されていて面白いという点がある。<br />
著者の日常生活で起こったことやその時の心情描写だけでなく、「なぜそのようなことが起きたか」「そこから導かれる普遍的な事柄はあるか」みたいな観点の分析があり読んでいて面白い。(そして学びもある)</p>
<p>この本もそういった類の本の1冊だ。佐藤雅彦さんという東京藝術大学教授が著者なのだが、家族との話や大学での話、日常風景を題材にした話などがあり飽きが来ない良い本だと思った。<br />
連載をまとめたものだからか、1話のボリュームもちょうどよくテンポ良く読めるので楽しかった。</p>
<p>特に印象に残った話は「見えない紐」だ。<br />
この話の主題は「作法」だ。<br />
コミュニケーションを円滑にするためのプロトコルであり普段我々にとって無意識な存在となっている「作法」を捉え直すことで新しい発見があるかもしれないという話を「文章を読むときの作法」を例にしている。<br />
芸大の先生っぽい着眼点だと思ったが、自分の仕事でもユーザーが無意識に行っている「作法」が大事になる場面も多いので、きっといろいろな仕事につながる考え方なのかなと思った。</p>
<p>僕も将来こんなエッセイの連載を持ってみたいものだと思った。</p>
2021-12-05T00:00:00Z
/posts/2021-12-05-book-review-biubou/
<p>この記事は <a href="https://adventar.org/calendars/7125" target="_blank" rel="noopener noreferrer">takanorip Advent Calendar 2021</a> 5日目の記事です。</p>
<p><a href="https://www.msz.co.jp/book/detail/07651/" target="_blank" rel="noopener noreferrer">「貧乏人の経済学 もういちど貧困問題を根っこから考える」 アビジット・V・バナジー&エステル・デュフロ</a></p>
<p>僕は貧困というものに興味があった。<br />
SDGsの1つ目の目標にも設定されている貧困問題がなぜ解決しないのか。<br />
発展した国とそうでない国の違いは何なのか。<br />
世の中の解説は「普通な人」の価値観や考え方で「貧乏な人」を論じているようで、どれも的を得ていないように感じていた。</p>
<p>この本では貧乏人を中心に据え、様々な調査や実際に貧困状態にある人へのインタビューを通じて貧乏人がなぜ貧乏なのかをかなり詳細に分析している。<br />
これは非常に面白かった。<br />
貧乏人はただ怠慢であったり無能なわけではなく、様々な環境や制度の要因があったり普通の人とは違う常識に従って生活していたりしていて、それらが結局貧困につながっているらしい。<br />
言われてみればその通りなのだが、深く考えず自分たちの常識にはめて考えてしまうとなかなか考えつかないことだなと思う。</p>
<p>この本は様々な側面から貧乏人を理解しようとしている点も良い。<br />
生活状況から仕事、教育、金融、政治とマクロな視点からミクロな視点まで様々な観点で貧乏人の置かれている状況を分析し、なぜ貧乏人が貧乏なのか、なぜ現状の解決策がうまくいっていないのか、など詳しく書かれていて、貧困問題の全体像を理解するのに非常に良い本だと思った。</p>
<p>貧困問題を解決したいならまず貧乏人のことを理解しろという本書の結論は、すべてのことに通ずる話だなと思ったし、大きな課題であればあるほど問題の渦中にいる人々のことを細かく深く理解することの重要性が増してくるのかもなと思う。</p>
2021-12-06T00:00:00Z
/posts/2021-12-06-book-review-yondenai/
<p>この記事は <a href="https://adventar.org/calendars/7125" target="_blank" rel="noopener noreferrer">takanorip Advent Calendar 2021</a> 6日目の記事です。</p>
<p><a href="https://www.chikumashobo.co.jp/product/9784480097576/" target="_blank" rel="noopener noreferrer">「読んでいない本について堂々と語る方法」 ピエール・バイヤール</a></p>
<p>タイトルはかなりふざけてるように思うが、中身は意外と真面目な読書論を扱う哲学書?であった。<br />
ハウツー本のようなタイトルだがハウツーみたいなことはほとんど書かれておらず、既存の読書に関する固定概念を細かく検証し反論するいかにもロックな本だった。<br />
読書論について書かれた本は数あれど、本を読んでいないことを前提に書かれた本はこの本くらいだろう。</p>
<p>この本は3部構成になっている。<br />
第一部では本を読んでいないとはどういうことかを整理し、第二部で誰の前でその本について語るのかについ論じ、最後は読んでいない本について語るときの心構えについて語っている。<br />
それぞれの章で述べられている著者の意見も面白いのだが、様々なところに散りばめられた有名な文学作品や著者の解説も非常に面白かった。<br />
僕は文学作品についてあまり詳しくないのだが、それでも楽しめる内容だった。</p>
2021-12-07T00:00:00Z
/posts/2021-12-07-uidesigner-hurikaeri/
<p>この記事は <a href="https://adventar.org/calendars/7125" target="_blank" rel="noopener noreferrer">takanorip Advent Calendar 2021</a> 7日目の記事です。</p>
<p>今回はUIデザイナーとして転職活動をしてみてどうだったかについて振り返ってみたい。</p>
<h2 id="%E6%B1%82%E4%BA%BA%E6%95%B0%E3%81%AF%E3%81%8B%E3%81%AA%E3%82%8A%E5%A4%9A%E3%81%84" tabindex="-1">求人数はかなり多い</h2>
<p>UIデザイナーの募集はかなりたくさん出ているなと思った。<br />
キャリアエージェントからの連絡もかなり来たし某TRUSTでもUIデザイナー方面で声をかけられることが多かった。<br />
どの会社も一人目もしくは二人目のUIデザイナーを探している場合が多く、組織化されている会社はかなり珍しいという印象だった。<br />
その規模のUIデザインを一人でやるのけっこう無理なのでは…?と思う募集もたまにあった。</p>
<h2 id="%E7%B5%A6%E6%96%99%E3%81%8C%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%82%88%E3%82%8A%E5%AE%89%E3%81%84" tabindex="-1">給料がエンジニアより安い</h2>
<p>ほとんどの求人でエンジニアよりUIデザイナーのほうが給料が低かった。<br />
会社によってはMAXの年収が数百万違うこともあった。<br />
一昔前ならデザイナーがいなくてもそれなりに売れるサービスを作れただろうが、今の時代UIデザイナーなしで競合に打ち勝つことは非常に難しいはずで、UIデザイナーがビジネスに及ぼす影響はエンジニアと同じかそれ以上のはずだ。<br />
それなのに給与がエンジニアより低いというのはどういう経営的判断があるのだろうかと思ってしまう。</p>
<h2 id="%E6%B1%82%E3%82%81%E3%82%89%E3%82%8C%E3%82%8B%E3%82%B9%E3%82%AD%E3%83%AB%E3%81%8C%E5%A4%9A%E3%81%84%EF%BC%88%E9%9B%91%E7%94%A8%E6%84%9F%E3%81%8C%E3%81%82%E3%82%8B%EF%BC%89" tabindex="-1">求められるスキルが多い(雑用感がある)</h2>
<p>UIデザイナーというタイトルで出ている求人でもグラフィックデザインのスキルを求めてくる会社が非常に多かった。<br />
もちろんゲームや学習系アプリなどグラフィカルな要素が多いサービスではグラフィックデザインのスキルも必要になってくるだろう。<br />
しかしSaaSのようなプロダクトのUIデザイナーでもグラフィックデザインの経験が必須項目にされている場合が多かった。<br />
マルチにいろいろできる人のほうが扱いやすいというのは理解できるが、まだまだUIデザインの専門性が認知されきっていないのだなと思った。</p>
<h2 id="ux%E3%81%AE%E7%9F%A5%E8%AD%98%E3%82%92%E6%B1%82%E3%82%81%E3%82%89%E3%82%8C%E3%81%8C%E3%81%A1" tabindex="-1">UXの知識を求められがち</h2>
<p>これは最近の流れなのかも知れないが、UXデザイン・UXリサーチの知識や経験を問われることも増えてきている気がする。<br />
求人票を見て、そんな人おらんだろとかもっと給料払えやと思ったことは1度や2度ではない。<br />
UXの知識を持っていることは重要だが、UXデザインというのはチームでやってくものであり新しく採用するデザイナーに全てを投げつけるのはいささか問題があるのではないかなと思った。</p>
<h2 id="%E6%9B%B8%E9%A1%9E%E9%81%B8%E8%80%83%E8%AC%8E%E3%81%99%E3%81%8E%E5%95%8F%E9%A1%8C" tabindex="-1">書類選考謎すぎ問題</h2>
<p>選考フローの一番最初でポートフォリオを提出するのだが、UIデザイナーの場合ポートフォリオに掲載する案件数がそこまで多くならないしテキスト情報が多くなるので「ポートフォリオとは?」みたいになる。<br />
書類で落とされてもなんで落とされたかイマイチわからない。難しい。<br />
そもそもUIデザイナーってサービスの立ち上げだけじゃなくて改善とかグロースとかにも注力している存在のはずなので、グラフィックデザイナーと同じ型のポートフォリオを提出させる意味がわからない。(エンジニアがよく書く職務経歴書のほうがいいんじゃないか)</p>
<h2 id="%E7%B5%90%E8%AB%96" tabindex="-1">結論</h2>
<p>僕はUIデザイナーとして転職するのを諦めました。</p>
<h2 id="%E3%81%93%E3%82%8C%E3%81%8B%E3%82%89ui%E3%83%87%E3%82%B6%E3%82%A4%E3%83%8A%E3%83%BC%E3%81%A8%E3%81%97%E3%81%A6%E8%BB%A2%E8%81%B7%E3%81%99%E3%82%8B%E4%BA%BA%E3%81%B8" tabindex="-1">これからUIデザイナーとして転職する人へ</h2>
<p>とりあえずグラフィックデザインはできたほうが重宝されるのでやっといたほうがいい(グラフィック出身の人が多いだろうけど)。<br />
あと開発に関する知識はまじでみんな持ってないので、ちょっと開発の知識あるとエンジニアとかPdMとかに喜ばれる。コスパが良いのでぜひ勉強してくれ。<br />
あとやはり給料はエンジニアほど上がらない。給料上げたいなら大きくて儲かっている会社に行くか、有名なデザインスタジオに行くか、実績作ってフリーランスになるしかない。</p>
2021-12-08T00:00:00Z
/posts/2021-12-08-space-and-i/
<p>この記事は <a href="https://adventar.org/calendars/7125" target="_blank" rel="noopener noreferrer">takanorip Advent Calendar 2021</a> 8日目の記事です。</p>
<p>今日2021年12月08日、ZOZO創業者の前澤友作氏が日本人の民間人として初めてISS(国際宇宙ステーション)に到着、乗船した。<br />
これは日本の宇宙開発の歴史に残る非常に意味のある出来事だ。宇宙旅行民主化への大きな一歩である。<br />
なぜなら宇宙飛行士でないただの金持ちのおじさんがロケットに乗りISSに滞在しているのですから。<br />
まあ我々一般人が宇宙旅行に行けるよういになるにはまだ相当時間かかるでしょうが…。<br />
(実は1990年にTBSアナウンサーの秋山豊寛が民間人として初めてロシアの宇宙ステーション「ミール」に滞在しているが、彼は出発前に旧ソ連から宇宙飛行士として承認を得ているし、旅行が目的ではなかったので純粋な民間人というわけではない。)</p>
<p>この日を記念して、僕と宇宙の関係について振り返っておきたい。</p>
<p>僕が宇宙に興味を持ったのがいつかは覚えていない。<br />
物心ついたときからガンダムやロボットが好きだったし飛行機やロケットみたいな空飛ぶ乗り物が大好きだったので、宇宙に興味を持つのは自然なことだったのかもしれない。<br />
僕は昔から好奇心の強い人間であったが、「宇宙」というものの「未知さ」に何か感じるものがあったのかもしれない。</p>
<p>僕が生まれた1990年代から2000年代初頭にかけて秋山豊寛さんや毛利衛さんが宇宙飛行士として活躍されていて、かなり頻繁にテレビで宇宙飛行士のことが報道されていた気がする。<br />
僕は特に毛利衛さんに憧れていた。<br />
宇宙という未知の空間に行き様々な任務を遂行し帰ってくる、まさに映画の中の話が現実になったように感じた。<br />
その頃から僕は宇宙飛行士になることが将来の夢になった。</p>
<p>しかし中学生になると僕の夢は打ち砕かれることになる。<br />
宇宙飛行士になるためには強靭な肉体が必要だと知ってしまったのである。<br />
当時の僕は虚弱体質でガリガリ、運動も苦手で体力もなかった。<br />
今思えば努力して筋肉つければいいじゃんと思うが、その当時は現実を突きつけられて非常につらかったのだ。</p>
<p>宇宙飛行士になる夢は諦めたが、何かしら宇宙に関連する仕事に就きたいという思いが消えたわけではなかった。<br />
そこで自分が宇宙に行けないなら、宇宙に行くロケットや人工衛星を開発する人になりたいと思った。<br />
自分が作ったロケットや人工衛星が宇宙に行って我々がまだ知らない宇宙の謎を解き明かしてくれる、そんな未来を想像していた。</p>
<p>そうして僕はなんとか航空宇宙工学を専攻できる大学に入学した。<br />
航空研究会というサークルにも入りラジコン飛行機を作ったりモデルロケットという小型のロケットを作ったりしていた。<br />
しかし僕はかなり成績が悪かった。<br />
勉強をサボっていたというのもあるが、大学の勉強についていけなくなっていた面もあったと思う。</p>
<p>それに加えて自分の想像とは違う大人の世界というものを知ってしまった。<br />
宇宙開発産業の産業規模が小さいことやロケットの研究をしている研究室の少なさ、ロケット開発者になるための道の険しさ。<br />
結局漠然とやりたいなと思っていたことのハードルが思っていた以上に高く、それを乗り越える覚悟がなかった。<br />
次第に僕はロケット開発者になることに興味がなくなり、卒業研究ではシステム工学の研究を選択し、挙げ句大学を中退してしまった。</p>
<p>そして僕は今ソフトウェアエンジニアやUIデザイナーとして仕事をしている。<br />
学生時代に描いていた将来像とは大きく違うけど、それなりに楽しく暮らしている。<br />
今でも宇宙は好きで宇宙関連のニュースは必ずチェックしているし、たまに日経サイエンスとかnewtonとか買って読んだりしている。<br />
大学の頃全然頭に入らなかった宇宙物理学の本も今なら楽しく読むことができる。</p>
<p>将来いつかどこかのタイミングで宇宙に関わる仕事がしたいなと思っている。<br />
日本でも宇宙産業のスタートアップが少しずつ増えているみたいだし、常に機会を伺っていきたい。</p>
<p>とりとめのない話になってしまったけど、僕の人生と宇宙の話でした。</p>
2021-12-10T00:00:00Z
/posts/2021-12-10-book-review-hitoriux/
<p>この記事は <a href="https://adventar.org/calendars/7125" target="_blank" rel="noopener noreferrer">takanorip Advent Calendar 2021</a> 10日目の記事です。</p>
<p><a href="https://www.maruzen-publishing.co.jp/item/?book_no=294914" target="_blank" rel="noopener noreferrer">「一人から始めるユーザーエクスペリエンス」 リア・バーレイ</a></p>
<p>僕はUIデザイナーだったのだが、UXデザインを考えなければならなくなったのでこの本を買ってみた。<br />
UXデザインの入門本はいくつかあるが、「一人から始める」というタイトルが自分にピッタリだと思ったので買ってみた。</p>
<p>この本は「マインドセット」と「実践」の2つのパートで構成されている。</p>
<p>第1部「マインドセット」では「UXとは何か」という定義に始まり、組織運営や自身のキャリアについての話(いわゆるソフトスキルというやつ)について書かれている。<br />
実際UXデザインをやってみて前提となるUXデザインをの定義やチームビルディングは本当に重要だけど難しいと感じた部分なので、この本に書いてあることがとても役立った。</p>
<p>第2部「実践」ではフェーズごとに様々なメソッドが紹介されていて、所要時間・使いどころ・進め方などが丁寧に書かれている。<br />
各章の最後に「一つだけ実践するとしたら」というコーナーががあり、何から手をつければよいか示されているのが良かった。</p>
<p>この本はソフトスキルとハードスキルの両面からUXについて考えていて、「一人で始める」というタイトルどおり一人で何をどうしらた良いのかわからない人にピッタリな本だと思った。<br />
特に前半の「マインドセット」パートはチーム全体で読書会をして共通認識として持っておいたほうが良さそうだと感じた。</p>
2021-12-13T00:00:00Z
/posts/2021-12-13-taisyoku/
<p>この記事は <a href="https://adventar.org/calendars/6616" target="_blank" rel="noopener noreferrer">目黒ワンニャンパーク Advent Calendar 2021</a> 13日目の記事です。</p>
<p>僕は一般的な社会人より転職回数が多いので、転職活動で必ず「今までの退職理由を聞かせてくれ」と言われます。<br />
しかしそろそろ1社目の頃の記憶とかがなくなりかけているので、目黒ワンニャンパークの皆様への自己紹介も兼ねてブログにしたためておくことにします。</p>
<h2 id="1%E7%A4%BE%E7%9B%AE" tabindex="-1">1社目</h2>
<p>1社目はシンプルに<strong>残業代が出なかったので退職しました。</strong></p>
<p>給料は月給20万円くらいでみなし残業代が45時間分くらい含まれていたんですが、何を勘違いしたか社長が「残業代は全て給料に含まれているので追加の残業代は払えない」みたいなことを言っていました。<br />
19時くらいに「明日朝10時公開で!」みたいな仕事が来て早朝5時くらいまで作業したり、個人の電話番号を社長が勝手にクライアントに教えて意味不明な鬼電がかかってきたり、人生で初めてポールダンスのショーに連れて行かれたり、クライアントの接待に同行したら社長とクライントの上司だけタクシーで帰ってクライアントの部下の人と二人代々木駅に取り残されたり、請求書をたくさんFAXしたり、とても素晴らしい職場でした。</p>
<h2 id="2%E7%A4%BE%E7%9B%AE" tabindex="-1">2社目</h2>
<p>2社目の退職理由は<strong>2つ</strong>あります。</p>
<p>1つ目は<strong>残業時間が長すぎたからです。</strong></p>
<p>僕が在籍していた時期はちょうど会社の拡大期で、人数のわりに大きな案件が増えていました。<br />
そのためみんなめちゃくちゃ残業してました。僕はほぼ毎日朝10時から終電まで働いていて休日出勤もけっこうありましたね。<br />
一番多くて120時間くらい残業してました。<br />
案件はどれも面白かったし一緒に働いていたエンジニアの人たちはとても優秀だったのでもう少し長く在籍していたかったんですが、残業時間が改善される見込みもなく、大学をうつ病で退学したこともあり心身が健康なうちに退職することを選択しました。</p>
<p>2つ目は<strong>受託制作の仕事に限界を感じたからです。</strong></p>
<p>受託制作の仕事では納期が最重要です。なのでエンジニアにはいかに早く80点くらいの実装ができるかという能力が求められます。<br />
また開発したウェブサイトはほとんどが使い捨てられ、継続的に改善されるものはごく少数です。納品したときに納得できていない点があっても、お客さんから依頼がない限り手を出すことができません。<br />
僕は自分が開発したウェブサイトに愛着を持つタイプの人間なので、それが非常に苦痛でした。自分にはこの業界は向いていないなと思いました。</p>
<h2 id="3%E7%A4%BE%E7%9B%AE" tabindex="-1">3社目</h2>
<p>3社目は<strong>新規事業が失敗してしまった&給料が安い&組織に対する不満が募ったことが原因で退職しました。</strong></p>
<p>僕は新規サービス立ち上げプロジェクトに参画していたのですが、このサービスが大失敗しました。僕が在籍していたときのアクティブユーザー数は0です。<br />
このサービスは自社のPR目的という側面もあり、当初から誰のためのサービスなのかぼんやりしていました。それが災いして誰にも刺さらないサービスになってしまったわけです。<br />
またこのプロジェクトの進行に関しても様々な問題があり、度々社員と社長が衝突していました。(プロジェクトの決定権を持っているのが社長だったため。)<br />
そしてサービスの失敗をきっかけにプロジェクトの開発メンバーの2/3が一気に退職することとなりました。</p>
<p>一応退職しない選択肢もありましたが、ただ生きているだけのサービスを一人で運用しなければならないことは明白で、あまり魅力的ではありませんでした。<br />
それよりも自分よりも優秀な人がたくさんいて自分自身が成長できる環境で働きたい気持ちが強かったと思います。</p>
<h2 id="4%E7%A4%BE%E7%9B%AE" tabindex="-1">4社目</h2>
<p>4社目は<strong>自分のコントロールできない部分の問題が大きくなりすぎたことが原因で退職しました。</strong></p>
<p>この会社はいろいろと組織・経営的な問題が積み重なった結果メンバーが大量に退職してしまい、意思決定するポジションに就いていた人たちも辞めてしまいました。<br />
その結果、プロジェクトメンバーの誰も何も決められない状態が発生し身動きが取れなくなってしまいました。<br />
何も決まらないので当然何も計画が立てられず、いつ何があるかわからない、自分で何も決められないモヤモヤした状況に耐えられなくなり退職しました。</p>
<p>何も身動きとれないことへの焦りもあったと思います。<br />
周囲の同年代の人たちが様々な挑戦をしていること目の当たりにして、自分も何か挑戦できる環境に身を置きたいなと思っていた部分もありました。<br />
たぶん僕が40歳前後とかだったら退職しなかった気がします。</p>
<h2 id="5%E7%A4%BE%E7%9B%AE" tabindex="-1">5社目</h2>
<p>5社目は<strong>適応障害になってしまったので退職しました。</strong></p>
<p>フルリモートになり、職種もUIデザイナーになり、シンガポール人と一緒に仕事をするようになり、英語を仕事で使うようになりと、環境の変化がいろいろありすぎて知らぬ間にとてもストレスを抱えてしまったようです。<br />
社長とデザイン周りの意思決定でうまくコミュニケーションできなかったことも大きかったかもしれません。<br />
幸い早めに病院にかかり休職することができたので、いまのところ順調に回復しています。<br />
もう少し長く在籍していたかったですが、適応障害は環境が大きな原因となって発症する精神疾患なので、小さいスタートアップに復帰するのは難しいだろうということで退職に至りました。</p>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81" tabindex="-1">まとめ</h2>
<p>この記事があまり更新されないようがんばります。</p>
<p>明日は<a href="https://twitter.com/crosssoniky28" target="_blank" rel="noopener noreferrer">JONさん</a>の記事です。</p>
2021-12-14T00:00:00Z
/posts/2021-12-14-best-magazine-2021/
<p>この記事は <a href="https://adventar.org/calendars/7125" target="_blank" rel="noopener noreferrer">takanorip Advent Calendar 2021</a> 14日目の記事です。</p>
<p>僕は雑誌が好きだ。<br />
ということで今日は僕が買った雑誌の中からBESTだと思ったやつをいくつか紹介するよ。</p>
<h2 id="wired-vol.42-new-commons-%E3%82%B3%E3%83%A2%E3%83%B3%E3%82%BA%E3%81%A8%E5%90%88%E6%84%8F%E5%BD%A2%E6%88%90%E3%81%AE%E6%9C%AA%E6%9D%A5" tabindex="-1">WIRED VOL.42 NEW COMMONS コモンズと合意形成の未来</h2>
<p><a href="https://wired.jp/magazine/vol_42/" target="_blank" rel="noopener noreferrer">https://wired.jp/magazine/vol_42/</a></p>
<p>編集長が変わってからあまり自分に刺さらなくなっていたWIREDだが、この号はとても良かった。<br />
この号ではコモンズ≒共有資産と合意形成についてデジタル、メタバース、政治、経済、など様々な分野の専門家たちの記事を書いている。<br />
同じテーマについて書いているんだけど何をコモンズとして捉えているかも違えば考えている課題や解決策も違っていて非常に面白かった。</p>
<h2 id="popeye-issue-890-enjoy-cooking-%E8%85%B9%E3%81%8C%E6%B8%9B%E3%81%A3%E3%81%9F%E3%82%89%E3%80%81%E6%96%99%E7%90%86%E3%82%92%E3%81%97%E3%82%88%E3%81%86%E3%80%82" tabindex="-1">POPEYE ISSUE 890 ENJOY COOKING 腹が減ったら、料理をしよう。</h2>
<p><a href="https://magazineworld.jp/popeye/popeye-890/" target="_blank" rel="noopener noreferrer">https://magazineworld.jp/popeye/popeye-890/</a></p>
<p>POPEYEは僕が大好きな雑誌でほぼ毎号買ってる。<br />
その中で今年一番良かったのはこれ。<br />
おしゃれなんだけど気取りすぎなくて普段あんまり作らないけど市販のものでできるレシピがたくさん載っていてよかった。<br />
よくあるレシピ本にはないPOPEYEらしい自由なレイアウトから「料理を楽しむぞ!」って感じがすごく伝わってきて、読んでいて楽しかった。</p>
<h2 id="axis-vol.213-40%E5%91%A8%E5%B9%B4%E8%A8%98%E5%BF%B5%E7%89%B9%E5%88%A5%E5%8F%B7" tabindex="-1">AXIS vol.213 40周年記念特別号</h2>
<p><a href="https://www.axismag.jp/posts/2021/08/396568.html" target="_blank" rel="noopener noreferrer">https://www.axismag.jp/posts/2021/08/396568.html</a></p>
<p>40年間の歴史と未来への考察が詰まった1冊だった。<br />
歴史を振り返ることで、いつの時代もデザイナーが社会をつくってきたんだなと改めて思った。<br />
永久保存版な1冊。</p>
<h2 id="%E3%82%A2%E3%82%A4%E3%83%87%E3%82%A2-no.396" tabindex="-1">アイデア No.396</h2>
<p><a href="https://www.seibundo-shinkosha.net/magazine/art/67954/" target="_blank" rel="noopener noreferrer">https://www.seibundo-shinkosha.net/magazine/art/67954/</a></p>
<p>アイデアの特集は毎回とても深く掘り下げされていて感服する。<br />
1冊3,000円するのも納得の情報密度だ。<br />
この号の特集は「色彩デザイン再考」というもので、色にまつわる人や企業へのインタビューや色彩理論の解説記事が掲載されている。<br />
一番面白かったのは7人のデザイナーへのインタビューと作品紹介で、グラフィックデザイナーの人たちがどういう感覚で「色」について考えているのかが垣間見えた気がした。<br />
やはりこういう雑誌を読むと劣等感を刺激されて良い。</p>
2021-12-15T00:00:00Z
/posts/2021-12-15-book-review-wizerd-bible/
<p>この記事は <a href="https://adventar.org/calendars/7125" target="_blank" rel="noopener noreferrer">takanorip Advent Calendar 2021</a> 15日目の記事です。</p>
<p><a href="https://peaks.cc/books/wizard_bible_security" target="_blank" rel="noopener noreferrer">「Wizard Bible事件から考えるサイバーセキュリティ」 齊藤貴義、IPUSIRON</a></p>
<p>この本は全日本人プログラマーが読むべき本だと思う。</p>
<p>不正指令電磁的記録に関する罪の乱用により過去にどんなことがあったのか、当事者はどんな思いだったのか、我々ができる対策はあるのか、といったことが非常に詳細に書かれている。<br />
私はこういった問題の当事者ではないが、読んでいて非常につらくなった。<br />
私達は過去の出来事から学び、同じようなことを繰り返さないために働きかけていくべきだ。<br />
私達ソフトウェアエンジニアは日本で生活している以上こういった危険に晒されていることを意識しなければならない。</p>
<p>この本の良いところは今後の展望をきちんと考察している点だと思う。<br />
著者自身の考えはもちろん、衆議院議員らの答弁や取り組みも紹介していて、この国でどういった事が起きているのかきちんと知ることができる。</p>
<p>またもし万が一逮捕された場合に何が起きるか、何ができるかが詳細に書かれているのも良かった。<br />
逮捕されスマートフォンなどを見れなくなってしまった場合に備えて、こういった本で事前に知識を得ておくのは大切なことだと思う。</p>
2021-12-17T00:00:00Z
/posts/2021-12-17-yugawara/
<p>この記事は <a href="https://adventar.org/calendars/7125" target="_blank" rel="noopener noreferrer">takanorip Advent Calendar 2021</a> 17日目の記事です。</p>
<p>2021年12月16〜17日に湯河原温泉に旅行に行ったので振り返る。</p>
<p>きっかけは特にないけど、コロナも一旦おさまっているし12月になり寒くなってきたので、また色々制限される前に温泉に行きたいなと思い温泉宿を探し始めた。僕は群馬の四万温泉が好きでコロナ禍になる前はよく泊まりに行っていた。今回も最初は四万温泉に行きたいと思っていたんだけど、横浜に引越してしまったため片道3〜4時間かかってしまうのがわかり断念した。片道4時間かかるなら最低でも2泊3日で行かないと慌ただしすぎるが今回は1泊2日で行きたかったので。</p>
<p>色々検討した結果、家から一番アクセスが良い湯河原温泉に行くことにした。湯河原温泉は神奈川県南部、静岡と神奈川の県境に位置する温泉街だ。僕はあまり来たことなかったが海と山が近く山間の温泉宿で新鮮なお魚が食べれるらしかった。東京・横浜からアクセスもよく人気の温泉街らしい。宿は<a href="https://shiori-yugawara.com/" target="_blank" rel="noopener noreferrer">旅館 栞</a>という旅館を予約した。値段がリーズナブルで料理も美味しそうだったのでここに決めた。</p>
<p><a href="https://shiori-yugawara.com/" target="_blank" rel="noopener noreferrer">https://shiori-yugawara.com/</a></p>
<p>1日目は気温もわりと高く気持ちの良い天気だった。13時くらいに湯河原駅に着いたので昼食しつつ湯河原の海側をふらふらした。湯河原といえば<a href="https://r.iidashouten.com/" target="_blank" rel="noopener noreferrer">飯田商店</a>なのだが、ちょうど休業日だったので飯田商店の一番弟子さんが開業した<a href="https://nikori.iidashouten.com/" target="_blank" rel="noopener noreferrer">しあわせ中華そば食堂 にこり</a>でラーメンを食べた。わんたんとチャーシューがうまかった。</p>
<p><img src="https://lh3.googleusercontent.com/r7V5FpudsD2sy5CUNPFaLCqyKpGg-13FRlHQBXYUyMKolfAUDHZzZGxvro5XPjk-erCtZhQ1w-c5meHTolPFZZG7Zb03VGYkxqkKEOO5zj4qEY88dZS8BaDnbeDEsPCRFlKufUAk6HVvwHq7QwQ2mLQU54xaIqk9sNc-p80GE_BA_S4UrWwwGMP4jOZR1-uW_593NiFEasmIgpGcOcOB_H8lP-r0zYM0lUS5CB3nPAAY0BehBMCtXKQ2AZBtxKyNn1movyB8NXJldUyD2WNWsS5nD6EiKBOcyWLvQG_edWz-T0dGVnYIUomiNlxy3s9E3eqAbZvsok3Z5TJzew8gJt-3GeAyXkp1d2eEJdJEQ3mfNlrPqhIquafXJRljj5KZF70f2payinT2vcGbJM4DBTJ9i1l-54xC_gJJhDmnM1cRAvY020dI-bXCNRErzzKS2RLUAlRpy6iGIFsvKPXURLJjBLEVGxEj9Zdj-Igu10ZeFDamQcFpnMcG0IcsD2jBuNHYD80mdEZcR_-mPuFNMpTdzRTsTnVZKXsWiukSuZo3v1bGcH_R-tEfBDkqDgKxdfzDD-m8XjnHdsz5KI2Wr9I98tz3TsoENnUErQttFCDMGmO1Xfe7gq68phF_mYaTNMDbs-nq6OeRlkJczbWvD9G54NyunMtX_i_i-LkeZRQf6CncJNPCL3R8CZfUJ0YsYNEXoD2L0G1RbNN-iIP0SIU=w2294-h1291-no?authuser=0" alt="わんたん中華そば" loading="lazy" /></p>
<p>一応飯田商店で記念撮影した。</p>
<p><img src="https://lh3.googleusercontent.com/zKXBq67pB2hPxPS5ih0jcS2r3CD1pBG6SQpA7grkK2BRqx9h5BddfjVkNp6LxjMn5_IUwStXd6J2ST-Nu7HJilEuljbm7qQJi5HVcUepSfIYs6nSELTiiievMyBkaA77dvBGkGI5-EMli8kUoVz1l4JJjyLpybharwM2wQWjm6AezH1nkbJFyCN_2dA9kuZIUS8VVfujip19MixkWR_-I6h38dzJ0UqNlaGAXuJ243LzmprGNd3X9n6HGDWHR7o7FfRP9vqo4CuYCodBNu-5KaDMPrXNlQrVgiEGnEHcBsQ0krosrBcG8LSfLzuPdW-ey3ttwBdqvsh0WxRtltkwm1YUaGFegkSiIwOi7Vj2EZkfV67tj6cv0U5lQ8kZi244N0QTUmVa9F256EF2wQvb_vzMK63nrwApr69l0Jm9QRE2AKbdSeWctp97AV_QOtWHUAJFw-vbbRT9yJlb7q3pjlER4zeDqO57BoCaW-AkOdLdFzUjspm-hRi09UqEfquDTAm1e-tvMmI8pfLmxTihXpzJs0HYVlRV0kw8yjS_Pn829N12NmCPwFNYJWNqzie4O5MVlch3Rl-V6yTc_Iyr_3Jh0ryOVEjOimBrpoYZijwppM9thmZqkC4E5AGO8SlgxwrgT7jFk0iQlF4e60ePJtWI2hVq3cDRjyxcurBoyGsJagagGgORInowQAv-nwcR8KpdngoD_s9f-W0F3WNkXCw=w2294-h1291-no?authuser=0" alt="シャッターの降りた飯田商店" loading="lazy" /></p>
<p>湯河原海浜公園まで散歩した。釣りしてるおじいちゃんがいっぱいいた。鳶と鳩とカラスもたくさんいて賑やかだった。</p>
<p><img src="https://lh3.googleusercontent.com/U2H_pUU4cibnzlpzMH2o2M6OSvJDtwmdDRzVYg5ouSi96qhQcdQOoh6DiOatZpXYAdeps1XNZwKyVwwFHXaqS620Pq8xscLKEUzRZ6fbf3SXMjK07Bj8k2qGg82rdfx0eVYzpNazySo9JaCk8KWVNOzfxG0-DjmApbs0qIrwRavbi6HAOvu5pu43k1Daavss4cuDlZwVCcmF9vrnOEbHl1_jnjpPOlgr_2yhBuJjQiLF513e6DKL6ycKeQvs5EBLRx_RdXLDVVfHTTJ6BOFvKzmhfuqg466xTJu2MhOV7mcRw3oLr47EWo0sR96tYgbwIVd0lRIWDnW0UvEeTN9RFjjigBXn8r9xDAJKsRvLxC_ZntuPN4-kokeKDM3MMHBVHCTnt9yz03JbU40tY0_L6xUhxBlXeXF7cG99h8udlAwjc5Mlwa0MCZkU3A0A4Z4Q9mkakOBWxDvvigd6eH_8PG5DrSzXizK-ja61pJ2SpUQ13RqzF9j66p8qHQ3WiJG0AC9ItoYpcPQPnTkg5WbHu8Rvs3rr7I0lmM2EK4pYJgzjyPKR13l5GPNYItS5W7s33EQmNpINkDyU-wJIStW0ZMzrnxpWQxJvpUvqUmPoHq27IxTQdM9B9H5CK_FydQk76H0psJhOt9c_IiU-p7oQX7g1xxf4MbTNjxd5Vg8tOvpHs7_KLNObOK9WcYOJlZKB8OJ826HA7xkBUAqActdAtjk=w2294-h1291-no?authuser=0" alt="湯河原海浜公園から見た景色" loading="lazy" /></p>
<p>その後湯河原駅まで戻り宿の送迎車に乗って宿に向かった。写真を取り忘れたが、行く途中で見た大銀杏がきれいだった。宿に向かう途中、コンビニにも寄ってくれてとても親切だった。</p>
<p>宿は湯河原の温泉街よりも高い位置にあって、部屋のバルコニーからの眺めがとても良かった。旅館にバルコニーがあるのは珍しい。四万温泉のように川のそばにある宿も良いが高台にある宿も良いなと思った。</p>
<p><img src="https://lh3.googleusercontent.com/DVDVamx4RPxcGGNsRK4CIfNwEIx7dvPzRgeKKJ_ZE4me04rrc_XpPYG3K3S346BYDOP0cpvcLChpVvZ2kFOgd5R6XK7MK-CL89Ljb3Fj16ezYJqO0KWxGqoSjkVLnJdAjLzZkl0c3FKVyzIa37CK8mnG5lZ389AwzyZ-krjo3R9eAR7NFvDFVNig4Uov2Ow4Wvc15iFIn338GM7WhAGTmzg-kVwuqwv32k6y2Jt7dx_utCgdYxFmsA3H__ION8nbw9y1ZgemGw2ceSc5_80-u2QhdGw-FE6uwrzLyY02DcTL4qNLjnYklSrPhvL7ogbIYq5Pcf9SW9uC8z8cnjolbLSdmTBady2dSv5MhmLJJhBsxKCT1Dz9YNpRrdJqaSVC34k9w75pRl03C6dtQiGvaz0Snzs1yp3tLT8ZHfNuJwFEMAAnhiuEvcVfwKN-2RX_QDENUuDs1Yd-UHWGlgu9DpQyakV5SF7QQN2x0YOGNU9wwaAIXb2JY4OIaRHKMFEPVVji73ef5RmiULcPNO39V4jVQNzYxAgD7gy3EiDNJaQQqLzyKopvWZ42Pk3fp0lWsKVfudEINgPhYVjupxxnPI0m_iYiNfICaXT-sBPjQNnQUtup0xjpG9I3yh2UndprIt8HEuQ_VsoX41UfRa2sc_IOjXP7qKmP7F5GtlLnpg5uqhmBX3c1rokSYMtHt0rHEBpxX-KW4isNi8N74wB28Sk=w2294-h1291-no?authuser=0" alt="部屋からの景色" loading="lazy" /></p>
<p>宿の設備は少し古かったが嫌な汚さなどはなく快適にすごせた。温泉も湯加減最高でとても良かった。牛乳の自販機がなかったのが残念。</p>
<p>夕食はめちゃくちゃ豪華で量が多かった。通常のコースではなく舟盛りがつくコースで予約していたんだが、舟盛りのボリュームに圧倒されてしまった。絶対2人前の量じゃない。どの料理も美味しかったが金目鯛の煮付が一番美味しかったな。(後から出てきたので写真取り忘れた。)</p>
<p><img src="https://lh3.googleusercontent.com/L0Qu5h0ZpYZN9SluTeEFg2he-EmqqQIfVsFumJxYIRa1hOk4DNYBddRTFdQBHbkTqwn8yAesSwLddJ_yeLZ1QhU-d5MQjR1GbC6zwz5n57Xzsqe_RLBsb95Ino6AU_r2pKG5zhuxRNW2bDa54o_yUwa253mwqGdOsIEp-tJliLpoz9NpF4BpBjkMADje8pW_8X4hqsEyvuVpszDGmiSfzuG7zuL3uxm_ALGWhnK5ll7U0QRe9IpFtAoTymJN-ahqyzbgsHDxWdtQeItfPddbU2CtPwVjBul3A4ac2rYDAppwnbmgpec_x9iMqgFtTnj1MqGTg_E-__T-zeBuCsZjZ3z2lTZE8Dc4UFlnT9Yv6yZanR3hCHJqv_15cUBDdOjUeQ5W6pfyFRjyijbaF7mEjQHqYnx5W1Pi3W3QvwldpYU80O5rdRaHcXzuTCFo9MwbiT8K7f_QXgk3QhFYeQSyC7ETWhAi3DVx_quBk4AaWly5heBSoZTvCLTNPR9kbjGt7wyefkrHT3kDZSr8erTLJeS3_sR6pA2kj7yjGkjxkKhE_o5geEEx6ND3mUN3K6OMdzSqcXtDm1Opx7rtUHbnF9Zqf1uLQzRsC6satQgKjxxW2ad_JpzgCyjN_-Fo_YymTBtQ-Gy3w4lkfAyyx-rXRpeTc4ekLNDFap1XNkIzXB8aAjtX6hwJIXWYPcSU7BY1jE9-ks3LBBEeKdtsYpzywNw=w2294-h1291-no?authuser=0" alt="夕食" loading="lazy" /></p>
<p><img src="https://lh3.googleusercontent.com/3sKeGGTn-idZwusSNhtLRTj18BNc6pKTj1Id0KC1fmJItqx4ax6uO_txy8S6eLcH_sDtFfhnSfUCAE1a4urWkdXXoGviEvUUal8Je9epUnJPntQkrfVFX2yTNYzyD1xsmtrP8Yx1sEN0n0aSvShduGk6fu85XPUmDil4_YMKITkOF5utMqQBEeVu4Ir7UszGC0bug_2yximNPkZFTcmiRnqruaL8UOM0ZUULBMFg47_5kzjlP_WNFCAqARUNb8vKNxYT3mEYCrpjUaS3aYFRBphSKEK0F71PnXR1aq84OAS2vVdg6utV1ypnr04MM-WDxBmmnrdTEB9uHaQOshNDt5lnk6fzF4NAutvlBcoSNp0nQ5VxksyB4VN15LvbbqL-8OR2_A_FbtOBbhmnwqza7DXO0hTMFo6ZzvVDJyZuTxK9KOrGTNZvMgJ7U5RPNbZ34LeQezty7OCJKQ_5zrYnhAXeDyPcIuTSo5ePrm4QkowQNLYy4hjOXBnQv_aFdCTjf276biTwtheoYBNN24fJtB_lCtWEyxUL5PhvXihp7wR_5P2o6t9FLp3UCh0cz9i6lTZkOxti8W4zSpVQonVsNLIYmUDiWBDBHum3qJIeNrfWpwGd9sNpArr40yn3Ud48bV1_8BxVoshA1LoMVi7WB-Vm9RObunFLC4JnUx6mRh90JoF72gg3OrwnPvW71afmyKm81rZIwYde2ZmdkAgAXps=w2294-h1291-no?authuser=0" alt="舟盛り" loading="lazy" /></p>
<p>この日は食べて温泉入って食べて温泉入って寝ることしかしない素晴らしい1日だった。これぞ温泉旅行。</p>
<p>翌朝の朝ごはんも素晴らしく美味しかった。中でも卵焼きはめちゃくちゃ美味しかった。無限に食べれそう。</p>
<p><img src="https://lh3.googleusercontent.com/7yrVgkUddDIc5MBzFs7pkpWYfCVU6Z_12wPAVnjiYAhhwdwhqoPtBcDhnOcvzRxXNFi1XjP1Bya3STyHe5amn53rvhI14eImaF6HQvyfwOND9A0fZcKZINyswcFsPWuJ78MMFxotiAkiuTQ13Nf7g7PQjfKIFnNBRwYDqrhpgAJxGSPL82xsdePs0KFpwTrOq_mhSqPv7ic3sKNWY7RhuCJTjJI7HFbygwAG6ZngLbRuUXcTvvv6U7s3NPE3vSgVs1hUT6rN1ZiUHXx92E3H8w5ELzdcSNRZxJpnB2kjlwtUKAV2Joih6sl8T1KX6lcSlcEBSRNlbMcTkb5PtMCMIqbS2s4_rSBxFNIcDKYgCdCSnqOL32yxOjPVjPQLqlSJ-J5SJ2KnlWpHhWibTeIrdL6OeNKTCo7HgKN3D9dtC5oYdd1FDRFWt5K9Wz9eTJeLYESk0Wqv6gRu9rv0VgyHy2DDANV9izO1q7qbt0SyPB6tLRKDpPiR-evSFKKdiyj1nzGk-XetjEvzTlsqqTlPJE4QVxEbxO3Jhhab571BJlUjBArvARqTHDZR0vgB5qUpNOKvONqjmWEG6QZOw-_4MHSxssyX4UJ72DZAGFwmRC-l-2p9JKj2_b5tZdJgWmPRG-8ipMTMIyR_V9sF-8hEidZx1YpsWGvcdgQvGWMXgzEEJgVvkiAGYTfDZ-TFwoV4gXEh3-yBSPNSbGNj3ISMZMQ=w2294-h1291-no?authuser=0" alt="朝ごはん" loading="lazy" /></p>
<p><img src="https://lh3.googleusercontent.com/5pTekgvU3eclJZTtn_1_ndh4EB85G08ItcfZvnwcZv0YdS5MtxTLWqJO7ux7NmW4phAAts2SBg8hwipwlI-so52jsgHm0BnzqPQ1-IntTXw060PSCWozVOp_xIzmiILRuTbQVqDSQtbwa0yY78h2rkzmtVqSLnR3Q3a6EIvVUmIhDygI4TarZVy5zSqZUZMufSUvjSpPykU46SrMm4_qM9vM_vIKApRDLTQvFcAhY63jT-XEFmHfkUsZ_AWJRSCaFwzP-rdor4CgzXx-fHEkQ7o4_ZaGqjjKqvZC4SLqR_5kKWQ62iCFoOW9n6AjpuzMDIOE78Ej3H64HTSCCfHns5Q-BqB8I6mvy-xHBCRI5t8ddRrLq1PMINvWcbPZgWUfBBahb5vUs8Vcy-3EEEwA-4VXixg5F4IYygtjMO3uK4tw1tX4RdEUnlBQV5yOGLaOSVW900DD_pAIfA1-995S6I3JCipxhV2POad2ThAv2fGj6WZC-oUjPDxsrLpgHwTi-8q-derXbnNsa9zablj4CgQeRZYJNVANm4x2I2LCtPTEHqTeSwEfotlRwWCPvricspKe6Wa6HxNh0rIVqrUNjn_qwzE3klNed0HCj41Zu2POd-HvCi6X4qv1RQHm8AFdZp977eq1kILATILCefsqea4csUlmCEsGZvoe8TgL74NdU_0PbvHMZKb3DM1ivMgkX1pjvbKXB9W-x5ciDrWxqZw=w2294-h1291-no?authuser=0" alt="朝の天気" loading="lazy" /></p>
<p>ということで大満足の湯河原温泉旅行だった。みなさんも湯河原温泉の旅館 栞に足を運んでみてはいかがだろうか。</p>
2021-12-18T00:00:00Z
/posts/2021-12-18-kaden/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%82%BF%E3%83%BC%EF%BC%9Axgimi-halo">プロジェクター:XGIMI Halo</a></li><li><a href="#%E3%82%B5%E3%82%A6%E3%83%B3%E3%83%89%E3%83%90%E3%83%BC%EF%BC%9Adenon-dht-s216k">サウンドバー:DENON DHT-S216K</a></li><li><a href="#%E3%83%91%E3%83%8D%E3%83%AB%E3%83%92%E3%83%BC%E3%82%BF%E3%83%BC%EF%BC%9A%E3%82%A2%E3%82%A4%E3%83%AA%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%A4%E3%83%9E-ph-tsa-h">パネルヒーター:アイリスオーヤマ PH-TSA-H</a></li><li><a href="#%E3%83%89%E3%83%A9%E3%83%A0%E5%BC%8F%E6%B4%97%E6%BF%AF%E4%B9%BE%E7%87%A5%E6%A9%9F%EF%BC%9A%E6%97%A5%E7%AB%8B-bd-sv110e">ドラム式洗濯乾燥機:日立 BD-SV110E</a></li></ul></details><p></p>
<p>この記事は <a href="https://adventar.org/calendars/7125" target="_blank" rel="noopener noreferrer">takanorip Advent Calendar 2021</a> 18日目の記事です。</p>
<p>今年買った家電製品で買ってよかったものを紹介するよ。</p>
<h2 id="%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%82%BF%E3%83%BC%EF%BC%9Axgimi-halo" tabindex="-1">プロジェクター:XGIMI Halo</h2>
<p><a href="https://jp.xgimi.com/pages/halo" target="_blank" rel="noopener noreferrer">https://jp.xgimi.com/pages/halo</a></p>
<p>今年一番良かった買い物は間違いなくこれ。今までいくつかプロジェクター買ったことあったけど、安物買いの銭失いをし続けてきたので今回はちゃんと良いやつを買った。コンパクトで持ち運びも楽にでき、明るさもあり他のプロジェクターよりも良いスピーカーがついていてAndroid TV内蔵。まさに間違いない製品だ。もしこれからプロジェクターを買おうと考えている人がいたら、このXGIMI Haloを買うことを強くおすすめする。</p>
<p>Android TV内蔵なのも便利だが、一番良いポイントは明るさだ。昼間でも電気を消してカーテンを閉めれば全然問題なく投影できる。最高。このプロジェクターを買ったから週末家で映画を観ながらビール飲んだりしてる。最高。</p>
<h2 id="%E3%82%B5%E3%82%A6%E3%83%B3%E3%83%89%E3%83%90%E3%83%BC%EF%BC%9Adenon-dht-s216k" tabindex="-1">サウンドバー:DENON DHT-S216K</h2>
<p><a href="https://www.amazon.co.jp/dp/B07ZYXKXJW/" target="_blank" rel="noopener noreferrer">https://www.amazon.co.jp/dp/B07ZYXKXJW/</a></p>
<p>プロジェクターを接続するために買った。BOSE、SONY、YAMAHAなどのサウンドバーも候補に入っていだが見た目の好みと価格と「DTS Virtual:X」対応というのが決め手になってこれを買った。プロジェクターだと「DTS Virtual:X」を使う機会はないが、いつかテレビを買ったら使いたいなと思っている。</p>
<p>YouTubeや映画を観るときにセリフが少し聞き取りにくい感じがするのが不満点かな。それ以外は最高。</p>
<h2 id="%E3%83%91%E3%83%8D%E3%83%AB%E3%83%92%E3%83%BC%E3%82%BF%E3%83%BC%EF%BC%9A%E3%82%A2%E3%82%A4%E3%83%AA%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%A4%E3%83%9E-ph-tsa-h" tabindex="-1">パネルヒーター:アイリスオーヤマ PH-TSA-H</h2>
<p><a href="https://www.irisplaza.co.jp/index.php?KB=SHOSAI&SID=H514090F" target="_blank" rel="noopener noreferrer">https://www.irisplaza.co.jp/index.php?KB=SHOSAI&SID=H514090F</a></p>
<p>デスク下が冷えるので買った。最高。アイリスオーヤマしか勝たん。</p>
<h2 id="%E3%83%89%E3%83%A9%E3%83%A0%E5%BC%8F%E6%B4%97%E6%BF%AF%E4%B9%BE%E7%87%A5%E6%A9%9F%EF%BC%9A%E6%97%A5%E7%AB%8B-bd-sv110e" tabindex="-1">ドラム式洗濯乾燥機:日立 BD-SV110E</h2>
<p><a href="https://kadenfan.hitachi.co.jp/wash/lineup/bd-sv110g/" target="_blank" rel="noopener noreferrer">https://kadenfan.hitachi.co.jp/wash/lineup/bd-sv110g/</a></p>
<p>ドラム式洗濯乾燥機がない生活はもう考えられない。ドラム式洗濯乾燥機はパナソニックか日立かって感じになってきているが日立のほうがコスパ良いきがしたのでこれを買った。</p>
<p>今のところ不満は何もない。最高。ありがとう。</p>
2021-12-19T00:00:00Z
/posts/2021-12-19-zakka/
<p>この記事は <a href="https://adventar.org/calendars/7125" target="_blank" rel="noopener noreferrer">takanorip Advent Calendar 2021</a> 19日目の記事です。</p>
<p>今年買ったデスク周り雑貨で買ってよかったものを紹介するよ。</p>
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#%E6%87%B8%E5%9E%82%E3%83%9E%E3%82%B7%E3%83%B3">懸垂マシン</a></li><li><a href="#anker-magnetic-cable-holder">Anker Magnetic Cable Holder</a></li><li><a href="#%E3%82%B9%E3%83%9E%E3%83%9B%E3%82%B9%E3%82%BF%E3%83%B3%E3%83%89%EF%BC%9Acheero-clip-plus">スマホスタンド:cheero CLIP Plus</a></li><li><a href="#%E3%82%B5%E3%83%B3%E3%83%AF%E3%82%B5%E3%83%97%E3%83%A9%E3%82%A4-%E5%9B%9E%E8%BB%A2%E5%BC%8F%E3%83%98%E3%83%83%E3%83%89%E3%83%9B%E3%83%B3%E3%83%95%E3%83%83%E3%82%AF">サンワサプライ 回転式ヘッドホンフック</a></li><li><a href="#%E3%83%98%E3%83%83%E3%83%89%E3%83%9B%E3%83%B3%EF%BC%9Aath-ad500x">ヘッドホン:ATH-AD500X</a></li><li><a href="#meka-mat">MEKA MAT</a></li><li><a href="#%E5%B1%B1%E5%B4%8E%E5%AE%9F%E6%A5%AD-%E3%83%9E%E3%82%B0%E3%83%8D%E3%83%83%E3%83%88%E3%82%B3%E3%83%B3%E3%83%91%E3%82%AF%E3%83%88%E3%83%86%E3%82%A3%E3%83%83%E3%82%B7%E3%83%A5%E3%82%B1%E3%83%BC%E3%82%B9">山崎実業 マグネットコンパクトティッシュケース</a></li><li><a href="#clock%EF%BC%9Abc03">Clock:BC03</a></li></ul></details><p></p>
<h2 id="%E6%87%B8%E5%9E%82%E3%83%9E%E3%82%B7%E3%83%B3" tabindex="-1">懸垂マシン</h2>
<p>懸垂マシンを買った。どこのメーカーのやつを買ったかは忘れた。</p>
<p>懸垂マシンは最高。懸垂すると肩こりと背中の痛みがなくなる。筋肉は全てを解決する。</p>
<p>みんなも懸垂マシンを買おう。</p>
<p><img src="https://lh3.googleusercontent.com/zrm40Lv3NWnbk9wWz5sm-0ntBqLvjNGj9xvYH-MIBnBXscfpW2-ZLHEKAA2CibkaVSLry5s85N0RGT-klZNB25ZWBIILV5UHOoyh_ZLiANkkKNiWl3hlW2XTymp64EtwXCiDnpJhIhsUw-DMYRhQ-yrSCPAV5W7f5YpELV10PlYEETcrKhBoTSHbHXbiZ7JLxjmHULu2uKrqgDlV6bWoYft8j_k4-nmNYyPLVm0oFLBxeqIk-R6XmIW-LbMChGr57wOxkyv_rceNTu4uz7jyhrcdfgzAkkH5DFeikWdQx0oRnKzjeQVZhI1omyf4tYVFCM76VogQzBfA6Ao2BK5oDRzVKq53dDFD5H2u_UF37YV-TMAhhmIvaoqMxsBmWPA6g9hWGAnt49Q0pygRSRj8brHkSHdCH2dqp_RYAzyY5CNUVMBdTXdDrUabpY_H36YUVVNbKhgOoef4BYAyC1AO3B246_S54iqo2mxje1-TKjrjot3YYDrarRdCRRJOG9_0otayp0QSavwFzN0YTvWg9DtejU4EiZWCxtrBsnlZTFilfY9lj0LHDQTH6KgUwDugwA2h7yc3qHvA4fNNHOUmAeI2Y3vGUpYnbCCgEoPJMTrH4tEupf18izzdt_-yNal4BMXHHzhVepLfEqA_pkPupuSCjnEf8lH4R8ZVFrRt81IS-3fmJSKcrPmfqD0g23zWGRZlHsgDsrcdv3NfPPxJkPo=w752-h1336-no?authuser=0" alt="懸垂マシン" loading="lazy" /></p>
<h2 id="anker-magnetic-cable-holder" tabindex="-1">Anker Magnetic Cable Holder</h2>
<p><a href="https://www.ankerjapan.com/products/a8891" target="_blank" rel="noopener noreferrer">https://www.ankerjapan.com/products/a8891</a></p>
<p><img src="https://cdn.shopify.com/s/files/1/0508/4381/2001/products/A8891001_da586cbc-1229-4849-8d79-e4c39ae7739a_500x.jpg?v=1607664525" alt="Anker Magnetic Cable Holder" loading="lazy" /></p>
<p>デスク周りをスッキリさせたかったのでAnkerのマグネットタイプのケーブルホルダーを買った。</p>
<p>取り外しできるのめちゃ便利。見た目もかっこいい。他のメーカーのやつよりこれ買ったほうがいい。</p>
<h2 id="%E3%82%B9%E3%83%9E%E3%83%9B%E3%82%B9%E3%82%BF%E3%83%B3%E3%83%89%EF%BC%9Acheero-clip-plus" tabindex="-1">スマホスタンド:cheero CLIP Plus</h2>
<p><a href="https://cheero.net/cheeroclipplus/" target="_blank" rel="noopener noreferrer">https://cheero.net/cheeroclipplus/</a></p>
<p><img src="https://cheero.net/c/wp-content/themes/godios/images/products/330_CLIP_Plus_black_amazon01.jpg" alt="cheero CLIP Plus" loading="lazy" /></p>
<p>デスクにスマホスタンドほしいなと思って買った。見た目も良いし自分の好きなかたちに曲げて使えるのが良い。</p>
<h2 id="%E3%82%B5%E3%83%B3%E3%83%AF%E3%82%B5%E3%83%97%E3%83%A9%E3%82%A4-%E5%9B%9E%E8%BB%A2%E5%BC%8F%E3%83%98%E3%83%83%E3%83%89%E3%83%9B%E3%83%B3%E3%83%95%E3%83%83%E3%82%AF" tabindex="-1">サンワサプライ 回転式ヘッドホンフック</h2>
<p><a href="https://www.amazon.co.jp/dp/B071DTGN71/" target="_blank" rel="noopener noreferrer">https://www.amazon.co.jp/dp/B071DTGN71/</a></p>
<p><img src="https://m.media-amazon.com/images/I/612Yh8fwGTL._AC_SL1280_.jpg" alt="サンワサプライ 回転式ヘッドホンフック" loading="lazy" /></p>
<p>デスク上をスッキリさせたかったので買った。便利。</p>
<h2 id="%E3%83%98%E3%83%83%E3%83%89%E3%83%9B%E3%83%B3%EF%BC%9Aath-ad500x" tabindex="-1">ヘッドホン:ATH-AD500X</h2>
<p><a href="https://www.audio-technica.co.jp/product/ATH-AD500X" target="_blank" rel="noopener noreferrer">https://www.audio-technica.co.jp/product/ATH-AD500X</a></p>
<p><img src="https://www.audio-technica.co.jp/upload/contents/product/ATH-AD500X/product_image_0.jpg?1579484983" alt="ATH-AD500X" loading="lazy" /></p>
<p>在宅勤務で長時間ヘッドホンをすることが増えたので軽くて蒸れにくいヘッドホンが欲しくなって買った。</p>
<p>装着感は軽く音も良く長時間音楽聴いても全然疲れない。音が悪いってレビューが合ったけど正直全然わからない。おすすめです。</p>
<h2 id="meka-mat" tabindex="-1">MEKA MAT</h2>
<p><a href="https://omnitype.com/products/meka-mat" target="_blank" rel="noopener noreferrer">https://omnitype.com/products/meka-mat</a></p>
<p><img src="https://cdn.shopify.com/s/files/1/0054/0878/4458/products/83309ED7-A52F-4ECA-8F6D-AB6081455177_800x.png?v=1615133933" alt="" loading="lazy" /></p>
<p>大きめのデスクマットが欲しかったのと、この見た目に惹かれて買ってしまった。</p>
<p>個人的には大満足だが、デスクマットとしては普通なので無理して買う必要はない。</p>
<h2 id="%E5%B1%B1%E5%B4%8E%E5%AE%9F%E6%A5%AD-%E3%83%9E%E3%82%B0%E3%83%8D%E3%83%83%E3%83%88%E3%82%B3%E3%83%B3%E3%83%91%E3%82%AF%E3%83%88%E3%83%86%E3%82%A3%E3%83%83%E3%82%B7%E3%83%A5%E3%82%B1%E3%83%BC%E3%82%B9" tabindex="-1">山崎実業 マグネットコンパクトティッシュケース</h2>
<p><a href="https://www.amazon.co.jp/dp/B08491RBJX/" target="_blank" rel="noopener noreferrer">https://www.amazon.co.jp/dp/B08491RBJX/</a></p>
<p><img src="https://m.media-amazon.com/images/I/71sD3nfrmjL._AC_SL1500_.jpg" alt="山崎実業 マグネットコンパクトティッシュケース" loading="lazy" /></p>
<p>FlexiSpotの脚にくっつけて使ってる。コンパクトなので邪魔にならなくて良い。</p>
<h2 id="clock%EF%BC%9Abc03" tabindex="-1">Clock:BC03</h2>
<p><a href="https://br-time.jp/clock/bc03-2/" target="_blank" rel="noopener noreferrer">https://br-time.jp/clock/bc03-2/</a></p>
<p><img src="https://br-time.jp/wp-content/uploads/2019/10/BC03W.jpg" alt="BC03" loading="lazy" /></p>
<p>デスクに時計がなかったので買った。コンパクト&シンプルで好き。BRAUNの時計はどれもシンプルで見やすいので好き。</p>
2021-12-22T00:00:00Z
/posts/2021-12-22-cooking/
<p>この記事は <a href="https://adventar.org/calendars/7125" target="_blank" rel="noopener noreferrer">takanorip Advent Calendar 2021</a> 22日目の記事です。</p>
<p>今年買ったキッチン用品で買ってよかったものを紹介するよ。</p>
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#%E3%83%95%E3%83%A9%E3%82%A4%E3%83%91%E3%83%B3%EF%BC%9A%E3%83%90%E3%83%83%E3%83%A9%E3%83%AA%E3%83%BC%E3%83%8B-%E3%83%95%E3%82%A7%E3%83%A9%E3%83%BC%E3%83%A9">フライパン:バッラリーニ フェラーラ</a></li><li><a href="#%E3%83%AA%E3%83%B3%E3%83%8A%E3%82%A4-%E3%82%AC%E3%82%B9%E3%82%B3%E3%83%B3%E3%83%AD%E7%94%A8%E7%82%8A%E9%A3%AF%E9%8D%8B-rtr-300d1">リンナイ ガスコンロ用炊飯鍋 RTR-300D1</a></li><li><a href="#%E7%BE%A9%E6%98%A5%E5%88%83%E7%89%A9-%E3%83%9F%E3%83%BC%E3%83%88%E3%82%BD%E3%83%95%E3%82%BF%E3%83%BC">義春刃物 ミートソフター</a></li><li><a href="#%E5%B1%B1%E5%B4%8E%E5%AE%9F%E6%A5%AD-%E3%82%B9%E3%83%91%E3%82%A4%E3%82%B9%E3%83%9C%E3%83%88%E3%83%AB-%E3%82%BF%E3%83%AF%E3%83%BC">山崎実業 スパイスボトル タワー</a></li><li><a href="#%E3%82%B7%E3%83%A3%E3%83%97%E3%83%88%E3%83%B3-%E5%88%83%E3%81%AE%E9%BB%92%E5%B9%95-%E3%82%AA%E3%83%AC%E3%83%B3%E3%82%B8-%E4%B8%AD%E7%A0%A5-%231000">シャプトン 刃の黒幕 オレンジ 中砥 #1000</a></li></ul></details><p></p>
<h2 id="%E3%83%95%E3%83%A9%E3%82%A4%E3%83%91%E3%83%B3%EF%BC%9A%E3%83%90%E3%83%83%E3%83%A9%E3%83%AA%E3%83%BC%E3%83%8B-%E3%83%95%E3%82%A7%E3%83%A9%E3%83%BC%E3%83%A9" tabindex="-1">フライパン:バッラリーニ フェラーラ</h2>
<p><a href="https://jp.zwilling-shop.com/jp/Kitchen-World/Cookware/Pans/Frying-pan-Ferrara-Granitium-75001-781-0.html" target="_blank" rel="noopener noreferrer">https://jp.zwilling-shop.com/jp/Kitchen-World/Cookware/Pans/Frying-pan-Ferrara-Granitium-75001-781-0.html</a></p>
<p>これの26cmと20cmのタイプを買った。見た目も可愛くて値段もそこそこで長持ちしそうなので気に入っている。<br />
また全体的に厚みがあるので保温性が高く、中火くらいでも問題なく調理できるのも良い。</p>
<p>最近は1000円ちょっとでコーティング系フライパン買えるけど、安物はすぐにだめになるし熱ムラがあって使いにくいし見た目がダサくてテンション上がらないので総合的なコスパはこっちのほうが良いと思う。</p>
<h2 id="%E3%83%AA%E3%83%B3%E3%83%8A%E3%82%A4-%E3%82%AC%E3%82%B9%E3%82%B3%E3%83%B3%E3%83%AD%E7%94%A8%E7%82%8A%E9%A3%AF%E9%8D%8B-rtr-300d1" tabindex="-1">リンナイ ガスコンロ用炊飯鍋 RTR-300D1</h2>
<p><a href="https://www.amazon.co.jp/dp/B0011NJV32/" target="_blank" rel="noopener noreferrer">https://www.amazon.co.jp/dp/B0011NJV32/</a></p>
<p>以前は炊飯器で米を炊いていたが、手入れ面倒だし買い換えるにしても意外と高いし炊飯器で料理作ったりしないので、炊飯専用鍋を買ってみた。</p>
<p>この鍋は3000円くらいだし使いにくかったら炊飯器買おうかなと思っていたけど、結果めちゃくちゃ良かった。炊飯器で炊いたご飯よりも美味しい。</p>
<p>鍋で炊飯するの全然難しくないし、手入れも簡単だし、炊飯器で炊くより短い時間で炊飯できるのでめちゃくちゃ良い。米の炊飯具合を見ながら料理できるのも良い。</p>
<p>料理好きな人には鍋で米を炊くことをおすすめしたい。</p>
<h2 id="%E7%BE%A9%E6%98%A5%E5%88%83%E7%89%A9-%E3%83%9F%E3%83%BC%E3%83%88%E3%82%BD%E3%83%95%E3%82%BF%E3%83%BC" tabindex="-1">義春刃物 ミートソフター</h2>
<p><a href="https://www.amazon.co.jp/dp/B000FOPVRS/" target="_blank" rel="noopener noreferrer">https://www.amazon.co.jp/dp/B000FOPVRS/</a></p>
<p>肉の筋を切って柔らかくするやつです。スーパーの安い豚肉とか牛肉のステーキとかをこれでブスブスするとまじで柔らかくなる。とんかつとかステーキとかチャーシューとか作るときにおすすめ。洗うの少しめんどくさいが買って損はない。</p>
<h2 id="%E5%B1%B1%E5%B4%8E%E5%AE%9F%E6%A5%AD-%E3%82%B9%E3%83%91%E3%82%A4%E3%82%B9%E3%83%9C%E3%83%88%E3%83%AB-%E3%82%BF%E3%83%AF%E3%83%BC" tabindex="-1">山崎実業 スパイスボトル タワー</h2>
<p><a href="https://www.yamajitsu.co.jp/lab/item/%e3%82%b9%e3%83%91%e3%82%a4%e3%82%b9%e3%83%9c%e3%83%88%e3%83%ab-%e3%82%bf%e3%83%af%e3%83%bc.html" target="_blank" rel="noopener noreferrer">https://www.yamajitsu.co.jp/lab/item/スパイスボトル-タワー.html</a></p>
<p>スパイスボトルをこれに統一した。見た目かわいいし大きい口と小さい口があって使いやすい。</p>
<h2 id="%E3%82%B7%E3%83%A3%E3%83%97%E3%83%88%E3%83%B3-%E5%88%83%E3%81%AE%E9%BB%92%E5%B9%95-%E3%82%AA%E3%83%AC%E3%83%B3%E3%82%B8-%E4%B8%AD%E7%A0%A5-%231000" tabindex="-1">シャプトン 刃の黒幕 オレンジ 中砥 #1000</h2>
<p><a href="https://www.amazon.co.jp/dp/B001TPFT0G/" target="_blank" rel="noopener noreferrer">https://www.amazon.co.jp/dp/B001TPFT0G/</a></p>
<p>今使ってる砥石がだいぶ使いにくくなってきたので、巷で有名なこれを買ってみた。まだ1回しか使ってないけど、今まで使ってた番手の高い砥石より全然切れ味良くなった気がする。普段遣いの包丁ならこれで十分切れるようになると思う。</p>
<p>次はこれの5000番がほしいな。</p>
2021-12-23T00:00:00Z
/posts/2021-12-23-tenshoku/
<p>この記事は <a href="https://adventar.org/calendars/7125" target="_blank" rel="noopener noreferrer">takanorip Advent Calendar 2021</a> 23日目の記事です。</p>
<p>いろいろあって今年も転職活動したので振り返るよ。こいつなんで毎年転職活動してんねんって人は<a href="https://blog.takanorip.com/posts/2021-12-13-taisyoku/" target="_blank" rel="noopener noreferrer">「俺の退職理由」</a>を読んでね。</p>
<h2 id="%E3%83%97%E3%83%AD%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB" tabindex="-1">プロフィール</h2>
<p>Twitterを見てね。<br />
<a href="https://twitter.com/takanoripe" target="_blank" rel="noopener noreferrer">https://twitter.com/takanoripe</a></p>
<h2 id="%E9%81%B8%E8%80%83%E7%B5%90%E6%9E%9C" tabindex="-1">選考結果</h2>
<p>Webフロントエンドエンジニアとして転職活動しました。選考を受けた結果は次のようになりました。</p>
<p>カジュアル面談:16社<br />
選考進んだ:9社<br />
内定もらった:7社<br />
お祈りされた:2社</p>
<p>どこの会社に行くかは来年ブログ書きます。</p>
<p>今回は休職中・無職の期間に転職活動をしたのでわりとたくさん面接受けました。今回は慎重に会社を選ぼうと思っていたので、気になっていた会社の選考は積極的に受けました。面接受けて自分のやりたいことが明確になったのと自分のスキルセットやマインドにどの程度需要があるのか知れたのが良かったです。</p>
<p>待遇に関してはどこも同じくらいでした。出社に関する考え方は各社かなり違っていて、週1〜2日出社の会社が多くフルリモートの会社は意外と少なかったです。社員の多い企業はフルリモート、スタートアップは週1〜2日出社のところが多かったです。自分は今横浜に住んでいてフルリモートか週1出社くらいが良いなと思って探していたので特に出社条件が問題になることはなかったですが、オフィスの立地が悪い会社だと週1だとしても大変だな…と思いました。オフィスの交通の便が悪いことがコロナ禍以前よりも採用に与える影響大きくなってそうな気がしました。</p>
<h2 id="%E4%BC%9A%E7%A4%BE%E6%8E%A2%E3%81%97" tabindex="-1">会社探し</h2>
<p>FindyとYOUTRUSTを主に利用しました。TwitterのDMでカジュアル面談に誘ってもらうことも数件ありました。基本的にスカウトをもらってカジュアル面談からの選考という流れで自分から応募した企業は2社だけでした。もう少し自分から連絡してみても良かったかなと思うところもありますが、以前から気になっていた会社の方からけっこう連絡もらえていたので特に心残りはないです。</p>
<p>Findyはスタートアップからメガベンチャーや大企業まで様々な企業の求人があって、かなり幅広く使われているんだなという印象でした。自分が知らなかった会社を知ることができて良かったです。YOUTRUSTの転職意欲の変更を見て連絡をもらったことが何件かあり、みんな意外とYOUTRUST見てるんだなあという感じでした。</p>
<h3 id="%E4%BC%9A%E7%A4%BE%E9%81%B8%E3%81%B3%E3%81%AE%E5%9F%BA%E6%BA%96" tabindex="-1">会社選びの基準</h3>
<p>次の7つの観点で会社を選びました。</p>
<ul>
<li>自分のやりたい仕事ができそうか(自分のスキルを活かせるポジションがあるか)</li>
<li>面白そうなことしているか</li>
<li>事業成長しそうか
<ul>
<li>グローバルに進出していきそうか</li>
</ul>
</li>
<li>出社頻度、働きやすさ</li>
<li>給与</li>
</ul>
<p>今回の転職は理由があまり積極的なものではないことと前職の給与に特に不満がなかったので大幅な給与UPはあまり考えておらず、最低ラインを越えていればいいかなという感じでした。</p>
<p>一番重視していたのは自分のやりたい仕事ができそうかという点です。自分は既存のWebフロントエンドエンジニアよりももっとデザイナーに近い領域で仕事がしたいと考えていて、そういったポジションで受け入れてくれるかどうかを重視しました。「より良いUIを作る」ことを中心に置いてコードを書くことが必要ならコードを書くしUIデザインが必要ならデザインをやる、みたいなポジションで働けたら嬉しいなと考えていました。</p>
<p>海外進出をしていきそうかというのも大きなポイントでした。個人的に国内市場に閉じているプロダクトよりも海外展開を狙っていけるプロダクトのほうが面白そうだと感じていたので、この点についても注目していました。現時点で海外展開していなくても具体的な道筋が考えられている会社であれば良いかなという感じでした。</p>
<p>事業ドメインは特に気にしてなかったので選考進んだ9社は全てドメインが違う会社でした。どれにも興味がないというよりはどのドメインも面白そうだなと思っていて、より面白そうな課題に取り組んでいる会社で働きたいなと考えていました。SaaSな会社が多かったですがC向けプロダクトを開発している会社の選考も受けました。</p>
<h2 id="%E9%9B%91%E6%84%9F" tabindex="-1">雑感</h2>
<h3 id="%E3%82%AA%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3%E9%9D%A2%E6%8E%A5%E3%81%AF%E6%A5%BD" tabindex="-1">オンライン面接は楽</h3>
<p>コロナ禍なのでオファー面談を除く全ての面談・面接はオンラインで実施されました。オンラインだと移動時間を考慮しなくて良いのでスケジュールが組みやすくとても楽でした。働きながらだったらもっとメリットを実感できていた気がします。これからもオンライン面接がスタンダードな方法になってくれると嬉しいです。</p>
<p>オンライン面接を録画している会社もいくつかありました。これはすごく良い取り組みだと思います。面接に参加できなかった人も面接の様子を確認できますし、不必要に候補者を圧迫する面接も減るんじゃないかなと思います。</p>
<h3 id="%E3%81%8A%E8%A9%A6%E3%81%97%E5%85%A5%E7%A4%BE%E3%81%8C%E5%BF%85%E8%A6%81%E3%81%AA%E4%BC%9A%E7%A4%BE%E3%81%8C%E3%81%82%E3%81%A3%E3%81%9F" tabindex="-1">お試し入社が必要な会社があった</h3>
<p>数は多くなかったけど数社お試し入社が選考フローに組むこまれていました。1日の会社と3日の会社があって、個人的には3日くらいやると社内の雰囲気とかわかって良かったですが、仕事してたら厳しいなと感じました。お試し入社したいけど時間が確保できない問題難しいですね。</p>
<h3 id="%E4%BC%9A%E9%A3%9F%E5%BE%A9%E6%B4%BB%E3%81%97%E3%81%A6%E3%81%9F" tabindex="-1">会食復活してた</h3>
<p>ちょうどコロナの感染者数が減ってきていたこともあり、内定をいただいた後に会食にお誘いいただくことが多かったです。2020年〜2021年夏頃までは複数人で外食することがほとんどなかったので懐かしい感じがしました。</p>
<h3 id="%E3%81%A9%E3%81%AE%E4%BC%9A%E7%A4%BE%E3%82%82%E3%80%8C%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E3%83%87%E3%82%B6%E3%82%A4%E3%83%8A%E3%83%BC%E3%81%AE%E9%9A%94%E3%81%9F%E3%82%8A%E3%80%8D%E3%81%8C%E5%95%8F%E9%A1%8C%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%A6%E3%81%8D%E3%81%A6%E3%81%84%E3%82%8B" tabindex="-1">どの会社も「エンジニアとデザイナーの隔たり」が問題になってきている</h3>
<p>以前からエンジニアとデザイナーのコミュニケーションやワークフローの問題は存在していて度々話題になってきましたが、近年デザインシステムやアクセシビリティ対応などが一般的になってきたことで「開発とデザインにまたがる課題」が顕在化してきたため、そういった課題をエンジニア側から解決してくれる人材が求められているなと感じました。しかしデザインエンジニアやUXエンジニアなどの求人をい出している会社はほとんどありませんでした。</p>
<h3 id="wantedly%E3%81%AE%E3%83%97%E3%83%AD%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E4%BE%BF%E5%88%A9" tabindex="-1">Wantedlyのプロフィール便利</h3>
<p><a href="https://www.wantedly.com/id/takanorip" target="_blank" rel="noopener noreferrer">https://www.wantedly.com/id/takanorip</a></p>
<p>Wantedlyのプロフィールは今までの経歴やアウトプットなどを見やすくまとめておけるので非常に便利でした。個人のアウトプットと今まで所属していた企業での実績を同じ場所において置けるのが良いです。書類選考で補足情報としてこのリンクを送ったり面接の自己紹介のときの説明資料として見せたりしていました。</p>
<h3 id="%E8%87%AA%E5%88%86%E3%81%AE%E3%81%A9%E3%81%AE%E3%81%B8%E3%82%93%E3%81%8C%E8%A9%95%E4%BE%A1%E3%81%95%E3%82%8C%E3%81%9F%E3%81%AE%E3%81%8B" tabindex="-1">自分のどのへんが評価されたのか</h3>
<p>下記のような部分を評価していただくことが多かった気がします。</p>
<ul>
<li>Webフロントエンドエンジニアとして一通りの開発経験があること</li>
<li>UIデザイナーとしての知識・経験があるエンジニアであること</li>
<li>エンジニアとしてデザインに関わっていきたいというスタンス</li>
<li>アウトプットが多いこと(採用や社内でのプレゼンスを高めてやっていってほしい)</li>
<li>PdMやEMなどのマネージャー方面に興味があること</li>
</ul>
<h2 id="%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" tabindex="-1">おわりに</h2>
<p>転職活動は大変なこともあるけど自分の現状や将来について考え直す良い機会にもなるので終わってみるとけっこうスッキリしています。次の会社でも適度に振り返りつつ頑張りたいと思います。</p>
2021-12-31T00:00:00Z
/posts/2021-12-31-hurikaeri/
<p>大晦日なので2021年を振り返るよ。</p>
<h2 id="%E6%A8%AA%E6%B5%9C%E3%81%AB%E5%BC%95%E3%81%A3%E8%B6%8A%E3%81%97%E3%81%9F" tabindex="-1">横浜に引っ越した</h2>
<p>正確には2020年12月23日に引越したんだけど、住民票を移したのは今年なのでほぼ今年の出来事といって問題ないでしょう。</p>
<p>新居の内装に問題があってインターネットの工事がスムーズにできなかったり、隙間風がすごくてめちゃくちゃ寒かったりしたけど、現在は家具家電も買い揃えたし、いろいろDIYしてとても快適に生活している。</p>
<p>横浜での暮らしもだいぶ慣れてきた。横浜はちょっと足を伸ばせばいろんな観光地があるのが嬉しい。中華街、みなとみらい、鎌倉、湯河原、などなどいろんなところに出かけて横浜Lifeを満喫している。</p>
<h2 id="ui%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%AA%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%A2%E3%83%AB%E3%82%92%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9%E3%81%97%E3%81%9F" tabindex="-1">UIデザインリニューアルをリリースした</h2>
<p>仕事でやっていたUIデザインのリニューアルをリリースできた。去年リリースできていた部分もあったんだけど、それに機能を追加したり細かい改善を盛り込んでリリースできた。去年UIデザイナーになってから一番大きい仕事をやりきれたので、とても達成感があった。</p>
<p>またこれと一緒にデザインガイドラインや共通コンポーネントも少しずつ整備できた。公開できるクオリティのものは作れなかったけど、ある程度社内でコミュニケーションできるくらいのものは作れたので良かったかな。</p>
<p>本当はいろいろ計測したりリサーチして改善を回していきたかったんだけど、アクティブユーザーがあまり多くなくて意味のあるデータを集めきれなかったのが残念だった。</p>
<h2 id="%E3%80%8C%E5%B0%8F%E3%81%95%E3%81%8F%E5%A7%8B%E3%82%81%E3%82%8Bdesign-system%E3%80%8D%E3%82%92%E6%9B%B8%E3%81%84%E3%81%9F" tabindex="-1">「小さく始めるDesign System」を書いた</h2>
<p>デザイン読書日和という同人誌イベントにサークル参加した際に書いた。実際はイベントに間に合わず、イベント当日はライブ執筆をやった。現在はZennとBoothで販売している。</p>
<p>Zenn: <a href="https://zenn.dev/takanorip/books/b17c078e8e0098" target="_blank" rel="noopener noreferrer">https://zenn.dev/takanorip/books/b17c078e8e0098</a><br />
Booth: <a href="https://inutetraplus.booth.pm/items/2779567" target="_blank" rel="noopener noreferrer">https://inutetraplus.booth.pm/items/2779567</a></p>
<p>けっこう薄い本なのであまり売れないかなと思っていたけど、意外とたくさんの人に読んでもらえていて、初対面の人に「あの本買いました!」って言ってもらえることが多かった。日本語のデザインシステムの情報源がなかなかないので大変助かったという感想ももらえて、書いてよかったなと思った。ありがとうございます。</p>
<p>来年はもうちょい発展させたデザインシステムの本を書きたいな。</p>
<h2 id="front-end-study-%234%E3%81%AB%E7%99%BB%E5%A3%87%E3%81%97%E3%81%9F" tabindex="-1">Front-End Study #4に登壇した</h2>
<div class="youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/kfcEK8sNTXY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
<p>Front-End Study #4に登壇して「共創するためのデザイン批評」という発表をした。</p>
<p><a href="https://speakerdeck.com/takanorip/gong-chuang-surutamefalsedezainpi-ping" target="_blank" rel="noopener noreferrer">https://speakerdeck.com/takanorip/gong-chuang-surutamefalsedezainpi-ping</a></p>
<p>この発表はけっこう反響が大きくて、共感したとか役に立ったとか社内で話したとかいろんな感想をもらえて嬉しかった。この発表を見てお仕事の連絡をもらったりもした。</p>
<h2 id="podcast%E3%82%92%E5%A7%8B%E3%82%81%E3%81%9F" tabindex="-1">Podcastを始めた</h2>
<p>yamanokuさんと2人でお元気ですか.fmというPodcastを始めた。</p>
<p>Podcastをやりたいけど一人だと続かない気がしていて、一緒にやるならyamanokuさんが良いなと思っていて声をかけたら乗ってもらえたので嬉しかった。</p>
<p>2021年8月から初めてすでに第8回まで公開されているので皆さんぜひ聴いてください。来年も月1〜2回更新のペースでゆっくり続けていきます。</p>
<p><a href="https://anchor.fm/ogenkidesuka-fm/" target="_blank" rel="noopener noreferrer">https://anchor.fm/ogenkidesuka-fm/</a></p>
<h2 id="30%E6%AD%B3%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%9F" tabindex="-1">30歳になった</h2>
<p>2021年で30歳になった。なんか節目だな〜って感じた。特に何かが変わったわけじゃないんだけど、おとなになったんだなあと思う。</p>
<h2 id="ux%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E5%8B%89%E5%BC%B7%E3%82%92%E5%A7%8B%E3%82%81%E3%81%9F" tabindex="-1">UXデザインの勉強を始めた</h2>
<p>仕事でUXデザインの知識が必要になったので勉強を始めた。今までもちょこちょこ記事を読んだりしていたが、それだけだとUXデザインの施策をリードするのは難しいなと思ったので本格的に勉強を始めた。</p>
<p>結局仕事では知識をうまく活かせなかったので、来年に期待。来年は人間中心設計専門家に応募したい。</p>
<h2 id="%E3%82%AD%E3%83%83%E3%82%AF%E3%83%9C%E3%82%AF%E3%82%B7%E3%83%B3%E3%82%B0%E3%82%92%E5%A7%8B%E3%82%81%E3%81%9F" tabindex="-1">キックボクシングを始めた</h2>
<p>家から電車で15分くらいのところにあるキックボクシングジムに入会した。サンドバッグやミットを思いっきり殴る&蹴るのはすごく良いストレス発散になる。ここ3ヶ月はまったく行っていないが来年に期待。</p>
<h2 id="%E8%AA%BF%E7%90%86%E5%99%A8%E5%85%B7%E3%82%92%E3%81%9F%E3%81%8F%E3%81%95%E3%82%93%E8%B2%B7%E3%81%A3%E3%81%9F" tabindex="-1">調理器具をたくさん買った</h2>
<p>横浜に引越してから自炊の頻度が上がったことを言い訳に調理器具をめちゃくちゃ買った。コーティングフライパン、ステンレス鍋、鉄フライパン、中華鍋、包丁、ミートテンダーライザー、チーズおろし器、炊飯専用鍋、ビネガージャー、etc...</p>
<p>自炊のレパートリーが増えたのが嬉しい。</p>
<p>来年はアルミのフライパンとストウブの鍋と良い包丁が欲しい。</p>
<h2 id="%E6%87%B8%E5%9E%82%E3%83%9E%E3%82%B7%E3%83%B3%E3%82%92%E8%B2%B7%E3%81%A3%E3%81%9F" tabindex="-1">懸垂マシンを買った</h2>
<p>家が広くなったし自宅で筋トレしたいなと言うことで懸垂マシンを買った。日々のトレーニングで大活躍している。</p>
<p>これと一緒にプッシュアップバーとアプローラーも買った。来年はフレックスベル(高級可変式ダンベル)が欲しい。</p>
<h2 id="%E9%81%A9%E5%BF%9C%E9%9A%9C%E5%AE%B3%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%9F" tabindex="-1">適応障害になった</h2>
<p>ブログにも書いたけど、9月くらいに適応障害の診断を受けて休職&退職した。症状自体は7月くらいからあったので、2021年後半はずっとぐったりしていた気がする。</p>
<p>10〜12月は全ての仕事をお休みして治療に専念してたので全然記憶がないが、その甲斐あって症状はかなり改善した。あと時間が有り余っていたのでいろんな人に会って話ができたのも良かった。コロナ禍のせいで数年ぶりに会う人も珍しくなかったけど、みんな元気そうで良かった。</p>
<p>ゆっくり今後の人生について考える期間ができたので、来年からは体調崩さない程度に頑張りたい。</p>
<p>良いお年を!</p>
2022-01-04T00:00:00Z
/posts/2022-01-04_tenshoku/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#from-(2020.05.01-~-2021.11.30)">From (2020.05.01 ~ 2021.11.30)</a></li><li><a href="#to-(2022.01.01-~)">To (2022.01.01 ~)</a></li></ul></details><p></p>
<p><img src="https://storage.googleapis.com/studio-design-assets/projects/brqE5z3wq4/s-180x72_da0cdb20-6133-4040-8574-eab94fc6fdd0.svg" alt="Ubie" loading="lazy" /></p>
<h2 id="from-(2020.05.01-~-2021.11.30)" tabindex="-1">From (2020.05.01 ~ 2021.11.30)</h2>
<ul>
<li><a href="https://classdo.com/" target="_blank" rel="noopener noreferrer">ClassDo</a> UI designer</li>
</ul>
<h2 id="to-(2022.01.01-~)" tabindex="-1">To (2022.01.01 ~)</h2>
<ul>
<li><a href="https://ubie.life/" target="_blank" rel="noopener noreferrer">Ubie株式会社</a> Design Engineer</li>
</ul>
2022-03-17T00:00:00Z
/posts/2022-03-16_office-chair/
<p>最近書斎のイスを買い替えた。</p>
<p>以前はエルゴヒューマン・エンジョイを使っていた。2年ほど前に購入した。悪いイスではなかったが、僕の体に合わなかった。合わなかったのポイントはこんな感じ。</p>
<ul>
<li>背もたれの反発力がありすぎ</li>
<li>ランバーサポートが邪魔</li>
<li>ヘッドレストの主張が強すぎる</li>
<li>リクライニングの角度が微妙</li>
</ul>
<p>買った当初はそこまで問題ないと思っていたが、最近になって座っているのがきつくなってきた。やはり長く座ってみないとわからないものだなと思った。</p>
<p>そこでイスを買い換えるべくWorkaholicにオフィスチェアの試座に行った。<br />
<a href="https://www.iamworkaholic.jp/chair_concierge/" target="_blank" rel="noopener noreferrer">https://www.iamworkaholic.jp/chair_concierge/</a></p>
<p>完全予約制で2時間3,000円という高いのか安いのかわからない金額設定だが、いろいろなイスに座ってみて自分の好みがはっきりわかったので行ってよかったなと思う。<br />
エルゴヒューマンエンジョイに座っていたおかげで自分に合わないイスの特徴がわかっていたので、イス選びはかなりスムーズにいった。</p>
<p>試座した結果、オカムラ・BaronのWorkaholic限定モデルを買った。背もたれと座面両方がメッシュになっていて、背もたれはランバーサポートのないタイプだ。</p>
<p><a href="https://item.rakuten.co.jp/of9/cp8fspb/" target="_blank" rel="noopener noreferrer">https://item.rakuten.co.jp/of9/cp8fspb/</a></p>
<p>今のところかなり快適だ。ヘッドレストをいい感じに調整できるしリクライニングの角度は無段階調整可能だし背もたれのフィット感も良い。<br />
やはり試座は大事だなと思った。</p>
<h2 id="%E3%82%A8%E3%83%AB%E3%82%B4%E3%83%92%E3%83%A5%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%A7%E3%82%A4%E3%82%92%E8%B2%B7%E3%81%A3%E3%81%A6%E3%81%8F%E3%82%8C%E3%82%8B%E6%96%B9%E3%82%92%E6%8E%A2%E3%81%97%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99" tabindex="-1">エルゴヒューマンエンジョイを買ってくれる方を探しています</h2>
<p>僕が以前座っていたエルゴヒューマンエンジョイを <strong>15,000円+送料</strong> で買ってくれる人を探しています。<br />
こちらのブラックが僕のイスです。</p>
<p><a href="https://item.rakuten.co.jp/of9/enjoy-h/" target="_blank" rel="noopener noreferrer">https://item.rakuten.co.jp/of9/enjoy-h/</a></p>
<p>2020年4月に購入しまだ保証期間が残っていますが、保証書を紛失してしまったため相場よりも金額を低くしています。<br />
状態はそこそこ良いと思います。目立った故障などはないです。<br />
購入希望の方は僕のTwitterにDMください。現状の写真など送ります。</p>
<p>よろしくお願いします!</p>
2022-04-03T00:00:00Z
/posts/2022-04-03-hakuto-r/
<p>2022年3月末からHAKUTO-Rのプロボノメンバーになりました。(プロボノとは職業上のスキルや専門知識を活かして取り組むボランティア活動のことです。)</p>
<p>HAKUTO-Rとはispace社が運営する民間月面探査プログラムです。JAL、SMBC、CITIZEN、朝日新聞などが協賛企業となっている他、USやヨーロッパにも拠点がある非常に大きなプロジェクトです。<br />
<a href="https://ispace-inc.com/hakuto-r/" target="_blank" rel="noopener noreferrer">https://ispace-inc.com/hakuto-r/</a></p>
<p>僕はWebチームに配属されたのでWebサイトのデザイン・開発やデモ機のUIデザインなどを担当する予定です。</p>
<p>僕がHAKUTO-Rに参加した主な理由は下記3つです。</p>
<ul>
<li>学生時代から宇宙開発に興味がありHAKUTOやHAKUTO-Rの活動もかなり前から知っていて、有給無給を問わず関わってみたいと思っていた</li>
<li>自分のスキルを生かして日本の宇宙開発を盛り上げていけたら楽しそう&人材育成にもつながりそうだと思った</li>
<li>様々なスキルを持ったプロボノメンバーやispace社の方々と同じプロジェクトに関われるので得られるものが多そう</li>
</ul>
<p>プロボノなので無給ですが、無理のない範囲で頑張ります。</p>
<p>HAKUTO-Rではグラフィックデザインができるプロボノを募集しているので、興味ある方は下記ツイートにあるフォームから応募お待ちしています。<br />
<a href="https://twitter.com/HAKUTO_Reboot/status/1508609886506172420?s=20&t=mPxIrHiMGOm_f-euGDqnmQ" target="_blank" rel="noopener noreferrer">https://twitter.com/HAKUTO_Reboot/status/1508609886506172420?s=20&t=mPxIrHiMGOm_f-euGDqnmQ</a></p>
2022-04-10T00:00:00Z
/posts/2022-04-10-aesthetics-of-the-modern-design/
<p>最近「近代デザインの美学」という本を読んでいる。何かの本で紹介されているのを見て買った気がするが、なんの本で読んだかは忘れてしまった。一時期在庫が少なくなっていたみたいだが現在は普通に買える。</p>
<p><a href="https://www.msz.co.jp/book/detail/07902/" target="_blank" rel="noopener noreferrer">https://www.msz.co.jp/book/detail/07902/</a></p>
<p>この本は「近代デザイン史」における時代や用語の定義を再考することで近代デザインについて理解を深めることを目的とした本だ。全体的に非常によくまとまっていて、平易だが深く考察されているとても良い本だと思う。<br />
この本の序論で「研究書と入門書の区別をなくし、立ち入った考察をできる限り多くの人々に明快に伝えようと試みる。」とあったが、まさにそのとおりという感じである。</p>
<p>余談だが僕は歴史が好きな人間なのでデザイン史が好きだ。(しかし暗記は得意ではないので人物名とかすぐ忘れる。)<br />
歴史を学ぶことは新しいものを生み出すための礎だ。歴史を知らない人間に新しいものを作ることはできない。みなさんも自分の興味がある分野の歴史を学ぼう。</p>
<p>この本の序盤では20世紀初頭のデザイン教育の話が盛んに取り上げられている。(バウハウス、ウルム造形大学、日本での構成教育など)<br />
これらの話を読んで感じたことは、近代学校教育の即応性のすごさだ。新しい思想や概念を広めるために学校を作り若者を教育し、そこで学んだ人が新しい学校を作り元の教えをさらに進化させて新しい世代に伝えていくという良い循環が生まれていたように思う。現代では考えられない早さで学校教育の中身がアップデートされていて、新しいものを学ぼう・教えようという意欲の強さみたいなものを感じた。<br />
しかもそれがかなりグローバルに行われていた(バウハウスで学んだ日本人が日本に帰ってきて学校を設立するなど)というのがすごく良いなと思う。<br />
実際にその年代に生きていたわけでも詳しい調査をしたわけでもないので本当にそれが良い循環だったのかはわからないが、事実それらの学校で学んだ人物が歴史に名を残しているわけなので良い教育が行われていたことは間違いないだろう。</p>
<p>20世紀初頭はナチスドイツの台頭や2度に渡る世界大戦などの影響で1つの学校が長続きしなかったり、先行きが不透明なために皆知識を貪欲に欲していたりといった時代背景や、現代よりも情報伝達手段が限られていたことなども関係しているだろう。<br />
しかし、良くも悪くも学校教育が固定化し、実社会で求められる知識との乖離が激しくなった今こそ、この学校教育の柔軟性・即応性について再考すべきなのではないか、と思う。</p>
2022-06-05T00:00:00Z
/posts/2022-06-05-halfway/
<p>ずっとデザイナーとエンジニアの間でもがいている。</p>
<p>どちらにもなりたいしどちらにもなれない。バナーが作れないデザイナー、プログラミングが苦手なエンジニア。グラフィックは作れないしテスト設計の話もできない。何事も中途半端だけど器用貧乏と言えるほど器用に何でもできるわけでもない。</p>
<p>狭間を埋める仕事をしているのは需要があるからで、真にやりたいことなのかはわからない。狭間はやがて僕ではない何かで構造的に埋められてしまうかもしれない。</p>
<p>でもどちらかだけになりたいわけでもない。どちらでもありたい。僕が目指しているのはスーパーマンなのかもしれない。目指すべきものではないのかもしれない。</p>
<p>今までとりあえず目の前のやるべきこと、やりたいことをやってきたけど、今後もずっとそれで良いのかはわからない。自分はどうなっていくんだろう。</p>
<p>できることを1つずつ増やしていくしかないのかな。</p>
2022-06-26T00:00:00Z
/posts/2022-06-26-kobe/
<p>2022年6月17〜19日の2泊3日で神戸に行った。<br />
主目的は大学の友人の結婚式だったが、せっかくなのでいろいろ観光したかったので少し長めに宿泊した。</p>
<p><a href="https://www.hankyu-hotel.com/hotel/remm/kobe-sannomiya" target="_blank" rel="noopener noreferrer">レムプラス神戸三宮</a>というホテルに宿泊した。<br />
新しいホテルらしくかなりキレイでおしゃれだったし、三宮の駅直結だったのでめちゃ便利だったのでとても快適だった。<br />
それなりのお値段するらしいが、今回はJR東海ツアーズのパッケージに申し込んだのでかなり安かった。<br />
たぶん新幹線代と合わせると3万くらい安くなってる。最高。</p>
<p><img src="https://lh3.googleusercontent.com/pw/AM-JKLVYaTdn8LKNU60uBRNigJeXM9S5xuJUBOi3l4HRm6KkC1EmGTr3fr1LnoAdfJHuP2IYAeG5X1GeYjijX1r0t4vJLCuqn8zH3W3wGK69jNNTZ899UvEUw6zdpulU60e0FiZV9Rs2CUYthLpT0P_cWVkG=w800-h450-no?authuser=0" alt="宿泊した部屋" loading="lazy" /></p>
<p><img src="https://lh3.googleusercontent.com/pw/AM-JKLVWM3pUXvDCSP8j5YG6NK-nw0mRjzAn1fbzaVcMrljz4QB_-fZ2RZeJcnHkPJ-GnxBIxBYIVCQStxLFMpB-9qLzazvFMwUYrdju2b-gbecI_FcYBtmb5BXrIwstYdBbGlYO4vLP__XSpuSYkUQvjjoL=w800-h450-no?authuser=0" alt="部屋からの眺め" loading="lazy" /></p>
<p>1日目はTwitterで声をかけてくれた神戸在住のエンジニアの人とご飯を食べた。<br />
初対面だったけど、キャリアとか仕事とか地元のこととかで話が弾んで楽しかった。<br />
お店を調べて予約してくれたので非常に助かった。地元の人にお店を探してもらうのが一番良い。<br />
本当にありがとうございました!</p>
<p>ご飯は<a href="https://diningwasabiya.com/" target="_blank" rel="noopener noreferrer">DINING 和さびや</a>というお店で食べた。<br />
わさび推しのお店で、わさびをすりおろしながら食べる感じだった。<br />
わさびの使いどころがわからないこともあったが、料理はどれも最高だった。<br />
日本酒もかなり種類が豊富で、あまり関東では見ない銘柄もあったので神戸を感じた。</p>
<p><img src="https://lh3.googleusercontent.com/pw/AM-JKLVsclRVJXGZnmd6K2VqAoWITomRvHXV_am-zzTFRs9j9-eqYHFSIxwX073E0oBsXPZHd05Nm7q6N-8pR_Zt4_630nirmSLXFV0BVauJOUomZW8oAohtbDw5bV2IQtg3I1F9_5ZPDrEA3fiHNsBgtBz9=w800-h450-no?authuser=0" alt="名物の牛たん焼き" loading="lazy" /></p>
<p>ご飯食べた後は神戸のエンジニアバー、<a href="https://mobile.twitter.com/engineerbarkobe" target="_blank" rel="noopener noreferrer">Hack.BAR</a>にお邪魔した。<br />
六本木のHackers Barをリスペクトしているらしく、言語やフレームワークを題材にしたカクテルを作ってくれた。<br />
小さいけどおしゃれで良い店だった。横浜にもこんな感じのお店がほしいな。<br />
複業でバーとかカフェとか気軽にできるようになると良いのかな。</p>
<p>2日目は結婚式だった。<br />
北野異人館での開催だったのだが、三宮から歩いて行ったら坂道がきつすぎて会場に着く頃には汗だくになり、大変つらかった。<br />
迷わずタクシーに乗るべきだった…。</p>
<p>式自体はコンパクトでとても良い式だった。<br />
小さい会場だったので新郎とも距離が近くていろいろ話せたのも良かった。<br />
大学の頃から相当ゴツくなったので、「受付最後じゃなかったら絶対気づかなかった」「ベストだけになるとなんかでかい」「この前(3ヶ月前くらい)よりでかくなった?」などなど言われたが、総じて楽しい式だった。<br />
大学生のころはみんな良い意味で少年みたいな感じだったけど、結婚とか出産とか昇進とかでみんな大人になっているんだなと実感して感慨深くなると同時に、なんだか自分だけ取り残されているような、少し寂しいような気持ちにもなった。</p>
<p>結婚式終わって塚田農場で2次会をやったあと、三宮駅近くにある司というお店の明石焼きをテイクアウトし道端で食べた。<br />
食べてる途中でスキンヘッドでビンクのシャツを着た、いかにも人間的に強そうなおじさんに「うまそうなもん食っとるな」と言われ肩をぽんとたたかれた。<br />
なんか笑ってたので、たぶん京言葉てきなものではなかった気がする。ディープ三宮だった。</p>
<p><img src="https://lh3.googleusercontent.com/pw/AM-JKLUNJCNw3f6hKQl4uAYMO_-ELJaf2SLJq5zpclAeNh7PxFuE-fLjqJYImDnl80WpPrZCCabTzukdHAwo2_ZuXeQgi4sxgritO7wSdjJNbrPFmIBTReRIcizazpnVgX03FGwIw7Ip0aoEkX_OpPy2MxVP=w800-h450-no?authuser=0" alt="明石焼き" loading="lazy" /></p>
<p>3日目は<a href="https://steakland-kobe.jp/" target="_blank" rel="noopener noreferrer">ステーキランド神戸店</a>で神戸牛ステーキを食べた。<br />
奮発して4,500円の神戸牛テンダーステーキランチにしたが、大大大正解だった。やっぱ神戸牛はうまい。<br />
脂もスッキリしててくどくないし、柔らかいんだけどしっかり肉のうま味もあって最高だった。あと、目の前でステーキを焼いてくれるのも最高の体験だったな。<br />
これを書いていたら神戸牛を思い出してお腹が空いてきた。</p>
<p><img src="https://lh3.googleusercontent.com/pw/AM-JKLXCBMOwTdbrTpQHt3IV_DVLpRos2UjOTMMQEb6c3KsxXNhw0HeJLxDajgu1LZMDx3PUAYS-laxFVJVFDnNjyT-nICiFhZn9htSMbUlrJpdGpJrOBylW4_mJ9NY5xRMIEaNmeBLQhfJwhd5ayJsJkTWM=w800-h450-no?authuser=0" alt="神戸牛テンダーステーキランチ" loading="lazy" /></p>
<p>その後新幹線まですこし時間があったので神戸ポートタワーに行ったのだが、あいにく改修工事中で中には入れなかった。<br />
残念だけど工事中のポートタワーは逆にレアなので良かったことにした。</p>
<p><img src="https://lh3.googleusercontent.com/pw/AM-JKLUDHbNw_Wb6zYgVW-gL2h6XpqXnsQNmyyqReGeUqasj49_JShRm0qX-n-RoDIWCg_Md0I04_UP8Olde4EJx6xM4xSiH3HEBqfTftanI4jDtAl4xrGrtm0yPmBCT5DJULyFvEr_6FpcV1PJwidhGWZpr=h450-no?authuser=0" alt="工事中のポートタワー" loading="lazy" /></p>
<p>せっかくポートタワーまで来たので、近くにあった神戸海洋博物館に入った。<br />
川崎重工業の特設コーナーがあって面白かった。<br />
新幹線とかバイクとかの操縦を体験できるコーナーもたくさんあって、子供連れの人が多かった。乗り物好きの男子にはたまらないスポットだと思うので納得。<br />
家の近くにもこういう博物館ほしいな。</p>
<p><img src="https://lh3.googleusercontent.com/pw/AM-JKLU7r_7W25c05OFJi5XCB2AZhjRX6Y1W9GPahg3FgGWtB3x1-3yWeVAIyjDyo4x3ZQofULWajjT52JSbRYn-wv7hv3-ZEq00ctOsFPiuollsmtP1dGDeGI9PuWUrtm9Uz7_sQUJ1LJiPkM1u9GqOvJCu=w800-h450-no?authuser=0" alt="神戸海洋博物館の外観" loading="lazy" /></p>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81" tabindex="-1">まとめ</h2>
<p>神戸めちゃ良かった。<br />
山と海が近いので横浜に雰囲気は似ていたけど、個人的には横浜より雰囲気が好き。<br />
今住みたい街ランキング1位は神戸。<br />
大阪まで30分くらいで行けるのも良いなと思った。<br />
今度はポートタワーの工事が終わったら行きたいね。</p>
2022-06-27T00:00:00Z
/posts/2022-06-27-businness-card/
<p><img src="https://lh3.googleusercontent.com/pw/AM-JKLWi9wS4BX5XsC-HiXlJYYXg339iN2V9dY1xKNMRVHdY412SZNU7wQq06ThW8xzS1ag7l1Ac_Na-roiFp7x4WGnk7M268A3ZTQUZaxppZVJPYgfUDCVlTk6j3JpYa7P3EP79mPrAhAHqO6A9Q0zbaTJP=w800-h450-no?authuser=0" alt="新しい名刺" loading="lazy" /></p>
<p>個人名刺を新調したので、いろいろまとめておく。</p>
<h2 id="%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3" tabindex="-1">デザイン</h2>
<p>デザインはFigmaでやった。<br />
やったことは以前ブログにまとめたことと同じ。<br />
<a href="https://blog.takanorip.com/posts/2019-11-11_Figma-----------------6a72c4e9498c/" target="_blank" rel="noopener noreferrer">https://blog.takanorip.com/posts/2019-11-11_Figma-----------------6a72c4e9498c/</a></p>
<p>今回は標準的な名刺サイズではなく55mm×55mmの正方形にしてみた。<br />
個人名刺だと情報量少なめなので正方形が丁度いいなかと思った。</p>
<p>デザインはこちら。<br />
<a href="https://www.figma.com/file/pK9qPupUKNmEaF3TiD0Gzt/takanorip-design?node-id=1%3A3" target="_blank" rel="noopener noreferrer">https://www.figma.com/file/pK9qPupUKNmEaF3TiD0Gzt/takanorip-design?node-id=1%3A3</a></p>
<h2 id="%E5%8D%B0%E5%88%B7" tabindex="-1">印刷</h2>
<p>今回は箔押し印刷をしたかったのでPDFや画像で入稿できる印刷所を探していた。(だいたい箔押しはAIファイルで入稿しないといけない。)<br />
いろいろ比較検討した結果、今回は<a href="https://haku-asadaya.com/" target="_blank" rel="noopener noreferrer">あさだ屋</a>さんに発注した。<br />
ガイドに書いてあるが、あさだ屋さんはJPEGでの入稿ができるので、とっても楽だった。Figmaユーザーに優しい。<br />
<a href="https://haku-asadaya.com/contents/data-guide/#post_id_4881" target="_blank" rel="noopener noreferrer">https://haku-asadaya.com/contents/data-guide/#post_id_4881</a></p>
<p>用紙はクッション紙0.6mmにした。ずっとクッション紙の名刺に憧れていたので。(一番最初の会社の名刺はみんなクッション紙だったのに新入社員の僕だけ普通の紙だったのが寂しくて、それからずっとクッション紙の名刺が欲しかった。)<br />
名前はメタリック青泊、その他の文字は顔料黒箔、裏面ロゴは金箔で注文した。<br />
文字は印刷にするか悩んだが、せっかくなので箔押しにしてみた。</p>
<p>仕上がりは大変素晴らしく、大満足。新規注文だと製版代金がかかるのでちょっと高かったが、版は最後の注文から2年間保存してくれるらしいので、次の印刷はもっと安くできそう。</p>
<p>みんなも箔押し印刷やってみよう。</p>
2022-06-27T00:00:00Z
/posts/2022-06-27-not-design-system/
<p>「デザインシステムをやってます!」というと、かっこいい名前のついた箱を作ってやっているイメージがある。<br />
GitHubのPrimir、AdobeのSpectrum、ShopifyのPolaris、など。</p>
<p>名前をつけることは、そのデザインシステムを社内外に浸透させるために重要だ。<br />
名前があることでコミュニケーションがスムーズになるし、デザインシステムの雰囲気や目的を伝えやすくなる。</p>
<p>しかし、この「名前のついた箱を用意しないとデザインシステム構築を始められない」っぽい雰囲気が実は良くないのかもしれない。<br />
名前なんて後から考えれば良いのではないか、最初は箱なんて必要なくてドキュメントとデザインファイルと実装のなんとなくのまとまりがあれば良いのではないか、と最近考えている。</p>
<p>じゃあどうすれば名前の呪縛から逃れられるのか。</p>
<p>その答えは「デザインシステムをデザインシステムだと考えないこと」なのではないかと考えている。</p>
<p>最初からシステムを構築しようとするから名前のついた箱が欲しくなり秩序が欲しくなり、結局手段が目的になってしまう。<br />
それなら今作っているものはシステムではないと考えるのはどうだろう。<br />
システムではないから名前がなくても気にならないし、無秩序に必要なものを継ぎ足していっても問題ない。<br />
問題があれば全部壊してやり直しても良い。</p>
<p>でも巷に出回ってる情報は「きれいな箱に中身を詰めた話」しかなくて、「ダンボールの中身を整理整頓した話」は少ない。<br />
やはり組織で多くの人を巻き込んでやってくには箱や名前が重要なのか、それともみんなやってないからやってないだけなのか。</p>
<p>アマゾンの奥地にでも旅立ってこようかな。</p>
2022-07-28T00:00:00Z
/posts/2022-07-28-mental-health-tuning/
<p>これは<a href="https://kichijojipm.connpass.com/event/254162/" target="_blank" rel="noopener noreferrer">吉祥寺.pm30</a>で話した内容の書き起こしです。使用したスライドはSpeaker Deckにアップロードしています。<br />
<a href="https://speakerdeck.com/takanorip/mentaruherusutiyuningu" target="_blank" rel="noopener noreferrer">https://speakerdeck.com/takanorip/mentaruherusutiyuningu</a></p>
<p>僕は自分のメンタルヘルスをどうやってチューニングしているかという話をします。(注意:これは何の医学的根拠にも基づいていない、ただの個人の感想です。)</p>
<h2 id="%E5%83%95%E3%81%AE%E7%97%85%E6%AD%B4" tabindex="-1">僕の病歴</h2>
<p>僕は精神疾患を度々患ってきました。時系列的にはこんな感じです。</p>
<ul>
<li>2014年:非定形型うつ病</li>
<li>2016年:非定形型うつ病(再発)</li>
<li>2020年:睡眠障害</li>
<li>2021年:軽度のうつ、適応障害</li>
</ul>
<p>2014年にうつ病になるまで精神疾患を患ったことはありませんでした。しかし、その後は立て続けに様々な精神疾患を患っています。環境の影響などもあると思いますが、うつ病の再発率は1年で30%、5年以内で40~60%と言われています。</p>
<p>一度壊れたメンタルは壊れる前より壊れやすくなってしまいます。壊れる前に壊れないようにチューニングすることが大事だと思います。僕が普段やっているチューニング方法を2つ紹介します。</p>
<h2 id="%E3%83%81%E3%83%A5%E3%83%BC%E3%83%8B%E3%83%B3%E3%82%B0%E6%96%B9%E6%B3%95%E2%91%A0%EF%BC%9A%E6%84%9F%E6%83%85%E3%82%92%E5%8B%95%E3%81%8B%E3%81%99" tabindex="-1">チューニング方法①:感情を動かす</h2>
<p>1つ目は、感情の起伏をわざとつくることです。</p>
<p>映画を観て泣く、コントや漫才を観て笑う、動物・植物を愛でる、etc…</p>
<p>疲れてくると心の動きが鈍くなるイメージがあります。普通に生活していても、なかなか大きく感情が動くことありませんからね。外的刺激でわざと感情を動かすことで、気持ちが軽くなる気がします。肩凝ったのでストレッチするみたいなイメージです。</p>
<p>外的刺激で気持ちが動かなくなったらヤバい可能性があるので、病院に行くことも考えましょう。うつになると食欲も性欲もなくなり映画を観ても漫才を観ても何も感じなくなっていきます。</p>
<h2 id="%E3%83%81%E3%83%A5%E3%83%BC%E3%83%8B%E3%83%B3%E3%82%B0%E6%96%B9%E6%B3%95%E2%91%A1%EF%BC%9A%E8%BA%AB%E4%BD%93%E3%82%92%E5%8B%95%E3%81%8B%E3%81%99" tabindex="-1">チューニング方法②:身体を動かす</h2>
<p>2つ目は身体を動かすことです。</p>
<p>ただ身体を動かすんじゃなくて、頭が真っ白になって身体を動かすこと以外何も考えられないくらいやるのがコツです。怪我には注意しましょう。がむしゃらに身体を動かすことで余計な思考を強制的にシャットアウトして、気持ちをリセットできる気がします。僕は筋トレやシャドーボクシング、キックボクシングをよくやります。</p>
<p>あと筋肉痛になると生きている実感が得られて好きです。(映画ガチボーイの影響。)</p>
<h2 id="%E6%9C%80%E5%BE%8C%E3%81%AB" tabindex="-1">最後に</h2>
<p>メンタルヘルスは1度壊れたら元に戻らない可能性があるので、壊さないように日頃から気をつけましょう。こわいのは壊れるときは予兆なく一気に壊れるということです。自分の状態を客観的に振り返る習慣をつけると良いと思います。(難しいですが…。)</p>
<p>みなさんも自分なりのチューニング方法を見つけられると良いですね。</p>
2022-12-28T00:00:00Z
/posts/2022-12-28-the-best-bought/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#flexbell%EF%BC%88%E5%8F%AF%E5%A4%89%E5%BC%8F%E3%83%80%E3%83%B3%E3%83%99%E3%83%AB%EF%BC%89">FLEXBELL(可変式ダンベル)</a></li><li><a href="#%E3%83%A9%E3%82%AF%E3%82%A2mini-plus%EF%BC%88%E5%B0%8F%E5%9E%8B%E9%A3%9F%E6%B4%97%E6%A9%9F%EF%BC%89">ラクアmini Plus(小型食洗機)</a></li><li><a href="#shark-evopower-system-adv%EF%BC%88%E3%82%B3%E3%83%BC%E3%83%89%E3%83%AC%E3%82%B9%E6%8E%83%E9%99%A4%E6%A9%9F%EF%BC%89">Shark EVOPOWER SYSTEM ADV(コードレス掃除機)</a></li><li><a href="#anker-powerexpand-elite-13-in-1-thunderbolt-3-dock">Anker PowerExpand Elite 13-in-1 Thunderbolt 3 Dock</a></li><li><a href="#%E4%BA%8C%E9%85%B8%E5%8C%96%E7%82%AD%E7%B4%A0%E6%BF%83%E5%BA%A6%E8%A8%88">二酸化炭素濃度計</a></li><li><a href="#stream-deck-mk.2">STREAM DECK MK.2</a></li><li><a href="#sony-srs-xb13%EF%BC%88%E3%83%9D%E3%83%BC%E3%82%BF%E3%83%96%E3%83%AB%E3%82%B9%E3%83%94%E3%83%BC%E3%82%AB%E3%83%BC%EF%BC%89">SONY SRS-XB13(ポータブルスピーカー)</a></li><li><a href="#hibi%EF%BC%88%E3%83%9E%E3%83%83%E3%83%81%E5%9E%8B%E3%81%8A%E9%A6%99%EF%BC%89">hibi(マッチ型お香)</a></li><li><a href="#%E3%82%A2%E3%82%AB%E3%82%AA%E3%82%A2%E3%83%AB%E3%83%9F-%E3%82%A2%E3%83%AB%E3%83%9F%E3%83%95%E3%83%A9%E3%82%A4%E3%83%91%E3%83%B3">アカオアルミ アルミフライパン</a></li><li><a href="#%E3%83%8B%E3%83%88%E3%83%AA-%E3%83%80%E3%82%A4%E3%83%8B%E3%83%B3%E3%82%B0%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB">ニトリ ダイニングテーブル</a></li><li><a href="#asus-rt-ax3000-v2%EF%BC%88%E3%83%AB%E3%83%BC%E3%82%BF%E3%83%BC%EF%BC%89">ASUS RT-AX3000 V2(ルーター)</a></li><li><a href="#acr-pro-alice-plus%EF%BC%88%E3%82%AD%E3%83%BC%E3%83%9C%E3%83%BC%E3%83%89%EF%BC%89">ACR Pro Alice Plus(キーボード)</a></li></ul></details><p></p>
<p>2022年かってよかったものを振り返る。</p>
<h2 id="flexbell%EF%BC%88%E5%8F%AF%E5%A4%89%E5%BC%8F%E3%83%80%E3%83%B3%E3%83%99%E3%83%AB%EF%BC%89" tabindex="-1">FLEXBELL(可変式ダンベル)</h2>
<p>筋トレしたいけどジムに通うのは面倒なので可変式ダンベルを買った。人類皆これを買うべき。側面がフラットなので膝に載せやすく便利。<br />
最初は20kgのやつを買ったけど、足りなくなって途中で重りを買い足した。</p>
<p><a href="https://www.lysin.jp/shopdetail/000000000198/" target="_blank" rel="noopener noreferrer">https://www.lysin.jp/shopdetail/000000000198/</a></p>
<h2 id="%E3%83%A9%E3%82%AF%E3%82%A2mini-plus%EF%BC%88%E5%B0%8F%E5%9E%8B%E9%A3%9F%E6%B4%97%E6%A9%9F%EF%BC%89" tabindex="-1">ラクアmini Plus(小型食洗機)</h2>
<p>食洗機ずっと欲しかったので、狭いキッチンでも置ける食洗機を買った。ちょっと小さいから大きめの皿が入らなくて不便とかはあるけど、安いしコンパクトで洗浄力もあるので概ね満足してる。</p>
<p><a href="https://www.thanko.jp/view/item/000000004055" target="_blank" rel="noopener noreferrer">https://www.thanko.jp/view/item/000000004055</a></p>
<h2 id="shark-evopower-system-adv%EF%BC%88%E3%82%B3%E3%83%BC%E3%83%89%E3%83%AC%E3%82%B9%E6%8E%83%E9%99%A4%E6%A9%9F%EF%BC%89" tabindex="-1">Shark EVOPOWER SYSTEM ADV(コードレス掃除機)</h2>
<p>以前買った掃除機が重くて使い勝手わるかったので買い替えた。ダイソンの掃除機と迷ったけど価格&重量でSharkのを買った。<br />
見た目スタイリッシュで吸引力もあり最高。バッテリーも2個ついてくるので3LDKを余裕で掃除できる。アタッチメントも豊富だしフローリングもカーペットもいけるしフィルター水洗いもできるので今のとこ非の打ち所がない。おすすめ。</p>
<p><a href="https://www.shark.co.jp/stickcleaner/evopowersystem_adv/" target="_blank" rel="noopener noreferrer">https://www.shark.co.jp/stickcleaner/evopowersystem_adv/</a></p>
<h2 id="anker-powerexpand-elite-13-in-1-thunderbolt-3-dock" tabindex="-1">Anker PowerExpand Elite 13-in-1 Thunderbolt 3 Dock</h2>
<p>MacBook Proにいろいろ接続するのが面倒になってきたのでThunderbolt3 Dockを買った。僕は周辺機器多めなのでPCへの接続が1つで済むのがとても良い。<br />
85Wで電源供給もできるので便利。16インチMacBook Proの場合、ビデオ通話とかDocker動かしたりとかしなければDockからの給電で問題なく充電される。</p>
<p><a href="https://www.ankerjapan.com/products/a8396" target="_blank" rel="noopener noreferrer">https://www.ankerjapan.com/products/a8396</a></p>
<h2 id="%E4%BA%8C%E9%85%B8%E5%8C%96%E7%82%AD%E7%B4%A0%E6%BF%83%E5%BA%A6%E8%A8%88" tabindex="-1">二酸化炭素濃度計</h2>
<p>部屋の空気が悪いなと感じることが増えたので二酸化炭素濃度計を買ってみた。あくまで目安って感じだけど、そこそこ精度良く換気のタイミングがわかって良い。</p>
<p><a href="https://www.amazon.co.jp/gp/product/B09GY891CN" target="_blank" rel="noopener noreferrer">https://www.amazon.co.jp/gp/product/B09GY891CN</a></p>
<h2 id="stream-deck-mk.2" tabindex="-1">STREAM DECK MK.2</h2>
<p>誰かが使っているのを見て便利そうだったので買った。やはり物理ボタン最高。MeetingBarというアプリと連携させるとボタン1つで次に参加するMTGのURLが開けるのでとても便利で最高。</p>
<p><a href="https://www.elgato.com/ja/stream-deck-mk2" target="_blank" rel="noopener noreferrer">https://www.elgato.com/ja/stream-deck-mk2</a><br />
<a href="https://meetingbar.onrender.com/" target="_blank" rel="noopener noreferrer">https://meetingbar.onrender.com/</a></p>
<h2 id="sony-srs-xb13%EF%BC%88%E3%83%9D%E3%83%BC%E3%82%BF%E3%83%96%E3%83%AB%E3%82%B9%E3%83%94%E3%83%BC%E3%82%AB%E3%83%BC%EF%BC%89" tabindex="-1">SONY SRS-XB13(ポータブルスピーカー)</h2>
<p>部屋で音楽聴く用のスピーカーが欲しかったのでSONY SRS-XB13を買った。1つでも使えるんだけど、2つ買ってスピーカー同士を接続することでステレオ再生ができるようになる。家ではステレオモードで使ってる。音も良いしコンパクトなので置き場所に困らないのが良い。<br />
充電がちょっと面倒なのがデメリットかな。</p>
<p><a href="https://www.sony.jp/active-speaker/products/SRS-XB13/" target="_blank" rel="noopener noreferrer">https://www.sony.jp/active-speaker/products/SRS-XB13/</a></p>
<h2 id="hibi%EF%BC%88%E3%83%9E%E3%83%83%E3%83%81%E5%9E%8B%E3%81%8A%E9%A6%99%EF%BC%89" tabindex="-1">hibi(マッチ型お香)</h2>
<p>前々から気になっていたけど買ってみたらけっこう良かった。マッチ型なので燃え尽きるまでが早く匂いが残りすぎないのがよい。気分を切り替えたいときにちょうどよい。</p>
<p><a href="https://hibi-jp.com/" target="_blank" rel="noopener noreferrer">https://hibi-jp.com/</a></p>
<h2 id="%E3%82%A2%E3%82%AB%E3%82%AA%E3%82%A2%E3%83%AB%E3%83%9F-%E3%82%A2%E3%83%AB%E3%83%9F%E3%83%95%E3%83%A9%E3%82%A4%E3%83%91%E3%83%B3" tabindex="-1">アカオアルミ アルミフライパン</h2>
<p>最近パスタを作ることが多いので買った。軽いのでフライパン振りやすい、ソースの色がわかりやすい、弱火で調理しやすい、メンテが楽、焦げ目がつきやすくて良い、かっことくてテンション上がる。みんなアルミフライパンを買おう。</p>
<p><a href="https://www.akaoshop.co.jp/SHOP/221.html" target="_blank" rel="noopener noreferrer">https://www.akaoshop.co.jp/SHOP/221.html</a></p>
<h2 id="%E3%83%8B%E3%83%88%E3%83%AA-%E3%83%80%E3%82%A4%E3%83%8B%E3%83%B3%E3%82%B0%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB" tabindex="-1">ニトリ ダイニングテーブル</h2>
<p>ダイニングテーブルが狭くて使いにくかったのと安物のソファがダメになってきたので一式買い替えた。今回はソファじゃなくて椅子とスツールを買った。とても気に入っている。</p>
<p><a href="https://www.nitori-net.jp/ec/product/4021859/" target="_blank" rel="noopener noreferrer">https://www.nitori-net.jp/ec/product/4021859/</a><br />
<a href="https://www.nitori-net.jp/ec/product/4021853s/" target="_blank" rel="noopener noreferrer">https://www.nitori-net.jp/ec/product/4021853s/</a></p>
<h2 id="asus-rt-ax3000-v2%EF%BC%88%E3%83%AB%E3%83%BC%E3%82%BF%E3%83%BC%EF%BC%89" tabindex="-1">ASUS RT-AX3000 V2(ルーター)</h2>
<p>家のルーターがポンコツだったので、Amazonで良さげなやつを買った。他のルーターとの比較はできないけど、Wi-Fi経由の通信速度が400〜500Mbpsくらい出るようになったので満足している。(以前はMAX200〜300Mbpsくらい)</p>
<p><a href="https://www.amazon.co.jp/dp/B09R44RVCL" target="_blank" rel="noopener noreferrer">https://www.amazon.co.jp/dp/B09R44RVCL</a></p>
<h2 id="acr-pro-alice-plus%EF%BC%88%E3%82%AD%E3%83%BC%E3%83%9C%E3%83%BC%E3%83%89%EF%BC%89" tabindex="-1">ACR Pro Alice Plus(キーボード)</h2>
<p>アリスレイアウトのキーボードを買った。分割キーボードを買おうかと思ったんだけどちょうどよさそうなやつがなくて悩んでいたときに遊舎工房のサイトでこれを見つけた。アリスレイアウト慣れるまでは使いにくかったが、慣れたらとても打ちやすくて良い。手の間隔を広く保てるし肘を外に張りながら打てるので楽。もう普通のキーボードには戻れない気がする。</p>
<p><a href="https://en.akkogear.com/product/acr-pro-alice-plus-mechanical-keyboard/" target="_blank" rel="noopener noreferrer">https://en.akkogear.com/product/acr-pro-alice-plus-mechanical-keyboard/</a></p>
2022-12-30T00:00:00Z
/posts/2022-12-30-look-back/
<p></p><details class="table-of-contents"><summary class="toc-container-header">TOC</summary><ul><li><a href="#%E4%BB%95%E4%BA%8B">仕事</a><ul><li><a href="#ubie%E3%81%AB%E8%BB%A2%E8%81%B7">Ubieに転職</a></li><li><a href="#%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E3%81%84%E3%81%86%E8%82%A9%E6%9B%B8%E3%81%8D%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%9F">デザインエンジニアという肩書きになった</a></li></ul></li><li><a href="#%E3%82%A2%E3%82%A6%E3%83%88%E3%83%97%E3%83%83%E3%83%88%E7%B3%BB">アウトプット系</a><ul><li><a href="#web%2Bdb-press%E3%81%A7%E7%89%B9%E9%9B%86%E8%A8%98%E4%BA%8B%E3%82%92%E6%9B%B8%E3%81%84%E3%81%9F">WEB+DB PRESSで特集記事を書いた</a></li><li><a href="#%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%81%AE%E4%BA%BA%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%9F">デザインシステムの人になった</a></li><li><a href="#%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E8%AA%AD%E6%9B%B8%E6%97%A5%E5%92%8C%E3%81%AB%E5%8F%82%E5%8A%A0">デザイン読書日和に参加</a></li></ul></li><li><a href="#%E7%A7%81%E7%94%9F%E6%B4%BB">私生活</a><ul><li><a href="#%E7%AD%8B%E3%83%88%E3%83%AC%E3%82%92%E5%A7%8B%E3%82%81%E3%81%9F">筋トレを始めた</a></li><li><a href="#%E3%81%9F%E3%81%8F%E3%81%95%E3%82%93%E6%97%85%E8%A1%8C%E3%82%92%E3%81%97%E3%81%9F">たくさん旅行をした</a></li><li><a href="#%E3%83%87%E3%82%B9%E3%82%AF%E3%81%BE%E3%82%8F%E3%82%8A%E3%81%AE%E7%92%B0%E5%A2%83%E3%82%92%E6%95%B4%E3%81%88%E3%81%9F">デスクまわりの環境を整えた</a></li><li><a href="#%E3%83%A9%E3%82%A4%E3%83%96%E3%81%AB%E8%A1%8C%E3%81%A3%E3%81%9F">ライブに行った</a></li><li><a href="#%E3%82%AA%E3%83%95%E3%83%A9%E3%82%A4%E3%83%B3%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%AE%E3%82%B9%E3%82%BF%E3%83%83%E3%83%95%E3%82%84%E3%81%A3%E3%81%9F">オフラインイベントのスタッフやった</a></li><li><a href="#%E5%A4%A7%E3%81%8D%E3%81%AA%E7%97%85%E6%B0%97%E3%82%92%E3%81%97%E3%81%AA%E3%81%8B%E3%81%A3%E3%81%9F">大きな病気をしなかった</a></li></ul></li><li><a href="#%E6%9D%A5%E5%B9%B4%E3%81%AE%E6%8A%B1%E8%B2%A0">来年の抱負</a></li></ul></details><p></p>
<p>2022年を振り返る。</p>
<h2 id="%E4%BB%95%E4%BA%8B" tabindex="-1">仕事</h2>
<h3 id="ubie%E3%81%AB%E8%BB%A2%E8%81%B7" tabindex="-1">Ubieに転職</h3>
<p>Ubie株式会社に転職した。ありがたいことにいくつかの会社からオファーを貰っていたので転職先を決めるときはとても悩んだけど、Ubieに決めてよかったと思える1年だった。<br />
仕事の振り返りとか来年の抱負とかはまた別途書く。</p>
<h3 id="%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E3%81%84%E3%81%86%E8%82%A9%E6%9B%B8%E3%81%8D%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%9F" tabindex="-1">デザインエンジニアという肩書きになった</h3>
<p>最初はデザインエンジニアってなんだろうと思っていたが、今はとてもしっくりきている。「フロントエンドエンジニア」のときに足りないと思っていた要素がうまくはまった感じ。<br />
これも仕事の振り返りと一緒に書く。たぶん。</p>
<h2 id="%E3%82%A2%E3%82%A6%E3%83%88%E3%83%97%E3%83%83%E3%83%88%E7%B3%BB" tabindex="-1">アウトプット系</h2>
<h3 id="web%2Bdb-press%E3%81%A7%E7%89%B9%E9%9B%86%E8%A8%98%E4%BA%8B%E3%82%92%E6%9B%B8%E3%81%84%E3%81%9F" tabindex="-1">WEB+DB PRESSで特集記事を書いた</h3>
<p>初めてWEB+DB PRESSで記事を書いた。WEB+DB PRESSで記事書いてみたいと思っていたので、実際に書ききることができて嬉しい。記事書くのけっこう大変だったので連載持ってる人はすごいなと思った。けっこうたくさんの人に読んでもらえたみたいで、オフラインのイベントで「記事読みました!」って話しかけられることが増えたのも嬉しかった。<br />
来年も何かしらの本か記事か書いていきたい。</p>
<p><a href="https://gihyo.jp/magazine/wdpress/archive/2022/vol129" target="_blank" rel="noopener noreferrer">https://gihyo.jp/magazine/wdpress/archive/2022/vol129</a></p>
<h3 id="%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%81%AE%E4%BA%BA%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%9F" tabindex="-1">デザインシステムの人になった</h3>
<p>デザインシステム関連の記事や同人誌を書いたりイベント登壇したりがとても増え、デザインシステムの人として認識されることが多くなった。9月と12月で2回ずつデザインシステムネタの登壇をした。<br />
個人的にはデザインシステムに思い入れがあるわけではなく必要だからやってるくらいの感覚なんだが、需要あるんだなあと思う。来年も引き続きデザインシステムの人をやっていこうかな。</p>
<p>イベント</p>
<ul>
<li><a href="https://jtx.connpass.com/event/254364/" target="_blank" rel="noopener noreferrer">プロダクトデザイナー Meetup 〜10X・MoT・Ubieが進めるBtoBtoC領域のデザイン〜</a></li>
<li><a href="https://raksul.connpass.com/event/255844/" target="_blank" rel="noopener noreferrer">Design System Build #01 -デザインシステム構築の様々なアプローチ-</a></li>
<li><a href="https://conf2022.pwanight.jp/" target="_blank" rel="noopener noreferrer">PWA Night CONFERENCE 2022</a></li>
<li><a href="https://findy.connpass.com/event/267065/" target="_blank" rel="noopener noreferrer">デザインシステム構築の第一歩 〜takanoripさんとSakitoさんに学ぶ</a></li>
</ul>
<p>記事</p>
<ul>
<li><a href="https://zenn.dev/ubie_dev/articles/7a6413af237eae" target="_blank" rel="noopener noreferrer">Ubie Design Tokensを公開しました</a></li>
<li><a href="https://zenn.dev/ubie_dev/articles/44d0eab3458cc0" target="_blank" rel="noopener noreferrer">Ubieで利用しているアイコンをnpmパッケージとして公開しました!</a></li>
</ul>
<h3 id="%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E8%AA%AD%E6%9B%B8%E6%97%A5%E5%92%8C%E3%81%AB%E5%8F%82%E5%8A%A0" tabindex="-1">デザイン読書日和に参加</h3>
<p>デザイン読書日和にサークル参加してデザインエンジニアの同人誌を売った、同人誌イベントにサークル参加するのは久しぶりだったけど、インターネットの知り合いにたくさん会えて楽しかった。来年もあれば参加したいな。</p>
<p><a href="https://dezabiyo.studio.site/" target="_blank" rel="noopener noreferrer">第2回デザイン読書日和</a><br />
<a href="https://zenn.dev/takanorip/books/1bda71a5f2affb" target="_blank" rel="noopener noreferrer">ABDUCTION デザインエンジニアについての観察と考察</a></p>
<h2 id="%E7%A7%81%E7%94%9F%E6%B4%BB" tabindex="-1">私生活</h2>
<h3 id="%E7%AD%8B%E3%83%88%E3%83%AC%E3%82%92%E5%A7%8B%E3%82%81%E3%81%9F" tabindex="-1">筋トレを始めた</h3>
<p>健康と見た目のためにダンベルとベンチを買い筋トレを本格的に始めた。ジムに通うことも考えたが出不精なのとマスクをして筋トレするのが嫌だったので家で筋トレできる設備を整えた。<br />
始めて半年ちょいだしサボりも多いけどそこそこ筋肉ついて体つきが変わってきた気がする。最初は痩せるために筋トレを始めたが、今はでかくなるために筋トレをしている。来年は腕を太くしていきたい。</p>
<h3 id="%E3%81%9F%E3%81%8F%E3%81%95%E3%82%93%E6%97%85%E8%A1%8C%E3%82%92%E3%81%97%E3%81%9F" tabindex="-1">たくさん旅行をした</h3>
<p>今年はここ数年で一番旅行したと思う。神戸、福岡、大阪に行った。遠出すると新しい出会いとか美味しい食べ物とかあって楽しいなと思った。来年は北のほうに行きたい。<br />
あと今年は湯河原に2回くらい行ったりみなとみらいに泊まったりと近場で宿泊することも多かった。近所でもホテルに泊まると特別な感じがしてよかった。</p>
<h3 id="%E3%83%87%E3%82%B9%E3%82%AF%E3%81%BE%E3%82%8F%E3%82%8A%E3%81%AE%E7%92%B0%E5%A2%83%E3%82%92%E6%95%B4%E3%81%88%E3%81%9F" tabindex="-1">デスクまわりの環境を整えた</h3>
<p>オフィスチェアを買い替えたり机の天板を買い替えたり周辺機器を買いまくったりしてデスク環境がとても良くなった。めちゃくちゃお金かかったけど…。さらにリモートワークから抜け出せなくなってしまった。</p>
<h3 id="%E3%83%A9%E3%82%A4%E3%83%96%E3%81%AB%E8%A1%8C%E3%81%A3%E3%81%9F" tabindex="-1">ライブに行った</h3>
<p>電気グルーヴとDOPING PANDAのライブに行った。去年と一昨年は全然行けなかったので久しぶりのライブ参戦だった。どっちのライブもめちゃくちゃ楽しくてやっぱライブは最高。</p>
<h3 id="%E3%82%AA%E3%83%95%E3%83%A9%E3%82%A4%E3%83%B3%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%AE%E3%82%B9%E3%82%BF%E3%83%83%E3%83%95%E3%82%84%E3%81%A3%E3%81%9F" tabindex="-1">オフラインイベントのスタッフやった</h3>
<p>Spectrum Tokyo Design Fes 2022のスタッフをやった。学園祭みたいで楽しかったがとても疲れた。イベントのスタッフをやるのはHTML5conf以来なきがする。</p>
<h3 id="%E5%A4%A7%E3%81%8D%E3%81%AA%E7%97%85%E6%B0%97%E3%82%92%E3%81%97%E3%81%AA%E3%81%8B%E3%81%A3%E3%81%9F" tabindex="-1">大きな病気をしなかった</h3>
<p>やはり健康第一である。</p>
<h2 id="%E6%9D%A5%E5%B9%B4%E3%81%AE%E6%8A%B1%E8%B2%A0" tabindex="-1">来年の抱負</h2>
<ul>
<li>来年は大学に行きます。武蔵野美術大学か京都芸術大学の通信教育課程に入学しようかなと考えていて、卒業後は産業技術大学院大学に行きたい。(ムサビが良さそうだけどとても忙しそうなので社会人やりながらできるか不安)</li>
<li>デザイン系のカンファレンスに登壇したい。</li>
<li>二の腕40cmを目指す。</li>
</ul>
2023-01-02T00:00:00Z
/posts/2023-01-02-wanna-do-list/
<ul>
<li>美大生になる
<ul>
<li>単位を落とさない</li>
<li>留年しない</li>
<li>レポートは計画的にやる</li>
</ul>
</li>
<li>海外旅行行く
<ul>
<li>シンガポール、台湾、オーストラリアあたり</li>
<li>ある程度英語話せるようにしておきたい</li>
<li>パスポート大丈夫…?</li>
</ul>
</li>
<li>東北or北海道に旅行に行く</li>
<li>積読を消化する
<ul>
<li>月1冊くらい</li>
<li>読書ログをきちんと付ける</li>
</ul>
</li>
<li>筋トレ頑張る
<ul>
<li>二の腕40cm目指す</li>
<li>ダンベルプレス32kg(片腕)</li>
<li>懸垂補助なし15回</li>
<li>体重70kg</li>
</ul>
</li>
<li>アウトプット増やす
<ul>
<li>仕事のこと</li>
<li>個人ブログ</li>
<li>美大のこと</li>
</ul>
</li>
<li>お金を貯める
<ul>
<li>学費のこともあるしお金の使い方見直す</li>
</ul>
</li>
<li>サークルリード頑張りたい
<ul>
<li>マネジメント力つける</li>
<li>作業タスクでいっぱいにならないよう配分する</li>
</ul>
</li>
</ul>
2023-03-19T00:00:00Z
/posts/2023-03-19-what-we-make/
<p>これは<a href="https://kichijojipm.connpass.com/event/276411/" target="_blank" rel="noopener noreferrer">吉祥寺.pm32【オンライン】</a>で話した内容を記事にしたものだ。</p>
<p>今年で社会人9年目の僕ですが、最近僕にとって「何を作るか」が大事になってきたな、という話を書く。</p>
<h2 id="%E3%82%B9%E3%82%AD%E3%83%AB%E3%82%92%E7%A3%A8%E3%81%8D%E3%81%9F%E3%81%8B%E3%81%A3%E3%81%9F%E7%A4%BE%E4%BC%9A%E4%BA%BA1%E3%80%9C5%E5%B9%B4%E7%9B%AE" tabindex="-1">スキルを磨きたかった社会人1〜5年目</h2>
<p>僕は大学を中退して就職したので、社会人になってから数年間はスキルを磨きたい一心で仕事をしていた。<br />
新卒でメガベンチャーに入社したような同年代の人たちと自分を比較してしまって、スキルが身につかないことに焦りを感じていた。<br />
転職するときはモダンな技術を採用しているか、プログラミングのスキルがある人が在籍しているか、新しい技術領域にチャレンジできるか、などに注目して会社を選んでいた。<br />
何を作るかも気にしてはいたが一番大きい関心事は「自身のスキルアップ」だった。</p>
<p>そこで気づいたことは以下のとおりだ。</p>
<ul>
<li>スキルアップすれば市場価値は上がるが、限界がある。結局儲かっている会社はスキルが低くても給与が良い。</li>
<li>どんなに優秀な人材がいても、資金力がないと身動きとりにくい。資金がないと心が荒む。</li>
<li>何を作るかを考えないと技術をうまく使えない。</li>
<li>優秀なプログラマーには勝てないし若手もたくさん出てくるので、同じ土俵で戦わないことが大事。</li>
<li>僕はプログラミング自体には興味がないし、プログラミングが楽しいわけでもない。(できるけど好きではない。)</li>
</ul>
<h2 id="%E3%80%8C%E3%81%A9%E3%81%86%E3%82%84%E3%81%A3%E3%81%A6%E4%BD%9C%E3%82%8B%E3%81%8B%E3%80%8D%E3%82%88%E3%82%8A%E3%80%8C%E4%BD%95%E3%82%92%E4%BD%9C%E3%82%8B%E3%81%8B%E3%80%8D%E3%81%A7%E5%8B%9D%E8%B2%A0%E3%81%97%E3%81%9F%E3%81%84" tabindex="-1">「どうやって作るか」より「何を作るか」で勝負したい</h2>
<p>最初はスキルアップしないと生き残れないと思っていたけど、そもそも同じ土俵で戦わなければ良いんだと気づけた。<br />
「どうやって作るか」ではなく「何を作るか」「何を作ったか」で勝負すれば良いのだ。それなら僕でも生き残っていけるかもしれない。</p>
<h2 id="%E6%8C%81%E7%B6%9A%E6%80%A7%E3%81%AE%E3%81%82%E3%82%8B%E3%82%AD%E3%83%A3%E3%83%AA%E3%82%A2%E8%A8%AD%E8%A8%88" tabindex="-1">持続性のあるキャリア設計</h2>
<p>Howに焦点を当ててキャリア設計するよりもWhatに焦点を当てたほうが、持続的に活躍できるんじゃないかと思う。もちろん人によって差があるけど。<br />
スキルを身に着けて自分の市場価値を上げることで給与を上げるんじゃなく、自分のプロダクトをより儲かるプロダクトにしていくことで給与アップ、キャリアアップしていくみたいな。<br />
何を作るか考えてプロダクトの価値を上げていけるエンジニアって今のところけっこう貴重だし、いろんな組織で長く活躍できそう。</p>
<h2 id="ai%E3%81%AE%E5%87%BA%E7%8F%BE%E3%81%A7%E3%82%B9%E3%82%AD%E3%83%AB%E3%81%8C%E9%99%B3%E8%85%90%E5%8C%96%E3%81%99%E3%82%8B" tabindex="-1">AIの出現でスキルが陳腐化する</h2>
<p>ここ数日インターネットはGPT-4の話題で持ちきりだ。<br />
Generative AIがいきなりプログラマーを代替するとは思わないが、プログラミングという行為が民主化しプログラマーの占有物でなくなる未来はすぐそこまできていると思う。</p>
<p>AIがコードを書いてくれるようになっても、「何を作るか」を考えるのは人間だ。<br />
何を作るか決められなければAIに指示を出せない。<br />
これからの時代は「何を作るか」を考えられる人間の時代になるかもしれない。</p>
<h2 id="%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%8B%E3%82%89%E3%83%97%E3%83%AD%E3%83%80%E3%82%AF%E3%83%88%E3%83%87%E3%82%B6%E3%82%A4%E3%83%8A%E3%83%BC%E3%81%B8" tabindex="-1">デザインエンジニアからプロダクトデザイナーへ</h2>
<p>僕は今デザインエンジニアとして働いているけど、もっとプロダクトデザイナーとして成長していきたいなと思っている。<br />
プロダクトデザイナーとはまさに「何を作るか」を考え、「何」の部分を具体化していく職業だ。<br />
具体化していくところはデザインエンジニアの得意分野であるけど、その前段をもっと精緻に考えられるようになりたい。<br />
デザインエンジニア的なアプローチでプロダクトデザインできるようになれたら最高だな。頑張ります。</p>
2023-06-27T00:00:00Z
/posts/2023-06-27-side-job/
<p>技術に立脚したデザイン顧問業の副業を検討し始めました。ご相談お待ちしております。</p>
<h3 id="%E8%87%AA%E5%B7%B1%E7%B4%B9%E4%BB%8B" tabindex="-1">自己紹介</h3>
<p>デザイン制作会社のアシスタントディレクター、Webフロントエンドエンジニアを経て、現在はUbie株式会社でデザインエンジニアとして働いています。<br />
主な担当業務は情報設計、機能設計、UIデザイン、デザインシステムの構築・運用、Webフロントエンドの開発などです。</p>
<p>また本業の他に、デザインシステムやウェブフォントについての書籍執筆や各種イベントへの登壇、若手エンジニアへのメンター業務なども行っています。</p>
<ul>
<li>ポートフォリオ: <a href="https://takanorip.com/" target="_blank" rel="noopener noreferrer">https://takanorip.com/</a></li>
<li>blog: <a href="https://blog.takanorip.com/" target="_blank" rel="noopener noreferrer">https://blog.takanorip.com/</a></li>
<li>Wnatedly: <a href="https://www.wantedly.com/id/takanorip" target="_blank" rel="noopener noreferrer">https://www.wantedly.com/id/takanorip</a></li>
</ul>
<h3 id="%E3%82%B9%E3%82%AD%E3%83%AB" tabindex="-1">スキル</h3>
<ul>
<li>Webフロントエンド開発</li>
<li>UIデザイン</li>
<li>情報設計</li>
<li>Figma</li>
</ul>
<h3 id="%E5%8B%9F%E9%9B%86%E3%81%99%E3%82%8B%E4%BB%95%E4%BA%8B%E5%86%85%E5%AE%B9" tabindex="-1">募集する仕事内容</h3>
<ul>
<li>デザインシステム、共通コンポーネントなどの設計レビュー</li>
<li>CSSに関する相談</li>
<li>プロダクトレビュー</li>
<li>Figmaを活用したデザインフロー設計支援</li>
<li>デザイン組織設計支援</li>
<li>エンジニア/デザイナーのコミュニケーション改善支援</li>
<li>ウェブフォントに関する相談</li>
<li>ワークショップ開催</li>
<li>メンター業務</li>
</ul>
<h3 id="%E3%81%8A%E5%8F%97%E3%81%91%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E4%BB%95%E4%BA%8B" tabindex="-1">お受けできない仕事</h3>
<ul>
<li>具体的なUIデザインやWebフロントエンド開発など</li>
<li>Webサイト制作</li>
</ul>
<h3 id="%E8%AB%B8%E6%9D%A1%E4%BB%B6" tabindex="-1">諸条件</h3>
<ul>
<li>時給: 時給8000円〜</li>
<li>稼働時間: 4-6時間/週、月20時間が上限</li>
<li>勤務地: オンライン(オフラインでの打ち合わせなどは要相談)</li>
</ul>
2023-11-22T00:00:00Z
/posts/2023-11-22-bipolar-disorder/
<p>最近数週間調子が悪いなと思っていたらベッドから起きれないくらい落ち込んでしまったので、病院に行った。<br />
これまで何回かうつ病が再発したことがあり不思議には思っていたが、うつ病はよく再発するって聞くしそんなもんかと思いながら病院へ向かった。</p>
<p>再発が多いことや調子が良いときと悪いときの差がすごいという話をしたら、医者に双極性障害ではと診断された。薄々そうかもなと思っていたが、実際言われるとびっくりした。<br />
今までうつが良くなったと思っていたのは、ただ周期を抜けただけだったみたい。</p>
<p>今回は話の流れで躁状態がありそうという話をしたが、自力で軽い躁状態を病期だと認知するの、かなり無理ゲーなのではと思う。診断に時間がかかる病気だと言われているのも納得。<br />
調べてみたら双極性障害の日本での有病率は1%くらいらしく、意外とめずらしい病気でもないらしい。</p>
<p>今はちょっと仕事を休みつつラツーダという気分安定薬を飲んで治療をしている。幸い幻覚を見たり不眠不休で活動したりみたいな強い躁状態にはなってないので大丈夫そう。お酒飲めなくなるのがつらい。</p>
2023-11-22T00:00:00Z
/posts/2023-11-22-okinawa/
<p>11月18日に開催されたフロントエンドカンファレンス沖縄2023で登壇してきた。<br />
<a href="https://frontend-conf.okinawa.jp/" target="_blank" rel="noopener noreferrer">https://frontend-conf.okinawa.jp/</a></p>
<p>全国いろんなところでカンファレンスがあると旅行の口実になって良い。沖縄に行くのは7年ぶりだったのでとても楽しみだった。久しぶりの長め登壇だったので資料作るのは少し大変だったが。今回は1日有給休暇を取得して2泊3日で旅行した。</p>
<p>6:35羽田空港発というとんでもなく朝早い飛行機で沖縄に向かった。早朝の羽田空港は売店すら空いておらずとても不便だった。コンビニに寄ってから行けばよかったと後悔した。空港までタクシーで移動したのが裏目に出た。<br />
ANAの機内Wi-Fiを利用したが、YouTubeなどの動画サービスは利用できないようになっていて困った。それならそうと注意書きに書いておいてほしい。天気も悪く窓の遠い席だったので景色も楽しめず、仕方がないので寝た。<br />
飛行機は向かい風の影響で30分ちょっと遅れて那覇空港に到着した。これのせいで予約していた高速バスに乗れなかったが、別の乗り合い高速バスにちょうど乗ることができた。目的地の美ら海水族館に着いたのは13時過ぎで、予定していたより1時間遅い到着であった。沖縄って案外広いんだね。<br />
美ら海水族館に来たのは10年ぶりくらいで、当時のことを思い出して懐かしくなった。ジンベイザメは相変わらずでかかった。到着が遅れたことでジンベイザメの餌やりを見ることができて、結果オーライとはまさにこのこと。あまりゆっくりはできなかったが、沖縄に来たぞって感じがして楽しかった。次はもっとゆっくり観光したい。</p>
<p><img src="https://lh3.googleusercontent.com/pw/ADCreHdugxsWHBrmQQbWnNNENZBLuD6x-5V34NDV8F3iAp7HMBF3KvD2DRpbmznc9jgBlz7n1s3OaBcUmhRYwa34d-XLSH0hai_uiZHsouhxICinVYpVfFMHhtY5GESd57bGI60e30N45lxe97upTfuN4fAJ8KmJmTE1uUzMjkD5TVAC8XfUiGtnRyVIsn8oq3lVK7bx-y5MExWJ7JC7Ae3zIef9zKPU5bM092ihaQ5v-Z1xPiuexXH33Toub9qLMWU2-OqcGPJW0IMxzF3MOWjnZ9q7sAhkHW0i4G9_t1gmQLP5EA6CoqSYSYVp2QhepC7DhrfrFDoVB66naylLnNOXBWusM3SCmoR1X7H3MafLoTEsymwpSP7IaadDejLh4iRN9sVGdgwHVTjh_y9du0SURfmXbtoqmxp5w1ptAEtfVQw-L-J7_38abBkcZjXmHS8Abc0cszVhYUcXYk5qld5Ly_GNcMbl9ujL1oG2fiehrDdCkZFbwrMayRzwxnZ060SayowJAIuaSqxdHDny-pWjald3JA5IrHjsKfI5WbDD6aUDChUiEGpTOFvZMicKSUom_-DWDj35NqZJUgvcmEmjrykatQlVJDdk13b7xld7HV0teOdPKfSznskbtE4r12sISOkHAMR2xTHU45r7xSllMTLH1MIDD3WyFcisoMfUOD8JZfTd06J2Kpuc-qihBEwoxY652L2U7JDGSXuPTMIfCJcz4SQvJtBqSd_jQqGYrbjY-a3WKgvAnpvnBWEGYioXkSMj-TZqXXEWerGdzMf3-bJh2-PecAts2mGE1qY8P86ODRB1-QemJktWms2hks9L28IBXy3CPSbKs-UXB5jGkz7IRVqcik80mt6ouZwHpxjzO4-4OF4hIajM3fjJKhbQ1Mq35YpPCDWLs6WoykEPsQnlAoekQ3hgOguNyRbvIH6EtKMrLuThucRggmOo-sSUOdp4F8hWLbROPGU=w1440-h810-no?authuser=0" alt="ジンベイザメがエサを食べているところ" loading="lazy" /></p>
<p>そのあとまた高速バスに乗りホテルへと向かった。那覇はかなり都会で、前に来たときよりもさらに都会感が強まっていたように感じた。特に那覇バスターミナルのあたりはかなり普通に都会だった。<br />
今回は<a href="https://www.loisir-naha.com/" target="_blank" rel="noopener noreferrer">ロワジールホテル那覇</a>に宿泊した。昔社員旅行で来たときに泊まったホテルで、とても良いホテルだった記憶があったので今回も泊まってみた。記憶の通り良いホテルだった。那覇で宿泊するならおすすめです。</p>
<p><img src="https://lh3.googleusercontent.com/pw/ADCreHeFF6BAfqG_KHPQgfANPA3L8N2HqwsF5T9yyAurC9xehH2XCHB-pamUeGrcoIcVVNmgQJEq3M4XmrHVp3VBcrfKJnjKAhseQq8IciNTk3mv2gasbZPUg9UwFgJjosA3yHJO1teNkzVi-OjEfIlKtDDjkWK-RU2uldbfETzfkDlALUnoFUOMPp5jeLfzHHrnCcRMMtWv2KiSHjrufnHyoWIn6aJwkWErVKZBTbkhLBPqCar1yaOKoU271V8Y2GdcjOXGmLYpryum3I9Jo66TtAP8azlKhcN0ro_uD2_2rtgXLUUSZ6h5DwLgZXMqLZ0OxyqhG-sjxdGj5-niTkH6yUhmjnAKZCTTvvGwAr0Vt3IaI5qY3JGQWmpjF0Eu0RcJ0VrwlQDk-Fp_jZbc6pFpe8dUsB46qj1PR03FpPTJvmDaqZX9jFqBJIIreVyDyujFJi1xMJINfU-fho8SDC6mK33512GHQUaGxl_2whk9rl5W8N50wYW6ufDQPBHLsScSjXuQMkobWws5VZZDoWAM3ZZH7kokOLyiCTCPqYRQZnB7wiEUryY3LNFNmRKDyEa57CkF7y_b6Zxi_A7NLPqb0mkFtBwMWeyJu0VHMs9fawFgp6WGVncfHTv1r4DLaceUGCcp_ss-Jl32v3dLvr52luxuQq3UsXsjSebW1sQc908tIDlWaFtOxJdxaVewZOS18K5r1pudfE3UCLGfyYHpov3zSDPYMtBKtBeOYkCohm6AOd_Q6BiY8J3aMRzoePqcc6A5qEH61FL9hsRspYjYm3irBFUo2QKar9MD_9D2vVDoE_JmIkoQsiVnjEjt_0gASi7swV4nzwrMoqfVRQJGwDXwdZ7ZfS5bOr3Jk176BGVW7-gYHZLIWYs10D_AYhNfMICqJv9DsverCj1Hu64rvTp1bToXQ98KxoOtarfEdI-WKYUaHvZGvu8CLu6h0Td597W2yG3i_mKovQI=w1440-h810-no?authuser=0" alt="ロワジールホテル那覇の部屋" loading="lazy" /></p>
<p>チェックインしたあと、ホテルの近くにある沖縄料理屋に行った。<br />
中心部から外れたところにあるお店だったが、ほとんど満席で賑わっていた。観光客より地元の人が多そうな感じ。ホールの店員さんはみんなアジア系の外国人だったが、料理はどれも美味しく大満足だった。<br />
個人的にはジーマーミ豆腐、スクガラス豆腐、人参のシリシリが美味かった。</p>
<p><img src="https://lh3.googleusercontent.com/pw/ADCreHe7pvGn0X-pWkkPpMhMApQzaSiYYemFcjNzBTD1KyQsyEEVkIpceWBK3PIKH5rOyY6WqZGmF6XhU1JD_nTNSJgJmnHevmXadaZvAwOjhi6ht77aYmfgbBVM2hVBA5XKW4CdLaFFLBCu69Apwm66wvobsiYPpFZ9LDnN5wERRoyB8x3vJtHoUiV5clwfBNakM5uCW0D8-Y381aCDMSxJqIbVp7Ff-ffFbR8B3_1kk7SbxZE-n8tf8Og0AioCx28OO1AR71zXF52aNgYaQ-lGhdh1QZpnKLm7rw4IvRX4NVf69z8_4m5VvaZLnJpOFGU0TkqUE0UUODbxmpCAL_yNxq8hhaGXq9BJ_P5GmL8Ha_-UMf4oGQw-PZ2nDlOD7lMqXTp__jlOEGAD3KCCXzLKaysnPJ13SZ3FC-TYXuMcnbs_1bW27FnY2atDk3W8dlTKS7yz9K7y6kZecw7iKZX9-sXrp1ZblMlbscsmtA52yCcg3_mb-yNKqaAxrqnlgtNNUqY7InIF-XnpSK5qRl_1WoBDXYzCk5tJCSogUB9CEEHdD27iHOg7wmiqV4qA-INXoHXIo8sKBpMniS47h37LXxw0MutpHsREQ1sirBheVTMBOnXRvM1NCPrkZJTVBQJjtWXOGd1rljwhOkZQ_R1e7REIf_zGiWNddaomvpyLXobIP1_qcGWqSSJueyDL-78T5I0Su_fKBKtd5bc2nPuQocVeEjuyay5_oWgnXMSztDPKGVBcM7jPHjVy2h6uF4LL7v0dhPjSv9l0ZE1K5RKcY7TenqbNOlTqHzSVh8nD-Q8xfCje0JBIfKtaFbkh1gkdwBqas8bkIQ7SSOzEaA7F6tqBK30BCiIogYPqLzz3QRGPMIJHBSwNK8ViryF2PkmVvChaLWL1ASmuWN6jc2BzGCQfCAbVYpfDTScbvD6zz2oMmxvTzjBLIC-NrpcDJ3YnBNFSQ0XPTj7Cwto=w1440-h810-no?authuser=0" alt="スクガラス豆腐" loading="lazy" /></p>
<p><img src="https://lh3.googleusercontent.com/pw/ADCreHfX-4jjaSA1Npxrupq8nlCKuKU3Nf3IlbY_G0BnZRZpQdxdOevCqKg5RwLcUC8YI2zmO7sas6NZyrPILIV8xDczhIIZz0BlCPCPGDc3NNREYNHdg84HL9FNZt-phae3vdCjbud-jzWermH50LlMbTFKKZqxL3wSvFCURalqGD8VajGZeT-auL8HCg1l8aKQkqB924TGSrVd0REFi807c9sXoW44B6b6GUNgDdmIyiUHGDJpfLeASPSz8km81PHYSWRj56l20CwHvAtxSYFp9Wz7XlGvZXo86d9zYvwmNLEiCXPmDlegyzBB76lts3G6PKjT593jCVLjpVcsJtN90rAIXsEVsnsqCFRq5o6b7g5Ql9lz0GvwkN8w5QzEUPTKEXwIzEG13KvcI8YFOSf640FrJI6zI1RnMyX2_I_FW-lWSHueNhLPeQkXSeYrBsPAdau45Dxhtrp_ydzUtNTf5BAQDKjHBRFXwycrkzL98gd6Fyq_0HWNTn9K50CuZ1ePb9Mu_Nq9VuZjOtQBqHXDA1tLWc3G3MLXkgyQG4KAfEOYKms4yqo5tX6DknhxIje2_BJ_SpK5Dk5K6hF19qqWrlNAu7SDQDVVRQkXKItfN0qs1DC8cWFMIKPq-cQR7e1D3ZA4c2mVhC5bfeA6GTBp_J6NeS7VQrboRaxtyBAlv9yu7KWjzffPXPg5mAX5R2VzJNjXOHBzJM_po_crcDwJs-rkiUWbrwtp8jceGsOuIe6K2G3q9P-k7UTpxMIccKsr8Pqp4eoJTs5rJZJVOcnnpiakO_QLwruEVSHay8Ns-9X4WH6oljpyjuTtKACYH4kvnbk2RMYjWWPu24mU-Xte-cbZnpk_WNGLd0pHBDeJqpExt2UyXiLpSFJpMsXcm2imcQ-ftbIDmeVtgiIOROTmC73Tx5XhtEowIGnxwyBVGQfAe_9bJZoc9aKPKr1AodOnSJEcXM-KFkFGcMY=w1440-h810-no?authuser=0" alt="ホテルからの景色" loading="lazy" /></p>
<p>カンファレンスは最初からほぼ満員で活気があってよかった。10時開始の無料イベントなのに最初から人がたくさんいて都内の大規模カンファレンスとはまた違った雰囲気を感じた。<br />
普段見かけない人の発表が多く、どの発表も面白かった。福岡の会社から来ている人が多かったみたい。東京以外のイベントに参加するとこういう新しい発見というか出会いがあるのが面白い。<br />
昼休みは<a href="https://tsubameuchayaudun.business.site/" target="_blank" rel="noopener noreferrer">つばめ御茶屋御殿</a>というところでソーキそば御膳を食べた。念願のソーキそば、とても美味しかった。出汁はあっさりめで、肉は柔らかさもありつつ肉肉しく食べごたえがある感じ、麺は少しワシっとした食感、ジューシーは出汁がしみしみでそはの汁との相性が抜群だった。どうやら有名なお店らしく納得。</p>
<p><img src="https://lh3.googleusercontent.com/pw/ADCreHcVzDbcBHNWyQY0qW5i2VzBgquXwXwQQHny-zcRagL9cz3ScbYsBSLaAtLJmq6rIhFN86FSYvPySK2eHzzGt_uJ4tTMXhZiJgYkK4pmuZwrsgrBkPeAuwMX-ASm_t--JK6JC3qwbOA73tFzt85PnNnUeRj6FyzdVPbzkBrkazD-Ct0EwodoCSz5RyLTRLKjf1hKeVpuGF7a53k7sd3xVTBrmWBkVqAuFZqGR7aMY7D5KDtfeeJEN4s4JAQ3T0TJHI1LylTi46XT2nf8-tnNtOrH4rMtO80POkOrY6U5v0fBR_dUWP1y64SHMOYAm652vBeejAQUmidTw2sxjogPEtGiNwS8QFUuYk8aUVWx0padYfTTjifvdLMPFFizlwVCeA0Ez0RnufI_7B5xKoBtkOLTdxCOKb-vleg_1Dh4Jdoah2aKxMWxka7oy0j-CwI0QAxtkE_ET6G4FtKKvTJ9zhddh2G-b-EmYjMb_sYxMDCZUR0xx_0vEB3USPqwO0sDj5lVMzUVCvuLQKaF3dFd-odPaq3EOUuqEvAFjy9ZjungetZaVCkrTyVWaVj6NW8R3ZFS-nXjKatMfzdHxtRKpV50161ejmIv-UIaO_gjehSt6aXM2-V4tLK014R8iyEoKRRQkMvkciE4Y5u62rCAD9hZHM5wwh3Q0fkGgh4nxZucJPX47ZDTsXWiibx-3PFAl621POayzVZA-cKtkODjDQJvcFYpPZqe71tzqAhnMbvBocI9Jfno14NskGJu6h4iwKpoeGCI3adhiHE-1LDtR0CnuQoSTWtDufdDLj2fRS3DMny3w3375-NU7B0lojsD7ohqlTfj0Cqgyo1ucuEaEiIkhW4US0OoddnsIIyNSn1gMNtfyD9-M1vBI_EBzuGR5slaSyIlz8sVF5Wm4o-fDe5JoNpY3ivihgX3SXh28yeGLw-Qp18tT9HpZziy8JPyYyIuei9cjtse0hc=w1440-h810-no?authuser=0" alt="つばめのソーキそば" loading="lazy" /></p>
<p>会場近くのおしゃれなコーヒー屋さん <a href="http://www.potohoto.jp/" target="_blank" rel="noopener noreferrer">COFFEE potohoto</a> にも寄った。少しさびれた商店街みたいなところにあって雰囲気がとても良かったし味も美味しかった。コーヒーはアイスコーヒしか飲まないけど、家の近くにこういうコーヒー屋さんあったら通ってしまいそう。</p>
<p><img src="https://lh3.googleusercontent.com/pw/ADCreHd9Wy62Z0P9Xf2tU36JNkySi-LP9gW6eb5VfYPiLVFGGZGmfGxoReZ5FpV5fGxLldtqwflDNgmIkZ24z5GGYimiUvlvP_wSiCFeYpO6xCqcr_GXs8N9O-WOKTufzuOfNJvMCsD_sYi3hETZDqRlIChm5d4vEViMdoSgvueoklc8wQkrUXWCEeVLRzlu4pMQSOpxe6BEhJzIHDfdMWinoTNn54E8YD0IX7xKzkNxgUFNneNWNgIbH8HIhfzZsQmdgQrqxXBFUrkPinLFONjfQbAbbMcoiS4dEJy6zTqlag3MeXFPXaWv1hAtwGW3clN7B5N2YNj3p5zHCFkg1w98KiL1ZFR1Y0W85AbhsZLtz-1YT0ZFVPksk3g4KJw6MdyVPoFu4aVhLSXBuZW5phGx9w0-OUq4bpFyoSv5iMUimcvPZac5FKhe7fORIwN0ZSyDH7P9ar2Yp5Xl8spY604P44oEGivMafhjXIk_qJN3PuiUeq3926fX3h_SnvXguPi6B9C7AZTl5nJdyP3-1Sh6CsBr-ba-w-rLcwUVmDYvSB48aN5q5Advec8LvqvEy58cvtqnI5s0zjiqz7GXm9Fq6nKRCewGhtbk6NqzecqIYZ3PArWFoRBHqn_i5xMVgVZ6SD0GQ6fEu5xHuxPs0qiK-njJKlSClpZ9PH9MVW686FTp698BSFMymz-Kzn3qNurnRfjo-CoHuglczN6dpMxrCJLkMJFuIhjga7lZzHTab7ZL5Hw2KsFoXZV5gXXPZBwzd5IF1V1EaLdrfDNyYKgc_rRikZbl6fnQYzZgfsPiu-g7_jsShfaG1SWrhAXhXdfYLIsw0fuVVLiqzhZireUID0HHbTWTjE48pJiflZ4AgIt9WDnX8lv4fjklOxPD72OAAqHFHQwpCxHiticqGA9rGCaAUs1DAXuvu5eCY63IdprXxoNOTwwYSYC7BR1GlZ_YGUNh2gR-yPBLF4o=w1440-h810-no?authuser=0" alt="COFFEE potohoto" loading="lazy" /></p>
<p>さすがに10時から18時まで人の話を聞いているのは疲れた。過密スケジュールだったにも関わらずイベントがオンスケで終了したのが一番驚いた。時間オーバーする人がほとんどいなくて関心してしまった。でも幕間はほしいので来年はあまり過密なスケジュールにしないでほしい。<br />
懇親会は沖縄料理のお店で開催されたのだが、島唄ライブの音がでかすぎて耳が破壊された。全然会話できなくてつらかった。来年は絶対にやめてほしい。料理も微妙だった。来年は絶対に違うところで開催してほしい。<br />
2次会で行った泡盛バーは良いお店だった。ウイスキーの樽で熟成した泡盛のソーダ割りを飲んだ。泡盛の嫌なクセがなく、ほのかに甘いニュアンスがあってとても美味しかった。DMMの新卒エンジニアたちが泡盛を一緒に買っていて、なんか良いなあと思った。沖縄の締めはステーキらしかったが、その日はちょっと気分じゃなかったので帰った。でも沖縄でステーキ食べておけばよかったなと後悔した。</p>
<p><img src="https://lh3.googleusercontent.com/pw/ADCreHeQp4CzeUOM79jN1tFPyJT3V2REbbF5B0qtcPfH1nDadV28NIube4BYY06VkB5plim66D7ZHrTwxkd85irwozJQcY533-g33f1haTuGAsshUo_z2aECg6tRdBmojZ0j2e09sI4uC1rljjyB1UdPXkkrIpMdIp8_Rrrc5azpNnJt9-nPDoQEkMddkkSaK7_XIg5oxPyRwkXloS8AStwYk8epW91WmWgwFmnwlQ8_OPbdn6iZqmrMr-y91ra6OY-uuWsUJxIY0rBfOqk-jNSIYSUTbSWNh9wOOAFfxftC15B3I1bx5JF37N2u-xv0wCy-7TrdB9hSNoeFyTRCvsTU1t1R3qBw4pVpPvyYe_CbURVWvyiMb09z8saXE-lAePah2Deq7iFGfn18lKDzO4agnkpdPZSTAssPfpUD_V9HPvorxsNGq9rnTXatdwMKjwxfwhoNz8Kv-ttYUyKbddHjNNQbbatrKpZCJJlXzr6KlY-sm0uitpdlT8lSbS_4n13GQlxn-Q_KSm8kVJZoJcKs26TgD3tDE7PjT3SpG9Y8IzwuRqRbyyQ1mDVpicLgkedNcD2q7qeSC4_5eAstb8DA8isdH1UbPApO4WZ_GSVBral10XnCBdRcDnYBLO21NHgXYMnsu4GgrU7Ic1lyYaMzN3kGXfyg2zYhTRPupPa-KtgBjxvHgPBz0baPq-YzDjoikPaRd9tDgWZat2F0_X0p-HfiLzOwHun9b7Pi2fH7diqdiua6ust7SLrxPFHy7e7_DuTWttX3429TiBfKded5CY_drBVjNCjeGEUmvQbwQ8wC5muNeH4eb-lwdaTPzf2KMgnq98Ql9q6bG9fAn0GVW2WnZeOhnqNsyhum8OiopUzA1LKKU5caJfE8bTwC_c0AE3WVQgj_9d1qUq64r2-6_aAD4QugMbKi9Ju021ZpuQrWrYCpToMv0EC1YWmT_smKNjCBtJyOXbLq3VE=w1440-h810-no?authuser=0" alt="泡盛バーのネオン" loading="lazy" /></p>
<p>総じて良い旅行(カンファレンス)だった。来年もあったら行きたいな。次は那覇ではなくビーチの近くでも良いと思います。実行委員のみなさんよろしくお願いします。</p>
2023-11-22T00:00:00Z
/posts/2023-11-22-stop-generating-thumbnails/
<p>今までブログ記事のタイトルを入れたサムネイル画像を生成していたが、作るのやめた。</p>
<p>理由は↓</p>
<ul>
<li>ブログのデプロイを高速化するため
<ul>
<li>SSGなので全部画像を作ってからデプロイしていたので</li>
</ul>
</li>
<li>Twitterででかい画像を表示させようとするとタイトルが表示されない仕様になったため</li>
<li>サムネイル画像の必要性を感じなくなった
<ul>
<li>タイトルが展開されれば問題ないじゃん</li>
</ul>
</li>
<li>デザインを変えるたびにサムネイル画像のデザインを変えるのが面倒</li>
</ul>
2023-11-24T00:00:00Z
/posts/2023-11-24-design-engineer-conference/
<p>いつかデザインエンジニアのためのカンファレンスを開催したい。</p>
<p><a href="https://zenn.dev/takanorip/books/1bda71a5f2affb" target="_blank" rel="noopener noreferrer">この同人誌</a>でも書いたが、デザインエンジニアには2種類の人間がいる。本流であるリアルプロダクトのデザインエンジニアと我々デジタルプロダクトのデザインエンジニアだ。両者の仕事は共通する部分もあればそうでない部分もある。しかしどちらもデザインエンジニアと呼ばれているのでわかりにくいし、一部界隈では「デジタルプロダクトのやつがデザインエンジニアを名乗るな」と言われる事態も起きているとかいないとか。また最近デジタルプロダクトのデザインエンジニアをデザインテクノロジストと呼称することで衝突を回避しようとする動きも見られる。</p>
<p>まあでもいいたいことはわかる。デジタルプロダクトのデザインエンジニアは名乗ったもん勝ちなのに対して、リアルプロダクトのデザインエンジニアになるには工学修士や博士を習得しつつプロダクトデザインに関する高度な教育も完了しなければならない。名乗るためのハードルが圧倒的に違うので一緒にするなと言われるのも納得だ。</p>
<p>でも僕はデザインエンジニアという名前が好きだし、リアルプロダクトでもデジタルプロダクトでもデザインエンジニアって名乗りたい、名乗って良いじゃんという空気を作りたい。デザインエンジニアの本質を明らかにしたい。</p>
<p>そこでまずは両者を招いてお互いの話をしてもらい、お互いがどんなことをしているか知っていく場を作る必要がある。仕事の中身を理解し悩みを共有することで、お互いにリスペクトが生まれ知識の循環が生まれより良い共生関係を築けるんじゃないか。僕はそのためのカンファレンスを開催したい。誰のためでもなくデザインエンジニアと名乗る我々のためのカンファレンス、そういったものが必要なんじゃないかと思う。</p>
<p>あわよくばデザインエンジニアというポジションにもっと注目があつまり、デザインエンジニアとして転職しやすい世の中になってくれたら嬉しい。</p>
<p>もし興味があるとか一緒にやってやってもいいという奇特な人がいたら連絡ください。</p>
2023-11-25T00:00:00Z
/posts/2023-11-25-the-macallan/
<p>最近ウイスキーの収集が楽しい。ウイスキーは開栓後も比較的長く楽しめるお酒であること、開栓しなくてもコレクションとして持っておけるところなどが気に入っている。もちろん味も好き。</p>
<p>世界には幾千ものウイスキーがあり、日々新しいウイスキーも発売されているが、僕にとって The Macallan は特別だ。</p>
<p>僕が The Macallan と出会ったのは、大学生4年目の冬だった。</p>
<p>ある日僕はとある人と待ち合わせをしていた。深夜の待ち合わせでカッコつけたかった僕は、バーでその人と待ち合わせることにした。</p>
<p>部活のOBの先輩に連れて行ってもらったことはあれど、一人でバーに来るのは初めてであったため、僕は緊張しながらバーの重いドアを開けた。そのバーにはカウンター席しかなく、僕の記憶ではかなり狭いお店だったと思う。薄暗い照明の中、僕はそわそわしながら席についた。</p>
<p>度数の高いお酒を飲みたい気分であった僕は、マスターに「ロックで飲むと美味しいウイスキーはありますか??」と訪ねた。そのときマスターが出してくれたお酒が「The Macallan Fine Oak」だった。(熟成年数は忘れた。たぶん12年だった気がする。)</p>
<p>それまで飲んでいた安いウイスキーとは違いアルコールのピリつきはなく、複雑で華やかな味わいが鼻を抜けていった。その瞬間が僕の記憶に焼き付いて、今も忘れられない。後で伝票を見たときは冷や汗をかいたが…。<br />
ウイスキーとはこんなに味わい深いお酒なんだと気づかせてくれた1杯でもあった。わかりやすい味ではなかったが、大人の階段を1つ上った気がした。</p>
<p>後々なんでオーソドックスなマッカランではなく Fine Oak を出してくれたのかなと疑問に思ったが、おそらく僕が若い見た目をしていたから軽めで飲みやすい Fine Oak をあえて選んでくれたのかなと勝手に思っている。</p>
<p>正直決してコスパの良いお酒とは言えない The Macallan だが、僕はこれからもあの日の思い出とともに飲み続けていくだろう。</p>
2023-11-26T00:00:00Z
/posts/2023-11-26-tokyo-art-book-fair/
<p>東京都現代美術館(MOT)で開催されていた Tokyo Art Book Fair に行ってきた。<br />
<a href="https://tokyoartbookfair.com/" target="_blank" rel="noopener noreferrer">https://tokyoartbookfair.com/</a></p>
<p>最終日ということもあり、会場はめちゃくちゃ混雑していた。外国人の参加者も多くて国際色豊かなイベントだった。何回か英語で話しかけられたり、韓国人の出展者とぎこちない英語で会話したりして面白かった。来年もあれば行きたい。</p>
<p>散財した結果はこちら。<br />
<img src="https://lh3.googleusercontent.com/pw/ADCreHdkPD3nAAhVUDPz2ZNyBqiJ-C2qE3eZY-mo3HpYSibW7OuP-gU9DbGVN0ePkjQzaQ9PNRerKNFE58m4nZAxSQqJ_8c-9szN7PeluMVgVXt1YBQ3Bnr0_UYgv4cmfEaXxhe50NfPhpEo6D7z4tR0f2aqIVxUgJdqp0gJIuDnIDHkzivVnBLYQkmi4CFHMnNmcnJaaIBQSLS7-Y3gQtH_SLoi0sX6gqEG90bgw3LGt6zcdHHoH8ulrKQnwJ4NdkPtt67t-1z0syHp9EHBh1TJhGyAKY2mRnWypnAL-RaCFuEYC3K_e0E4lSWKXtSLyAQ8c0MXriyytfIDC6SB2CNoHKWffSSgA55O1v8EwiBP0Wk29QLHZFtoZD3j21013KDp1ZmQJJk5eLOvxZZquQgq0XEIRiOT7gxeqXoZu1nF7u0BF_iKWeLZizrzP_m90DT-_3BgZ5cGjhjquCYFKpMFKQ8QVQpNYcFIgl9hlVNIjTdYMDcLSzaFKIwlw_SHWCCpwxom6vZvsQvJ0gGTTcXTMCzZ-830MlY_FoSRzG1NXXE6lDGfbeLTQVi1-4CJhhTEF9MCHGKcXtNAMSwiocYE7tAK7A9FYY27f9Nel478y9V--uKfU4CvUm8BwXAhc69VDaw2AzFUESBBa-LNPgzIrThUlQU_e0aTbcFwS07AzQZoVwBO4OcaGN-BzVK7WEVgMziQN4-F0sXFYcqqiDkelwt0c90EI7dvBnzP3idplptXgvnfa62qBKIf9mMUHS_kfEG3MeiY15wr-JPLThd3uvtx1MHX2QoMtqWL4MQpTGGEs7ZZbP1otCNVKY3zMTJ7AT30W0iOMeA0R3lTftm4_434RoxcX4GCCEWXf9JQmb5PSJjlqUdHqQI0UFNylV3ZEVbi_Ev44tCCGrmg3dfRirKhI6dFbqt4K3o_nRjOq6_uWdtg1FWxP5p2f5U=w1440-h810-no?authuser=0" alt="Tokyo Art Book Fairで買った本やポスターなど" loading="lazy" /></p>
<p>わりとあらゆるジャンルの本が売っていて、ポップなものから激しめのものまでいろいろな作品が売られていた。普段デザイン関連の本ばかり見ているのでとても新鮮だった。特に海外のアーティストの作品はどれも印象的で、日本にいるとなかなか見かけない題材や表現を見ることができた。</p>
<p>外国の作品の中でも台湾・中国や韓国の人の作品はとても多かった。韓国のリソグラフ印刷所も出展していて、日本から依頼したらどれくらいかかるかとか話ができて楽しかった。</p>
<p>今回本4冊、ポスター1枚、カレンダー1つ、ポストカード1セットを購入した。本2冊とポストカード以外はリソグラフ印刷の作品で、どんだけ好きなんじゃと思った。リソグラフ印刷は色味と質感がいいよね。</p>
<p>あと今回買った<a href="https://tarokaribe.official.ec/items/78490092" target="_blank" rel="noopener noreferrer">「Aim an Arrow at the Rock in the Ocean」</a>という本が面白かった。</p>
<blockquote>
<p>液晶TVにグリッチを発生させた画面をデジタルカメラで撮影し、その画像データをAIが搭載された風景写真認識システムに読み込ませることで、AIは機械学習した記憶をもとにデタラメな風景画をでっち上げる。このようにAIのバイアスを利用することで、苅部は「機械の知性が世界をどう見たがっているか」を引き出させました。そのイメージの数々は奇妙にも美しく、サイケデリックで幻想的なAIの視覚世界を体験させてくれます。<br />
さらに本書では、画像をテキスト化するマルチモーダルAIにそれぞれの画像を読み込ませることで、「AIがこれらのイメージをどう解釈するか」をテキストにして掲載しています。そのアウトプットがまたおもしろく、「深い分析だなぁ」と感心するものから、「え、これがそんなふうに見えるの!?」と驚いてしまうものまで。AIの解釈を通して、この世界に“正しい見方”なんてひとつもないということ、そして、世界は誤読の連鎖でできていることを教えてくれるような1冊になっています。また、苅部によるエッセイ「誤読が星座を結び続ける」をあとがきに収録しています。<br />
</p>
</blockquote>
<p>AI関連の話題が尽きない今だからこそ映える題材と見せ方だなあと感心してしまった。</p>
<p>アートブックフェア、思いの外楽しめたので機会があれば別のイベントにも行ってみようと思う。</p>
2023-11-28T00:00:00Z
/posts/2023-11-28-m575s/
<p><a href="https://x.com/takanoripe/status/1728772752612684177?s=20" target="_blank" rel="noopener noreferrer">https://x.com/takanoripe/status/1728772752612684177?s=20</a></p>
<p>AmazonブラックフライデーでLogicoolのM575sというトラックボールマウスが安くなっていたので買ってみた。<br />
<a href="https://www.amazon.co.jp/gp/product/B08L4ZR79Q?th=1" target="_blank" rel="noopener noreferrer">https://www.amazon.co.jp/gp/product/B08L4ZR79Q?th=1</a></p>
<p>トラックパッドでもそんなに不満はなかったんだけど、</p>
<ul>
<li>スワイプでブラウザバックができない場合がある</li>
<li>手首を常に少し曲げてないといけないのがつらい</li>
<li>手首の接地している部分に腕の重さが乗ってつらい</li>
<li>なんか手首に負担がかかっている気がする</li>
<li>Lightning端子での充電がだるい</li>
</ul>
<p>みたいな小さい不満が積もってきていたので、試しに安い機種を買ってみることにした。</p>
<p>数日使ってみているが、概ね満足している。というか想像していたより快適。食わず嫌いしていたなと思う。<br />
特にマウスに腕の重さを載せれるのが良い。手首が圧倒的に楽。ボタンでブラウザバックできるのも快適。もっといっぱいボタン欲しくなるのでMX Ergoにボタンたくさん搭載されているのも納得。</p>
<p>Webブラウジングやドキュメント作成なんかは間違いなくトラックボールのほうが楽。Figmaを使っているときだけトラックパッドのほうが作業早いと感じるが、慣れれば問題なさそう。もうちょい慣れたらMX Ergo(M575sの上位機種)を買ってもいいなと思った。</p>
<p>Figmaをトラックボールで操作するには設定を少しいじる必要があって、僕はLogicool option+ で1つのボタンに「ジェスチャー ズーム/回転」、もう1つのボタンに「ジェスチャー パン」を割り当てた。本当はズームとパンを1つのボタンに割り当てたかったんだけど、原稿のLogicool options+ではサポートされてないみたい。</p>
<p><img src="https://images.microcms-assets.io/assets/8a67adc8f7bb4e219d83d3dee85054d9/827321892e1a49088cd9ca4a76fba827/m575%20logicool%20options.jpg" alt="Logicool Options+のスクリーンショット" loading="lazy" /></p>
<p>1年くらい使ったら、またレビュー書こうと思う。</p>
2023-12-01T00:00:00Z
/posts/2023-12-01-restart/
<p>今日からぼちぼち仕事を再開した。様子を見ながら働いている。当面は7割くらいの稼働量でやっていく予定。</p>
<p>まだあまり集中力は戻っていないが、しんどさはなくなった。今飲んでいる薬の効果を実感できるまでには6週間くらいかかるらしいので、気長にやっていく。焦っても仕方がない。</p>
<p>急に元気になっても油断するな。同じことを繰り返してはだめだ。今は体に負担をかけないようにして薬を飲むしかない。と言い聞かせる。</p>
<p>年末までもう少し。みなさんもどうか体調には気をつけて。</p>
2023-12-06T00:00:00Z
/posts/2023-12-06-th21/
<p><a href="https://qiita.com/advent-calendar/2023/figma-design" target="_blank" rel="noopener noreferrer">Figma Advent Calendar 2023</a> 6日目の記事です。</p>
<p>AmazonブラックフライデーセールでEPOMAKER TH21というテンキーデバイスを買った。<br />
<a href="https://www.amazon.co.jp/dp/B0BL6QH6NG?th=1" target="_blank" rel="noopener noreferrer">https://www.amazon.co.jp/dp/B0BL6QH6NG?th=1</a></p>
<p>テンキーのメカニカルキーボードで、ホットスワップ対応なのでキースイッチも交換することができる。これはとても嬉しい。<br />
今回はEpomakerのFlamingo軸のものを購入したが、僕は静音リニア軸が好きなので、家に余っていた<a href="https://shop.yushakobo.jp/products/4270" target="_blank" rel="noopener noreferrer">Kailh Midnight Silent V2 Switch / Linearスイッチ</a>に交換した。キーキャップも家に余っていたキーキャップに交換してメインキーボードとおそろいにした。</p>
<p><img src="https://lh3.googleusercontent.com/pw/ADCreHezLxTEr4LI9_ORVo61Ao0QCGRE8QBXoRd3CDsKEREGbv6G8pL_qg__pwLVyJ1Biy6NntueC1iOoctGBXz51Hk2sG4NYFqa3moEB8302Xo6LDWUTRn21jkd4NIkA0tbjYvz6dCz1XzsSvTrH18GdeLugCpC5KwRATHdM3PPt6FffA1dRmmdaYsQF6osQew3SQN0YjgJJ6KEE13aWUvlGuxlSLnuqDX1zc_TxEn4pwTiguzD8OtHLU5WCRZK4ZsmSzup_tEiLYQmHIxYZmP5eyizaOrCyrrTaZHl_KKsWwnHD_lwpZsS1nVyreUJcDsm03OQ5tNR88OAByMgsPrIsG9AudmojGuBlBhtErxKu0FF8CML6r1v3iDBOJqHDUM1MSr8iYc619-Haxk3mj4T-X3yp1MCNqA3JNqIRbuxAKYMGAwV9SSQwL5QD2ZTwR7Z4qLtp8LvnADQ9dKtR5Hd8RU9ybyuKCzyBzRnLaO5RewUzFpyTHh9hF6kAjhvO5j3W55awMMh-vngImEGgepLsZPbfKQnf42P2Olul36oE07C6GlXUlpFXXK8fR1hFYmTO_WooedSZ-2UmWA1SeNx7wffHmJEqe4KkLpFv5EK65yExsESBxMeZMbrOmxxFwRpydAylToq0O3FjClVcikG1bFpsbrB6Uo0Hg6I0pmosjoAxMfkKSPV7JPLcR_Rq4qic_zAnqfeN_GK4pFVqYbGVhetuSUEP3uRGHgFrwApJmLHCxO1dkvgyOcMd0HNoj1F5QEDkYTGlRxZAz_bif9VXaN29ZQp-54OphuZphMT4ra6eQT_InYQMDdCrxXUTJ6Ncydzos-ztAkkiZrKAZ64P2BxQtlSPqAfm7puaCirvbIIf7litAWoWYPaf_YJbS4C4fjhWObcIgyJ_wE3BJjSme0Hb_aWDTRbSWSDC5_AbhG4lVL8Cqcfx8pILoU=s1064-no?authuser=0" alt="諸々交換したEPOMAKER TH21" loading="lazy" /></p>
<p>何か良い使い道はないかと考えた結果、Figma用左手デバイスとして活用することにした。このキーボードはEPOMAKER Driverというソフトウェアからキーマップの変更ができるので、これを利用して各キーにFigmaでよく使うショートカットコマンドを割り当てていった。</p>
<p><img src="https://images.microcms-assets.io/assets/8a67adc8f7bb4e219d83d3dee85054d9/dbab6230983146039e9c67a3eeffa712/TH21.jpg" alt="EPOMAKER Driver" loading="lazy" /></p>
<p>割り当てたキーはこんな感じ。</p>
<p><img src="https://images.microcms-assets.io/assets/8a67adc8f7bb4e219d83d3dee85054d9/bab505db5aa04a60baeaba7b3d056394/Frame%202222.png" alt="キーマップ一覧" loading="lazy" /></p>
<p>以下感想</p>
<ul>
<li>どこに何を設定したか忘れる。覚えるまでは不便。</li>
<li>覚えたあとは便利。特に3つのキーを同時に押すショートカットを片手で入力できるのは便利。</li>
<li>腕を少し開いた状態で作業できるようになるので体への負担が減った気がする。たぶん。</li>
<li>キースイッチを買えられるのはとても良い。みんなもメカニカルキーボード沼においでよ。</li>
</ul>
<p>いろんな左手デバイスあるけど、7,000円弱という手頃な価格、キースイッチやキーキャップを交換して楽しめる、キーマップが簡単に変更できる、マクロの設定ができる、キーの数が多い、などなどを考えるとかなり良い製品だと思う。<br />
ノブが必要なくてキー数が多い左手デバイスを探している人におすすめのキーボードだとだと思う。</p>
<p>みんなぜひ買いましょう。</p>
2023-12-10T00:00:00Z
/posts/2023-12-10-kyoto-art-university/
<p><a href="https://adventar.org/calendars/9433" target="_blank" rel="noopener noreferrer">社会人学生 Advent Calendar 2023</a> 10日目の記事だ。</p>
<p>2023年4月から京都芸術大学の通信教育部 芸術学コースに入学し、芸術学を学んでいる。入学してみてどうだったかを軽く振り返ってみたいと思う。</p>
<h2 id="%E8%8A%B8%E8%A1%93%E5%AD%A6-%3D-%E8%8A%B8%E8%A1%93%E3%82%92%E3%81%A9%E3%81%86%E6%89%B1%E3%81%86%E3%81%8B%E3%81%AE%E5%AD%A6%E5%95%8F" tabindex="-1">芸術学 = 芸術をどう扱うかの学問</h2>
<p>なんで芸術学コースに入学したかというと、せっかく大学に通うのだからアカデミックなことを勉強したいと思ったのと、学芸員の資格を取ってみたいなと思ったのが理由だ。<br />
近代デザインの歴史について興味があって本を読んだりしているなかで、芸術とか工芸とかをもっと深く理解しないとわからない話に多く出会ったというのもある。</p>
<p>入学してからはずっと各地域の芸術の歴史や芸術作品の背景知識などを勉強している。正直あまり面白い授業は多くないが、今まで触れてこなかった知識に触れることができるのは楽しい。こういうものが近代デザインにも影響を及ぼしているのかなーとか考えると楽しい。</p>
<h2 id="%E6%8E%88%E6%A5%AD%E3%81%AE%E3%82%BF%E3%82%A4%E3%83%97" tabindex="-1">授業のタイプ</h2>
<p>大学の授業には、テキストレポート科目、Webスクーリング科目、スクーリング科目の3タイプがある。</p>
<p>テキストレポート科目はレポートを書くだけで単位がもらえるが、レポートの内容は難しいものが多い。コツコツ進めないと締め切り間近になってつらい目にあう。参考図書を指定されているものもあるが、大抵の場合自分で図書館に行き探す必要がある。あとたまに美術館に行って作品を鑑賞しないといけないものもあり、意外と大変なものが多い。</p>
<p>Webスクーリング科目はWeb上で講義動画を視聴し、最後にレポートを提出するというものだ。動画は1つ5分程度になっていて視聴しやすいが、倍速再生はできない。1章5動画、全部で15章ある。映像のクオリティは高く、この動画でしか見れない芸術作品や遺跡の内部映像などもある。このタイプの授業のレポートは動画の内容をまとめる系のものが多いので、比較的楽である。</p>
<p>スクーリング科目は土日で授業を受けてレポートを提出するタイプの科目だ。9時から18時まで授業があり、けっこう疲れる。授業はZoomで受講できる。イベントと日程がかぶることがあり、カンファレンスなどに参加しずらくなるなと思う。スクーリング科目は1回受講するのに8,800円の受講料がかかる。これは授業料とは別なので、再受講となるとまた8,800円かかる。</p>
<p>僕は3年次編入なので卒業までに64単位必要なのだが、必修や選択必修が多いのであまり自由に授業を選択できる感じではないなと思った。取得できる単位はスクーリング科目のほうが多いので、どうしてもスクーリング科目の比重が大きくなりそう。</p>
<h2 id="web%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%81%AF%E3%81%82%E3%81%BE%E3%82%8A%E4%BD%BF%E3%81%84%E3%82%84%E3%81%99%E3%81%8F%E3%81%AA%E3%81%84" tabindex="-1">Webシステムはあまり使いやすくない</h2>
<p>通信教育部の手続きや受講などすべてWebシステム上で行うのだが、はっきり言って使いにくい。とくに履修管理とスクーリング申込みとレポート提出画面はとても使いにくい。</p>
<p>あとログアウトまでがめちゃくちゃ短い。30分触っていないとログアウトする。僕はこれのせいでレポート1つ出し損ねた。まじクソ。早急にどうにかしてもらいたい。</p>
<h2 id="%E4%BB%8A%E3%81%AE%E3%81%A8%E3%81%93%E3%82%8D%E3%81%AE%E6%84%9F%E6%83%B3" tabindex="-1">今のところの感想</h2>
<p>実は仕事や登壇や病気などで今年はほとんど単位が取得できなかった。あと履修登録をミスって、卒業に必要な授業が履修できずやる気が半減したというのもある。</p>
<p>正直本を読み上げるだけの面白くない授業もあり、モチベがつづくかどうかあやしいなとは思う。しかし体系的に学習するには大学というフォーマットはとても良いと思うので、来年も大学生を続けるつもりだ。</p>
<p>課題をコツコツ進めるのが学生の頃から苦手なので、きちんと単位を取得していけるか怪しいが、来年はもう少し頑張りたい。</p>
2023-12-11T00:00:00Z
/posts/2023-12-11-keyboard/
<p><a href="https://adventar.org/calendars/8824" target="_blank" rel="noopener noreferrer">キーボード #2 Advent Calendar 2023</a> 11日目の記事です。</p>
<p>今年買ったキーボードやキースイッチを紹介します。</p>
<h2 id="akko-mod-007-pc" tabindex="-1">Akko MOD 007 PC</h2>
<p><a href="https://en.akkogear.com/product/mod-007-pc-mechanical-keyboard/" target="_blank" rel="noopener noreferrer">https://en.akkogear.com/product/mod-007-pc-mechanical-keyboard/</a><br />
<img src="https://lh3.googleusercontent.com/pw/ABLVV87cjlx7DL8nxd-WV5H8aRwEXObbUcKn7QZxjdncB43R5eSYJj3ZhYhWkC0hviSCxjTTMNNo8uyPRJl6fDJw4Ia86Dq_iH-1nRRceEdi7nbjjbpnsUvrCogg_FwBEAFa-rhP68HyBbvNPtRfBuxbB9qw73l9NoVJdtGnUAwUTcSqBa286Fw85GoV3FGnSNMha0uHngrgEDc-yDxLh3Gsu5i75G30-YxRR4Fnx8XvulPpTEPVHA9uy9GnyQLsr6qHtxHPn2nN01ekGeBFRUobpaDEoN8HiPRZju8hmzpWN67i91mZhgCVVFGq0MllwKUnZ7dW7fmfNBr_M6OykR6U7IDFZVKAeVFU-Ys3lA4HIEQ3DyH0ZOvKPryRq0qIaoQKF4elSCmVxfOaKASFSDhT7pz7vXb67R7WLC-QZQY8yr2xRrMLi56-LrM4yG4DFlnnlhqdK_F9YGEq2f88gOvSfEW6Mm1z6iKV0THc7lSPswbe3Q3of2p3Ezrw0H-YzL0_hbSpDe61pK9R1nM01IMpnneKibRTNNvcw3PbTQPpXTqY56qHd251ZskQ4RJJsdM3bPv1J10scOvx_pAcqULF1nTxapcy8l3ZNAmrBC7A6on6BM7RJtEO5aLEoTt6xJ1f-XqaatEP6DFtbWAaRUnvgguxj1UO44PthRNMxW-MIE5VJbjqVoaDefSmwREM-j7J2jvgbHTkUTXnxnf8YXEL4PKX6zhycFEujxtFR8j3YPL-i1UuLsrNaiIp0L0bRsjzcH0WCoy1BNc_EnLmLXF0THDdA5__8Z8loXO_o7aXicXU8SLduEuhY3-jza-q2XFoF3GzH11xFtdR5zsbK8R772Mkszp8UZ7bkC-zz9dEuQA05iGzCSaLyIjMgANBqmUGyRY=w1771-h1330-s-no-gm?authuser=0" alt="Akko MOD 007 PC" loading="lazy" /></p>
<p>75%キーボードがほしいなと思って買った。安くて打鍵感も良くノブもついていて満足している。一応ガスケットマウントらしい。現在は売り切れている。Amazonでは定価より高値で出品されているので買わない方が良い。</p>
<h2 id="akko-herb-garden-keycap-set" tabindex="-1">Akko Herb Garden Keycap Set</h2>
<p><a href="https://shop.yushakobo.jp/products/5684?variant=45283350348007" target="_blank" rel="noopener noreferrer">https://shop.yushakobo.jp/products/5684?variant=45283350348007</a><br />
<img src="https://lh3.googleusercontent.com/pw/ABLVV84WvBR3MkeMkAB3zSmxw13agQHSuYuT5XIbDSFEdi3_8SHZu2moDeHXEZliuJLaSStYPKvH-QkT_P-q2SWIOxNXsOITXclsdaAHZ2LGdU8l7pjWK95J3ZctOocyun-YaIw7VEp5axhCOZd9gzO-SG38D2EcaSM-zQN1eH4liyevjJf_iYE5AcfVLYQkozVvcgU0-0_IJqQw91F4akh0Kmw98vdaphAU5MIM4-EG6JAmORSxzwB2SBGfyKEryp20z86BODWM737UIx73AKJ3xNXRuHHumNdl0quHF50kkjQKTc8lkYvQkiJZPMwsNB2uqNV6zVMGB2ovJLMK5Q96uR4Ex45UdcBeIrgATz1I19sT__Rpo6TC3J5_s7R9A2KMCWuIy9dVvhJAqaKzohMNKLVp9ttzPxRRFwH4GdGLMJMbRG61uBxxXqflCkxtNrx0SUoBN-o-q4Z40Wt0XCnc3Kx7jKwCVjG1Nn01kUx8eHiObKINZRfaOweaNUif4W8XAaWLY5jQs_kHtUqVRp4IzM0J0-HWV7ZWz0QuGamLU2sY18kP0zqgcumzIs6CTrQKguEn1u8uVYzB5NfI_yzVCh2Zw3MhwA-kHaEggigsutNpfHyN9eb4C2Ej9j9iSn9PFC_dvtgT_Wq7THexlOSTBqLtEmHoXChTOAFTW22TwY3LJvu0DLIWeBrRCUEhBe_cZzbQ2-CkjLJ5UXXIwWAko0i8lyy4nrewejP9J0Lczx62_D4JbVzQbY_uGArxodioEtYG_N9Cn9mPxm_psSatMNXkUdmawXZIUD2fNOhfbm-Crqyfy_DpO3fy5Fty1Y1gJg6lC804myg1ecbcMTP2WNtK0tkXhEL1VcVVXD33UkAAjBU_M6Yzqc9gr0jOBlx5R7U=w1771-h1330-s-no-gm?authuser=0" alt="Akko Herb Garden Keycap Set" loading="lazy" /></p>
<p>去年買ったAliceレイアウトキーボード用のキーキャップを探していて、いい感じの色味だったので買った。ダブルショットしか勝たん。テンキーのキーキャップも収録されているので後述のTH21でも使用している。</p>
<h2 id="keychron-silent-k-pro-switch---red" tabindex="-1">Keychron Silent K Pro Switch - Red</h2>
<p><a href="https://superkopek.jp/products/keychron-silentkpro-switch?variant=43770737754352" target="_blank" rel="noopener noreferrer">https://superkopek.jp/products/keychron-silentkpro-switch?variant=43770737754352</a></p>
<p>Akko MOD 007 PCを静音化したくて買った。静電容量スイッチに近い打鍵感で、とても気持ちが良い。かなり静かで底打ち感もないので長く打鍵していても疲れないのが良い。価格も110個で3,300円とかなり安く満足度が高い。</p>
<h2 id="epomaker-th21" tabindex="-1">EPOMAKER TH21</h2>
<p><a href="https://epomaker.jp/products/epomaker-th21-numpad?variant=44475436335425" target="_blank" rel="noopener noreferrer">https://epomaker.jp/products/epomaker-th21-numpad?variant=44475436335425</a><br />
<img src="https://lh3.googleusercontent.com/pw/ABLVV84dnSFb7Pk4PtNUX0ALJOqexm4Y7yDMOLXq1smyK8iesZoazBLcKnP2Azf27jyw_y1w239ZZKq7lLkFBJuPFcLq8FvlgyKs8PG9BwKy34QUk29yviXl23Jast9V5wnziPcKg6pQC-3YlJY6gYbOMneXQLZLoIMyjiGQpSNuGmNHE5LTNIgoCO1XntK_xib5b8i5I7cXK2-hrSpZIMq9fIHDkXkt_irxPVVXkAsc2ea-Eehrwr7bqnoiF8_tFIR8fb1mVzVOfbrcjTvEFQScTe1wdRLReswFjfqqgHECZZ4_MBtkhg_BHwvdwnIBh1yPVO9pFBOlwEx4lPqN-E6fslP-ZBhB81qpI39r83V5JnAbdxNWswCAhINEDCnC-zMhyA7IZXEApmvw5l4Gn0OnsA97OMKcs2PfznpXOUrIpKUuxiWOu0-yvtSqzWGoxiSMfVkggHoyDONuXzAo5uEk1tfs5Zdvsze9gENME89H2TtDpCzwUsBFduHc-Bfa-xvy6NmCJEMYly41HHjpcBiiHHmnlyO_t9ruvmigg8h4ycp3-6RGGoCezg_F_rrdD91nmO8L_zwSyTnGMBgg5mVVs1fAsx7ymzV85b9SAl8a3_GKHbdBD371Mb4Q36izhwN6PDOUpSgPrim2_v25izT1w3S0fIFg86YmCQqjVFnFyh7GI2kDVwcI7Z5dw-LKLxvvRGKzKo3UEuxO0rFzFiW9Nbl83chMTi6RnNC79LV6LAbsLFhd0RELa9cjJBMcIREjV5Qsqv3YK4rhK0hLBtXvHho-nAxVBpKWRUFi5yjgqyoNdhk3AKMBmRHj5q33jXvmh1UPHWaJolt5rG27YBfQXElqqkoxm7Y_4thb2hE8mCGVFIvEc-OsxDWmpFdC_lpAVSI=w1330-h1330-s-no-gm?authuser=0" alt="EPOMAKER TH21" loading="lazy" /></p>
<p>これは以前別の記事を書いたが、Figma用の左手デバイスとして活用している。とてもいい感じ。プログラマブルなテンキーは便利。Figmaが専用キーボードを発売したけど全然悔しくなんかない。僕はテンキーを使っていく。</p>
<h2 id="epomaker-flamingo-switch" tabindex="-1">EPOMAKER Flamingo Switch</h2>
<p><a href="https://epomaker.jp/products/epomaker-flamingo-switch-set" target="_blank" rel="noopener noreferrer">https://epomaker.jp/products/epomaker-flamingo-switch-set</a><br />
<img src="https://epomaker.jp/cdn/shop/products/1_3_b630a7c7-b05d-4c16-855b-2a464fc6a873.jpg?v=1675461132" alt="" loading="lazy" /></p>
<p>GMK67用のキースイッチとして買った。静音スイッチも好きだけどコトコトと音がするのも好きなので、音がいい感じと評判のこれを買ってみた。たしかに音が良いし底付き感も強くなく疲れにくい感じがする。</p>
<h2 id="gmk67" tabindex="-1">GMK67</h2>
<p><img src="https://lh3.googleusercontent.com/pw/ABLVV84dtdPkXxJm2V2AMKnf68ymoHIckmljfpYFHgRdmBuY-g4aJBE6VvVxrlU5vpb_37EbvmQJHiAgXZQhTNuq0IZU-b0UYG72xosiUeKwakk-3k9_j0Ouegz3TEz-_x0SZ5GBZR-i3Tu8Qpnm2_6RPXU9iVm41lnY3zQXH5-eZ3u4qF_L7XwEUyBn8VgvnJJPGeQOQOA110REdEWlCLdZeieeMx5g4RdFenbAeDcN4gP1Ew8c2r0aQsuH3tlFIlrddG48S2DR656XvuUtOnz6bMve6DY7TB3bRs5ig7sxjMLCDhwMvJrKCqHMtHP1TlO7l65UWkfkkxk5UKFDMGL2yZrTqjHxhzsTFC_ClfdIGjphzEj5HcmTqYOuEH1drP0a_WGMHQ5ykdOvRyB_4lnzh87avRp6jr-_ewoTM7e5R6dDEKFAtnF_1Wt7IVlRaJurmPfaAFgiga5e4QaFtmp_g2TuXO-Vz5e6AmtcpI0O4CeoTcWlMdCJKnlQnjhxqMkJuFWthp-ky8GfE5xScZd90LThZFWT8Ph2jy9uv0w2NiztcB9D8hRdTxevmaZmZ0xCRzAwdiVHF7Dr2yFu3FF71-C1ehHE1zINbLWUBb_2QJB44sU6TF2OVHog9jUkfiCAtS6PQc_WSMS7ryiRrzA3F5qLWxnK8nE-resZbP-iiLL52y14zAWtQrnT7egkXWl4WlGlSrDG19xSRhnUNshbttqAv_FkVZ4N5IUFHqzHKM3_KZtyPOzwdoo4Tm_7Q6sFp3I9X-_02Y4ZI6nkjv9S8-RTf1kCsNzsGkowxcrlb3mpDFSlcE-4mxfTDH4TeKQpQXOPa_av21ldDLfvfEYihT95i55fuC8wjWBxMebep_a-zbAgkmXH73VAhJRvIrRS3t0=w2294-h1290-s-no-gm?authuser=0" alt="" loading="lazy" /></p>
<p>YouTubeなどで話題のAliExpress激安キーボード。僕が買ったときは3,000円くらいだったが、無線接続にガスケットマウントを採用とかなり出来の良いキーボード。分解してはないが、しっかり静音化処理されているわけではなさそうではある。あまりこだわりがない人ならこれ買うのが正解かもしれない。</p>
<p>AliExpressの商品なので変なのが来たらどうしようと身構えていたが、普通に使える商品が来て逆にびっくりしている。今のところ問題なく使えている。</p>
2023-12-12T00:00:00Z
/posts/2023-12-12-best-book/
<p><a href="https://adventar.org/calendars/9576" target="_blank" rel="noopener noreferrer">今年読んでよかった本 Advent Calendar 2023</a> 12日目の記事です。</p>
<p>今年は大学の授業を受けていたこともあり、あまり本を読まなかった1年だと思う。そんな中で、印象に残った本をいくつか紹介しようと思う。</p>
<h2 id="listen%E2%80%95%E2%80%95%E7%9F%A5%E6%80%A7%E8%B1%8A%E3%81%8B%E3%81%A7%E5%89%B5%E9%80%A0%E5%8A%9B%E3%81%8C%E3%81%82%E3%82%8B%E4%BA%BA%E3%81%AB%E3%81%AA%E3%82%8C%E3%82%8B" tabindex="-1">LISTEN――知性豊かで創造力がある人になれる</h2>
<p><img src="https://m.media-amazon.com/images/I/61dtI7ibKiL._SY466_.jpg" alt="LISTEN――知性豊かで創造力がある人になれる" loading="lazy" /><br />
<a href="https://www.amazon.co.jp/gp/product/B099582LR7/" target="_blank" rel="noopener noreferrer">https://www.amazon.co.jp/gp/product/B099582LR7/</a></p>
<p>この本は「他人の話を聴くこと」について書いた本で、聴くことの重要性とその方法について解説している。コミュニケーションの本と言えば話し方や伝え方が注目されがちだが、話を上手に聴くことも重要だなと気付かされる良い本だった。</p>
<p>最近ユーザーインタビューなどで顧客の声を聞くことが重要視されているが、具体的なインタビュースキルを磨くよりもまず他人の話を聴く力を鍛えるほうが良さそう。</p>
<h2 id="design-science_01" tabindex="-1">DESIGN SCIENCE_01</h2>
<p><img src="https://naotofukasawa.com/cms/wp-content/uploads/2023/03/TDSF_cover-1000x706.jpg" alt="" loading="lazy" /><br />
<a href="https://naotofukasawa.com/ja/news/4009/" target="_blank" rel="noopener noreferrer">https://naotofukasawa.com/ja/news/4009/</a></p>
<blockquote>
<p>科学は確かで、信頼できるもの。デザインは抽象的、不定形で、どこかマジカルで分からないもの。デザインを科学として捉えたときに見えてくるものとは──。<br />
デザイナー、小説家、生態心理学者、人類学者、映像空間演出家、精神科医ら、各界の尖端を切り拓くトップランナーたちが、日常生活の質や環境世界への人々の意識や興味の感覚器を立ち上げ、世界を美しい方へとスイッチする「DESIGN×SCIENCE」が創発する知を鮮やかに描きだす。オールカラー/日英対訳付き。</p>
</blockquote>
<p>深澤直人さんのファンなので読んだ。様々な切り口からデザインと科学の関連を考察していて非常に面白かった。認知心理学とかに興味がある人におすすめの本。</p>
<h2 id="%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%83%BB%E3%82%B7%E3%83%B3%E3%83%BB%E3%82%A8%E3%83%B4%E3%82%A1%E3%83%B3%E3%82%B2%E3%83%AA%E3%82%AA%E3%83%B3-%E5%AE%9F%E7%B8%BE%E3%83%BB%E7%9C%81%E5%AF%9F%E3%83%BB%E8%A9%95%E4%BE%A1%E3%83%BB%E7%B7%8F%E6%8B%AC" tabindex="-1">プロジェクト・シン・エヴァンゲリオン 実績・省察・評価・総括</h2>
<p><img src="https://m.media-amazon.com/images/I/81HeDfT1WWL._SY466_.jpg" alt="" loading="lazy" /><br />
<a href="https://www.amazon.co.jp/gp/product/4905033314/" target="_blank" rel="noopener noreferrer">https://www.amazon.co.jp/gp/product/4905033314/</a></p>
<p>シン・エヴァンゲリオンの制作舞台裏を報告書としてまとめた本。シン・エヴァンゲリオンという巨大なプロジェクトがどのようにマネジメントされ何を成し遂げたのか、とても詳細にまとめられている。中でも第7章のプロジェクト総括で庵野秀明が質問に答えている部分はとても読み応えがあり面白い。エヴァンゲリオンに興味がない人でもプロジェクトXを見ているような気分で楽しめる本だと思う。</p>
2023-12-19T00:00:00Z
/posts/2023-12-19-tsundoku/
<p><a href="https://adventar.org/calendars/8637" target="_blank" rel="noopener noreferrer">積読 Advent Calendar 2023</a> 19日目の記事です。</p>
<p>僕はめちゃくちゃ積読する。本を読む方ではあると思うが、読書スピードより積読スピードの方が速い。僕が積読をする理由は3つある。</p>
<p>1つ目は所有欲を満たすため。僕は「本」というものが好きなので、本を所有したい欲求が強い。本を所有することは素晴らしい。本は知識や経験の塊であり、その存在自体がFine Artであり、文章の内容だけでなくレイアウトや装丁、印刷などArtの結晶なのだ。それがたかだか数千円で買えるわけなので買わない所有しない理由が見当たらない。</p>
<p>また本を所有しているということは知識を所有しているということにもなり、所有した時点で「読書」という行為の半分は完了しているとすら思う。積読であってもその本に何が書いてあるかはぼんやり知っているわけで、その知識が欲しくなったときにその本にアクセスすれば知識を得ることができる。読書とは本の中身を暗記することではなく、本という知識のエイリアスをコレクションする行為だと思う。</p>
<p>2つ目の理由は本を読了することにあまり価値を感じていないからだ。世の中には本を読み切ることが素晴らしいという風潮があるが、それは本当なんだろうか?そもそも本を最初から最後まで読む理由はなんだろう?一度読んだくらいでは中身なんて覚えられないし、途中から読み始めたって問題ないわけで、最初から最後まで読み切ることは読書という行為においてあまり重要ではない。なので本を読み切る前に本を買うことになり、結果として積読が発生する。</p>
<p>3つ目は買わないと本を書いてもらえないからという理由だ。これはみんな意外と意識していないが、けっこう重要だと思う。本は本を書く人がいなければ生み出されず、本を書いてもお金にならなければ皆本を書かなくなってしまう。またどんなに良い本でも売れなかれば絶版してしまい入手が困難になってしまう。ニッチなジャンルの本は特にそうだ。本を買うことはコミュニティを支えるということでもあるのだ。興味のある本をとりあえず買っておくことで、再度面白いだろう本が書かれる可能性をつなぐ。(この考えは僕が同人誌を書いているから持っているものなのかもしれない。みんなも技術同人誌を書こう。)</p>
<p>というわけで、積読は良いことなので今後もどんどん積読していこうと思う。</p>
2023-12-25T00:00:00Z
/posts/2023-12-25-podcast/
<p><a href="https://adventar.org/calendars/9358" target="_blank" rel="noopener noreferrer">ポッドキャスト配信について語る Advent Calendar 2023</a> 25日目の記事です。</p>
<p>Podcastの内容とかは<a href="https://twitter.com/yamanoku" target="_blank" rel="noopener noreferrer">@yamanoku</a>が振り返ってくれていたのであんまり書くことなくなっちゃったが、僕も振り返っていこうと思う。<br />
<a href="https://2023.yamanoku.net/2023-12-19" target="_blank" rel="noopener noreferrer">https://2023.yamanoku.net/2023-12-19</a></p>
<h2 id="%E3%82%84%E3%81%A3%E3%81%A6%E3%81%A6%E3%82%88%E3%81%8B%E3%81%A3%E3%81%9Fpodcast" tabindex="-1">やっててよかったPodcast</h2>
<p>オフラインのイベントが増えて新しく出会う人も増えてきたのだが、ありがたいことに「Podcast聴いてます」と言ってもらえることがあり、やっててよかったなと思う。誰かに聴いてもらいたいというより備忘録っぽい感じでやっているので、勢いよく聴いてます!って言われると少しむず痒い気持ちになったりもするのだが、こんな雑なPodcastをいつも聴いてくださって本当にありがとうございます。2024年もよろしくお願いいたします。</p>
<p>このPodcastは始めてから2年半くらい経つけど、未だに続いていてすごいなと思ってる。僕は書くより話す方が得意なので、ブログよりPodcastが合ってるのかな。編集も全くしないスタイルなので、本当にベストエフォートという感じでやってる。無理せずやっていくのが大事だなあと思う。それでも一定大変なので、きちんと編集した音声をアップしてるPodcastはすごいなあと思いながら毎回聴いてる。</p>
<p>Podcastがあると、その時自分が何を考えていたかかなり詳細に残せるのでとても面白い。僕は時期によってけっこう考え方が変わる一貫性のないタイプの人間なので、最初の方のPodcast聞くと全然違うこと言ってるかもしれない。継続することで価値が出てきているなあと思う。</p>
<h2 id="%E5%8D%B0%E8%B1%A1%E3%81%AB%E6%AE%8B%E3%81%A3%E3%81%9F%E6%94%BE%E9%80%81%E5%9B%9E" tabindex="-1">印象に残った放送回</h2>
<p>実はかなりノリで話しているので、あんまり何話したか覚えておらず全体的にうろ覚え…。「あの話面白かったです!」って言われてもぱっと反応できない可能性が高いです。ごめんなさい。</p>
<h3 id="vol.21-%E3%81%8A%E9%87%91%E3%81%A8%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%A8%E6%9C%AC%E5%BD%93%E3%81%AB%E3%82%84%E3%82%8A%E3%81%9F%E3%81%84%E4%BB%95%E4%BA%8B" tabindex="-1">vol.21 お金とデザインと本当にやりたい仕事</h3>
<p><a href="https://podcasters.spotify.com/pod/show/ogenkidesuka-fm/episodes/vol-21-e25psbd/a-aa0om96" target="_blank" rel="noopener noreferrer">https://podcasters.spotify.com/pod/show/ogenkidesuka-fm/episodes/vol-21-e25psbd/a-aa0om96</a></p>
<p>冒頭でいきなりうんこトークしててうけた。このときは本当に体調がしんでたのと本当に固形便が出て感動したので話したくなったんだと思う。今年は12月もお腹を壊しているので、1年に2回も胃腸炎になるという珍しい年だった。</p>
<p>このエピソードを会社の人が聴いてくれてて、会社のtimesでいきなり言及されたのでびっくりした。</p>
<p><img src="https://images.microcms-assets.io/assets/8a67adc8f7bb4e219d83d3dee85054d9/a3f171b8f56b4c4bbd58513078cf8b09/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-12-24%206.05.03.png" alt="takanoripさんのPodcast最新話、お金の話から人生Oの話に広がってふたりとも偉いな〜すごいな〜と思ってたら、いきなりtakanoripさんが「僕は寂れた喫茶店をやりたいんだ」って言い始めてすごい良かった (編集済み) " loading="lazy" /></p>
<h2 id="2024%E5%B9%B4%E3%81%AB%E3%82%84%E3%82%8A%E3%81%9F%E3%81%84%E3%81%93%E3%81%A8" tabindex="-1">2024年にやりたいこと</h2>
<p>そろそろジングルとかBGMとかつけて、ちょっとリッチにしたいなと思ってる。(BGMはない方が聴きやすいと言われることもあるので要検討だけど。)が全く経験がないので何から始めたら良いかわかってないが…。諸先輩方よろしくお願いいたします。</p>
<p>あと公開収録というやつもやってみたい。ラジオDJみたい。なんかそういうのができるバー?があるらしい。<br />
<a href="https://zatsudan.co.jp/" target="_blank" rel="noopener noreferrer">https://zatsudan.co.jp/</a></p>
<p>オフラインイベントも何かしら企画したいと思っているが、最近物騒なので考え中。</p>
<p>ゲスト収録はちょっと増やしたい気持ちがある。2023年はlacoさん回だけかな?テーマがざっくりしたPodcastなのでゲストに何話してもらうかむずいけど、他の人と話すことで良い刺激にもなるかなと思ってる。ゲスト出演してもいいよって人は僕かyamanokuさんにDMください。待ってます。</p>
<p>いろいろ書きましたが、2024年もぼちぼち継続していけたらと思ってますので、どうぞよろしくお願いいたします。良いお年を。お元気で!</p>
2023-12-31T00:00:00Z
/posts/2023-12-31-recap-2023/
<p>Podcastでも振り返ったけど、ブログにも書いておく。</p>
<p>振り返ったPodcastはこちら。<br />
<a href="https://podcasters.spotify.com/pod/show/ogenkidesuka-fm/episodes/vol-25-2023-e2dpfpb/a-aapnm62" target="_blank" rel="noopener noreferrer">vol.25 2023年を振り返る | お元気ですか.fm</a></p>
<h2 id="%E5%A4%A7%E5%AD%A6%E5%85%A5%E5%AD%A6%E3%81%97%E3%81%9F" tabindex="-1">大学入学した</h2>
<p>京都芸術大学の通信部に入学した。詳しい振り返りはこちら<br />
<a href="https://blog.takanorip.com/posts/2023-12-10-kyoto-art-university/" target="_blank" rel="noopener noreferrer">京都芸術大学 通信教育部 芸術学科芸術学コースに入学しました。 - takanorip blog</a></p>
<h2 id="%E9%81%A0%E5%BE%81%E3%81%97%E3%81%9F" tabindex="-1">遠征した</h2>
<p>今年はBuriKaigi(富山)とフロントエンドカンファレンス沖縄に遠征&登壇した。どちらもとても楽しかったので来年も積極的に遠征していきたい。</p>
<p>アクセシビリティカンファレンス名古屋とかフロントエンドカンファレンス札幌(仮)とか楽しみにしてます。</p>
<h2 id="%E7%A6%8F%E5%B2%A1%E3%81%AB%E8%A1%8C%E3%81%A3%E3%81%9F" tabindex="-1">福岡に行った</h2>
<p>9月に3泊4日で福岡に一人旅に行った。観光にはあまり行けなかったけど、普段会えない人に会えてすごくよかった。しこたま飲んだのでとても二日酔いだったけど…。</p>
<p>福岡好きなので来年も福岡行きたいな。</p>
<h2 id="%E5%8F%8C%E6%A5%B5%E6%80%A7%E9%9A%9C%E5%AE%B3%E3%81%AE%E6%B2%BB%E7%99%82%E3%82%92%E5%A7%8B%E3%82%81%E3%81%9F" tabindex="-1">双極性障害の治療を始めた</h2>
<p>調子悪いなと思って病院行ったら双極性障害だと言われたので治療を開始した。まだ薬効いてきた感覚がない。今後も気長にやっていこうと思う。</p>
<p>久しぶりに会社の人に会ったらみんな心配して声かけてくれて嬉しかった。ありがとう。</p>
<h2 id="%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%AE%E9%81%8B%E5%96%B6%E3%82%84%E3%82%B9%E3%82%BF%E3%83%83%E3%83%95%E3%82%92%E3%82%84%E3%81%A3%E3%81%9F" tabindex="-1">イベントの運営やスタッフをやった</h2>
<p>今年は<a href="https://www.featuredprojects.jp/" target="_blank" rel="noopener noreferrer">Featured Projects 2023</a>のボランティアスタッフと<a href="https://dezabiyo.studio.site/" target="_blank" rel="noopener noreferrer">デザイン読書日和</a>の運営スタッフをやった。</p>
<p>イベントスタッフをやるとイベントの裏側がどうなっているか知ることができるのでとても楽しい。めちゃくちゃ疲れるけど。来年もなんかスタッフやりたいな。</p>
<p>あと新しい人ともたくさん出会えて良かった。これもスタッフをやる醍醐味だと思う。コロナで出会いが減ってしまったのでイベントスタッフは貴重な機会だ。</p>
<h2 id="24%E6%99%82%E9%96%93%E3%82%B8%E3%83%A0%E3%82%92%E5%A5%91%E7%B4%84%E3%81%97%E3%81%9F" tabindex="-1">24時間ジムを契約した</h2>
<p>家の近くにできた24時間ジムに行き始めた。もともと家で筋トレしてたけど、もっと重量を増やしたくなったのでジムに行くことにした。</p>
<p>たまにムキムキな中国人学生集団が来て騒がしいことを除けばとてもいい感じである。来年も筋トレぼちぼちやっていこうと思う。</p>
<h2 id="%E3%83%AD%E3%83%BC%E3%83%89%E3%83%90%E3%82%A4%E3%82%AF%E3%82%92%E8%B2%B7%E3%81%A3%E3%81%9F" tabindex="-1">ロードバイクを買った</h2>
<p>もともと持っていたピストを売ってロードバイクを買った。8年ぶりにロードバイクを買ったけど、やっぱりかっこいい。</p>
<p>夏は暑くて乗る気が起きなかったが、今は寒くて乗る気が起きないので大変。春から本気出します。</p>
<h2 id="ubie%E3%81%A72%E5%B9%B4%E5%83%8D%E3%81%84%E3%81%9F" tabindex="-1">Ubieで2年働いた</h2>
<p>2024年1月1日でUbieに入社してから丸2年経過した。今まで同じ会社で2年以上働いたことがなかったので、Ubieが最長記録だ。</p>
<p>Ubieは変化の激しい会社ではあるけど、そのおかげで今も楽しく働けている。新しい人も増え、プロダクトもどんどん大きくなり、こらからもっと楽しくなりそう。まだまだ辞める気配はないので来年もよろしくお願いいたします。</p>
<p>今年のなんちゃってスクラムマスター、社内管理画面のデザイン・開発、デザインシステムの再設計、アクセシビリティなどを仕事でやっていた。デザイン組織やデザイナー採用みたいな話もちょっとやっていたけど、今は他のデザイナーに任せている。</p>
<p>管理画面の話は来年の1月にLTする予定。デザインシステムの記事は書いている途中で来年1月には公開したい…。</p>
<p>来年どうなるかは正直未知数だけど、SOぶち当てるために頑張ります。</p>
<h2 id="%E5%89%AF%E6%A5%AD" tabindex="-1">副業</h2>
<p>今年は副業はまったくやらなかった。30歳過ぎてから副業に対するモチベーションがあまり湧かず声もかからないので副業まったくやっていない。</p>
<p>副業〇〇社やってますみたいな話を聞くと、どんだけ体力あるんだと思ってしまう。時間の使い方がうまいのかな。僕は趣味が多い人間なので副業するよりも好きなことやる時間をつくりたいと思ってしまう。</p>
<p>来年も大学に行く予定があるので積極的に仕事を探したりはしないつもりだけど、面白そうな話があればご相談お待ちしてます。</p>
<h2 id="%E3%82%A2%E3%83%BC%E3%83%9E%E3%83%BC%E3%83%89%E3%83%BB%E3%82%B3%E3%82%A26" tabindex="-1">アーマード・コア6</h2>
<p>僕の大好きなゲームの1つであるアーマード・コアシリーズの最新作、アーマード・コア6が発売された。去年の12月に発売発表されたときは本当に嬉しくて泣いた。もちろん予約して発売日当日から遊びまくった。</p>
<p>今作は本当にストーリーもデザインも良くできていて、280万本売れるのも納得の出来だった。アーマード・コアの最新作を最新のハードでプレイできて本当に嬉しかった。アプデも細かく来ていて長く楽しめそう。</p>
<h2 id="2024%E5%B9%B4" tabindex="-1">2024年</h2>
<p>大学の単位をとる、旅行に行く、筋トレする、仕事がんばる</p>
2024-01-06T00:00:00Z
/posts/2024-01-06-chinese-town/
<p>横浜に累計5年くらい住んでいる僕が横浜中華街でおすすめのお店を紹介するよ。</p>
<h2 id="%E6%82%9F%E7%A9%BA%E8%8C%B6%E8%8D%98%EF%BC%88%E4%B8%AD%E5%9B%BD%E8%8C%B6%E3%83%BB%E3%82%AB%E3%83%95%E3%82%A7%EF%BC%89" tabindex="-1">悟空茶荘(中国茶・カフェ)</h2>
<p>少し奥の方にある中国茶専門店&カフェ。<br />
本格的な中国茶を味わえるお店。茶壺や聞香杯を用意してくれるのでしっかり中国様式でお茶を楽しむことができる。2階がカフェで1階では茶葉や茶器を販売している。ぜひ一度訪れてほしい。<br />
<a href="https://www.goku-teahouse.com/" target="_blank" rel="noopener noreferrer">https://www.goku-teahouse.com/</a></p>
<p>朝陽門(東)近くには茶葉や茶器販売専門の悟空一号店がある。僕はこっちのほうによく行く。お店のコンパクトさが中華街っぽくて好き。隣に変なTシャツばかり売ってるお店がある。<br />
<a href="https://www.goku-teahouse.com/shop/shop01/" target="_blank" rel="noopener noreferrer">https://www.goku-teahouse.com/shop/shop01/</a></p>
<p>オンラインショップもある。<br />
<a href="https://www.gokuchasou.co.jp/" target="_blank" rel="noopener noreferrer">https://www.gokuchasou.co.jp/</a></p>
<h2 id="%E4%B8%80%E6%A5%BD%EF%BC%88%E4%B8%AD%E8%8F%AF%E6%96%99%E7%90%86%EF%BC%89" tabindex="-1">一楽(中華料理)</h2>
<p>大衆中華の店。<br />
中華食べたいときはここに来れば間違いなくうまい。<br />
ウェブサイトによると「広東料理と四川料理をベースとしながらも上海・北京等中国各地の調理技法をミックスした中華料理に定評があり」とのこと。<br />
<a href="https://www.ichi-raku.jp/" target="_blank" rel="noopener noreferrer">https://www.ichi-raku.jp/</a></p>
<h2 id="%E7%B4%85%E6%A3%89%EF%BC%88%E7%82%B9%E5%BF%83%EF%BC%89" tabindex="-1">紅棉(点心)</h2>
<p>点心や中華菓子を買うことのできるお店。<br />
僕はここの蛋達(エッグタルト)と馬拉糕(マーラーカオ、蒸しパンが大好きで横浜中華街に行ったら必ず買う。素朴だけど安心できる味がある。<br />
<a href="https://www.koumen.co.jp/" target="_blank" rel="noopener noreferrer">https://www.koumen.co.jp/</a></p>
<h2 id="%E3%81%AE%E3%82%8A%E8%94%B5%EF%BC%88%E3%83%91%E3%83%B3%E5%B1%8B%EF%BC%89" tabindex="-1">のり蔵(パン屋)</h2>
<p>朝陽門(東)近くの路地にあるパン屋。<br />
惣菜パンや菓子パンがボリューミーで見た目も可愛く美味しい。<br />
<a href="https://www.instagram.com/norizo_bread/" target="_blank" rel="noopener noreferrer">https://www.instagram.com/norizo_bread/</a></p>
<h2 id="polepole%EF%BC%88%E3%82%B7%E3%83%BC%E3%82%B7%E3%83%A3%E3%83%BB%E3%82%B3%E3%83%BC%E3%83%92%E3%83%BC%EF%BC%89" tabindex="-1">polepole(シーシャ・コーヒー)</h2>
<p>コーヒーとシーシャが楽しめるお店。<br />
シーシャ屋っぽくない明るい雰囲気なのが良い。<br />
木曜日限定でプリンを提供しているらしいが木曜日に行ったことがないので食べたことがない。いつか食べたい。<br />
<a href="https://shisha-polepole.com/" target="_blank" rel="noopener noreferrer">https://shisha-polepole.com/</a></p>
<h2 id="chillulu-coffee%EF%BC%88%E3%82%AB%E3%83%95%E3%82%A7%EF%BC%89" tabindex="-1">CHILLULU COFFEE(カフェ)</h2>
<p>横浜中華街の中にある普通のカフェ。<br />
テラス?中庭?の席が好き。フレンチトーストをよく頼む。<br />
<a href="http://chillulu.jp/coffee/" target="_blank" rel="noopener noreferrer">http://chillulu.jp/coffee/</a></p>
2024-02-13T00:00:00Z
/posts/2024-02-13-writing-slill/
<p>継続的にアウトプットするために考えていること。</p>
<h2 id="%E5%AF%BE%E8%B1%A1%E8%AA%AD%E8%80%85%E3%82%92%E7%84%A1%E8%A6%96%E3%81%99%E3%82%8B" tabindex="-1">対象読者を無視する</h2>
<p>書きたいことを書けば良い。「対象読者:自分」くらいの気持ちで書く。「こんな記事誰が読むんだろう…」みたいな気持ちは捨てる。<br />
自分にとっては些細なことでも、その情報を欲している人はたくさんいるかもしれない。公開してみないとそんなのわからん。とりあえず書いて公開する、それが一番重要。<br />
誰に読まれるかより、誰に読まれたかを分析するほうが大事。継続して分析することで、どんな記事がどんな属性の人に読まれやすいかわかってくる。</p>
<h2 id="%E9%96%93%E9%81%95%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8%E3%82%92%E6%9B%B8%E3%81%8F%E3%81%93%E3%81%A8%E3%82%92%E6%81%90%E3%82%8C%E3%81%AA%E3%81%84" tabindex="-1">間違ったことを書くことを恐れない</h2>
<p>間違ったことを書いても良いというわけではないが、人間なので100%正しいことを書くことはとても難しい。労力も時間もかかる。その分情報の新鮮さはなくなっていく。<br />
無料で読める記事なので多少の間違いは仕方ない、注意されたり気づいたら修正すれば良い。何事も諦めが肝心。</p>
<h2 id="%E7%9B%AE%E6%AC%A1%EF%BC%88%E3%82%A2%E3%82%A6%E3%83%88%E3%83%A9%E3%82%A4%E3%83%B3%EF%BC%89%E3%82%92%E6%9B%B8%E3%81%8F" tabindex="-1">目次(アウトライン)を書く</h2>
<p>よく言われていることだが、目次は大事。目次が書けたらほぼ記事が書けたと言っても過言ではない。<br />
また目次を書くときは目次だけでその章で言いたいことがわかるように書くことも大切。目次を読んだだけで記事で伝えたい内容がおおよそ理解できるというのが理想的。<br />
例 <code>「パフォーマンス計測」</code> → <code>「〇〇による△△のパフォーマンス計測」</code><br />
目次をわかりやすく書くことで、自分が何について書きたいのか明確にできるので内容が横道に逸れてしまったり結局何が言いたかったのかわからなくなってしまうのを防ぐことができる。</p>
<h2 id="%E3%83%88%E3%83%94%E3%83%83%E3%82%AF%E3%82%921%E3%81%A4%E3%81%AB%E7%B5%9E%E3%82%8B" tabindex="-1">トピックを1つに絞る</h2>
<p>1記事1トピックで書くこと。あれもこれも書きたくなる気持ちはわかるが、そんなことしてるといつまでも記事は公開できないし読みやすさも下がる。<br />
1つのトピックについて、なるべく短く簡潔に書く。これが鉄足。</p>
<h2 id="%E5%86%85%E5%AE%B9%E3%82%92%E6%B7%B1%E8%BF%BD%E3%81%84%E3%81%97%E3%81%AA%E3%81%84" tabindex="-1">内容を深追いしない</h2>
<p>記事を書いていると、ついついいろんなことについて詳細に書こうとしてしまうが、必要以上に詳細化しないこと。<br />
長くなりそうなら分割するという手もあるし、他の人が書いた記事のリンクを貼っても良い。なんでも自分の言葉で書こうとしない。<br />
本当に自分の言葉で書かなければならない要素を見極め抽出する。</p>