今朝他の同僚も別のMTGでやりだしていることに気づいたため、せっかくなのであらためて書いてみる。 「定例的な取り組みはダレる」を対策したい 担当プロダクトであるLINEスキマニでは、他の企業や組織と同じようにデイリーで午前中にMTGを行っている。いわゆる「朝会」と呼ばれるタイプの取り組みとなる。 事前にある程度議題を用意する場所があり、そこに書かれた内容に沿って進行しつつも、書きそびれた議題などもカジュアルに話せる場になっている。「デイリーで顔を合わせる機会」というのは、チャットで書くにはライトすぎて逆に書きづらい内容や「この流れでついでに〜」共有しておきたいタイプの事柄を話しやすく、存在意義は多分にあると実感できる。 一方でこうした取り組みは得てして「やること」がゴールへと変遷していきがち無価値になりがちであるため、そうならないように常に細心の注意を払っている。 その一つとして我々が取り

『遊戯王カードゲームインストラクター試験』に合格しました。他のゲームだとジャッジ資格などに近い立ち位置となる、「ユーザーでありながら公式側として対応する立場」の資格となります。この合格はもちろん、すでに紙のゲームで優勝や入賞もそれなりにできてきており、関連ゲームの『遊戯王マスターデュエル』で「ドライトロン」の流行の発祥になったり、EXTRAWINというチームに所属することになったり、ある程度しっかりプレイしていると言えるようになった気がするので、せっかくなので potato4d としてはじめてガッツリ遊戯王の話をしようと思います。 といっても一番報告したいことは合格報告なので、興味ある人が見てもらえればと思います。ざっくりとしたサマリーは以下の URL にまとまっているので、ざっくり見たい人はそちらをどうぞ(Twitter モーメント廃止につきモーメントの内容を再構成したもの)。 http

Node.js での devServer の構築では初手 unjs/get-port-please の導入が便利2022/11/14 業務で複数の devServer を同時に立ち上げたいケースがあり、チーム内で「React.jsプロジェクト(APP_A)を起動してからNext.jsプロジェクト(APP_B)を起動するとNextが気を利かせてくれるが、Nextを起動してからReactだとポートが専有されていてエラーになっていて地味に不便」という声が上がっていた。 かねてから課題ではあったものの、それぞれ実装を進めることから、同時に立ち上げる機会がそこまで多くなくこれまで放置されていた。しかしそうは言っても不便ではあった中、get-port-please の存在を思い出したので試しに導入してみることにした。 結果として、好感触でなかなか良いライブラリだったので本記事で紹介したいと思う。 un

本業と副業であったり、あるいは本業の中での複数の業務であったり、仕事をしていると業務の掛け持ちというのはいずれ発生してきます。 それは自らの希望である場合も、組織の都合である場合も存在しますが、これが一度発生すると、以降複数の業務に対して自分のリソースをどう分配するかに頭を悩ませ続けることになります。 私自身、これまで幾度となく業務の兼任は経験してきましたし、その中でうまくいったものもあれば、失敗したものも勿論あります。 この記事では、そんな自分の経験を思い出し、私ならの業務の兼任に対しての結論について述べたいと思います。 兼任しても良いたった二つの業務 結論から言うと、兼任しても良い業務は、その片方が「プロジェクト型の業務であり、短期で完結するもの」または正反対の「期日などが厳格でなく、ベストエフォートでのコミットが許容されるもの」のみであると考えています。 そして多くの業務はその構成員

2022年にもなって HMR ではなく普通の Hot Reload を実装する機会に恵まれたので、現代的な API でできるだけローコストに実現してみることにしました。 重厚な JavaScript を使って Front-End を表現するわけではないため、実現したい機能はシンプルに以下に通りです。 監視対象となるファイルの内部をリアルタイムで監視し続ける 対象のファイルに変更が入ったとき、特定の処理を実装し、完了したらブラウザをリロードする 今回はファイル監視後に Node.js を利用してのビルド処理が挟まるため、 Node.js で実装します。 Hot Reload 用サーバー サーバー側の実装は、 Node.js 標準の http と chokidar で実装します。 Zero Dependencies のほうが取り回しは良いものの、 fs.watch はあまり優秀ではないため採用

GW に良い機会ということでリリースされたばかりの LIFF のプラグインシステムを利用して third-party プラグインの開発をしていた。 概ねドキュメント通りに利用することで、 Vue 2 時代のプラグインシステムのような書き心地でプラグインを開発できるのであまり躓くことはないが、 TypeScript に関する記述だけはどこを見てもあまり情報がない。 少し調べて解決できたので、同じようなシチュエーションに出会った人のために簡単に情報を残しておくことにした。 型定義方法 最終的に @line/liff の型定義とオフィシャルプラグインである LIFF Mock のソースコードを見に行った結果、このような形で定義するのが一番丸い様子だった。 type MyPlugin = { // ... } declare module '@line/liff' { interface Liff

これ僕らの物語であり、僕と君の物語であるかもしれない。 数日前、友人が言った。「久しぶりに Rails を書いたけれど、Node.js の良さに敵わない」と。 その言葉に同意しながらも、他方で少し不思議に思う。 いつから僕らは Node.js しか使わなくなったのか。あれだけ話していた Rails などの多くの Web 技術にときめかなくなったのか。と。 もちろん、使えないというわけではない。寧ろ今現役で十分な活躍をしているフロントエンドの人間は、等しく皆「主役であるバックエンドのサブとして存在するフロントエンド」を経験してきている。 書こうと思えば書ける。だがその中で、敢えてフロントエンドとその技術を選んできた。 だけど今はどうだろう。フロントエンドエンジニアはもはや「JavaScript を扱うソフトウェアエンジニア」となり、一般的なバックエンドは勿論、Node.jsが一級市民として存

”色” を自由に取り回せるサービス『Shiki』をリリースしました。 Shiki とは？ Shiki は、 Web 上で色を扱うことを目的としたサービスです。 私達は普段、インターネット上でテキストと画像を中心としたコミュニケーションをしています。加えて近頃は音声や動画もコミュニケーション手段の主流に仲間入りし、情報量は日々上がっていることは事実でしょう。 一方で、情報量が増えることに比例し、その情報を生成するコストも高くなっています。私達はもう少し低コストで表現ができるコミュニケーション手段が必要なのではないでしょうか。 そこでこのたび、色を提供できるだけのシンプルな Web サービス 『Shiki』 をリリースいたしました。 機能とつかいかた ElevenBack LLC. としてホストしているため、 https://shiki.elevenback.jp/ にて利用できます。 トップ

こう言いながら自分のブログ対応していないのまずいのでは。と思い急遽。 要件 ダークモードの対応といえば色々と手法があるが、今回のゴールはこのようにしました。 ダークモードで閲覧したい人がダークモードで閲覧できる状態となる OS の設定を見て自動でダークモードにすることはしない 能動的にモードを切り替えた場合、切り替えた状態は保持されて、次以降のアクセス時は望んだモードで表示される 自動でダークモードにしないのは、読み物は白背景に黒文字のほうが読みやすい人のほうがマス層と感じたため。あくまでも夜や他がダークモードだらけなど、白が眩しいときに使える状態を目指します。 改修内容 このブログは現状 Nuxt(v2) + Content Module で運用しているため、以下の手順を実施しました。 @nuxtjs/tailwindcss のバージョンをアップグレード @nuxtjs/color-mo

当ブログでは昨年 1 月より AMP に対応したページを提供していました。その折に Nuxt.js の AMP モジュールに Contribute する機会があったり、実際に AMP ページから記事が閲覧されることもそれなりにあったのですが、2021年 4 月に Google 検索セントラルにて、Google よりオフィシャルに AMP を優遇しない旨が告知され、以降は特別提供する理由もなかったのですが、剥がす理由もないということで提供を続けていた状態です。 しかし AMP 専用のページが表示される時の閲覧体験は決して良いとは言えませんし、いち技術者としても AMP を提供し続けることで得られることもないという理由から、2022年からは AMP ページの提供を取りやめてみることとしました。 Nuxt.js の AMP モジュールで提供していたため剥がすことも戻すことも容易であるため、ひとま

早いものでLINE株式会社に入社して3年が経ちました。今日から勤務4年目となり、業界としてはそれなりに長く働いている側に足を突っ込んできた自覚があります。仕事もエンジニアからマネージャーになり、役割も変わってきたところ。 現職でまだやりたいこともあるだけでなく、明確にバリューを出せていて組織からも評価されている現状、しばらく転職する予定はないのですが、一方で、私は常に他の選択肢がないかを探し続けています。 そして一緒に働く同僚やチームメンバーには語弊を恐れずに言えば「常に転職活動をしながら仕事をしてほしい」と思っています。 現職についてのエントリに興味がある人はそう多くないと思うので、3年目が終わった節目として、今日は市場を見て仕事をすることの重要性について書き記すことにしました。 自社に満足しているときほど、外部の働き方を知る必要がある 「あなたは今の仕事に満足していますか？」と聞かれた

先日の ua-parse-js のハイジャックの件 を受けて、業務の中で毎日動かしている On-premise Renovate の cron を土日祝に停止させたいという話が上がった。 業務の合間に書く時間がちょっと捻出できそうになかったこと、加えて汎用的なコードということもあり、プライベートでも使えそうだったので一般化した範囲でコードを書いてしまって、業務で社内用に調整する形で決着させたので、せっかくなので共有しておく。 社内が基本的に CircleCI なので特化したものと、一般的に使えるものでバリエーションごとに2つのパターンを用意した。 祝日に停止させるアプローチ ひとまず今回は内製の Bot の運用のため、以下のような特徴があった。 土日の設定自体は cron で曜日指定ができるため祝日にフォーカスして良い 厳密性を重視しない ミッションクリティカルな領域の話ではない 以上を考

(以下、本文における「エンジニア」はすべてソフトウェアエンジニアのことを指します。) 私はエンジニアが所属組織の採用イベントに出演することにはかなりポジティブな作用があると考えています。もちろんそれには明確な理由があるのですが、それがなぜなのかをアウトプットしてこなかったので、試しに書き連ねてみることにしました。 なお、採用に関する情報をオープンにしない組織も非常に多く存在するため、あくまでも閉じた範囲に限定せずオープンにしている組織のことを前提とします。 採用イベントと技術イベントについて 「採用イベント」と一口に言っても、エンジニア向けの催しには直接的な採用へのコミットを意識したイベントと、中長期的を見据えての接触機会の増加や組織のブランディングを重要とした技術イベントの２つがあります。 前者は採用説明会などと呼ばれることが多く、後者は Meetup や Tech Talk などの名称

5/7(金) 開催の #web24 にて、26時50分より開催される Stack トラックのご紹介2021/05/03 Web24 という、Web についてぶっ通しで 24 時間語るという、今の時代、そして GW という時期でしかできないイベントに、 Front-End Stack のセッションオーナーに任命されました。 この記事では、せっかくなので簡単にトラックの設立意図について紹介します。 私について @potato4d のハンドルネームで Web 上にてコンテンツを発信している、LINE株式会社のエンジニアリングマネージャーです。領域としては主にフロントエンドを中心としており、副業では技術的負債の解消や、イベントの企画・運営などを行っています。 これまで Front-End Study を始めとした、様々なフロントエンドを中心とながらもある程度広い領域にて、Web 系のイベントを運営

rehype-plugin-auto-resolve-layout-shift を利用した Markdown ドキュメントにおける Layout Shift の解消2021/02/22 このブログは @nuxt/content で運用しており、執筆環境としては非常に快適に利用できている一方で、Markdown ベースの宿命として、Markdown 記法で画像を貼り付けている限り Layout Shift が発生するという課題が存在していました。 暫定的な対処としてしばらく <img> で置き換えてきましたが、根本的に対処するため、連休を活かして rehype-plugin-auto-resolve-layout-shift を開発しました。 この記事では、かんたんにその報告と紹介をしたいと思います。 Markdown の Layout Shift について Markdown は # で h

Nuxt.js の Sitemap Module について、何故か Generate による Static Page / Full Static でしか利用できないと思いこんでいたのでメモ。 Sitemap Module について Nuxt.js オフィシャルに提供されているサイトマップの生成用モジュールであり、基本的にはモジュールとして読み込むだけで自動でサイトマップを生成してくれる。 基本的には $ yarn add @nuxtjs/sitemap を行い、 nuxt.config.js にて modules 指定を行うだけ。 https://www.npmjs.com/package/@nuxtjs/sitemap サイトマップを必要とする多くのサイトで利用されており、大体 weekly download が 30k 程度と人気のモジュールとなっている。 対象となるエンドポイントのカ

Nuxt.js の Content Module(nuxt/content) を利用している Web サイトを AMP に対応させる2021/01/10 @​nuxtjs/amp に投げていたパッチが無事マージ・リリースされたので、 @​nuxt/content を利用した静的 Web サイトを AMP 対応させる方法について紹介したいと思います。 なお、本ブログは現在、通常のページと AMP に対応したページを併せて提供しています。 Nuxt.js における AMP 対応について Nuxt.js といえば豊富なエコシステムやモジュールによる機能追加が魅力の一つとしてあげられますが、その例にもれず、AMP対応もオフィシャルのモジュールにて行うことができます。 基本的には @​nuxtjs/amp を利用し、依存関係に追加したあと、以下を nuxt.config.js に記述するだけで、ひと

採用技術問わずWebサイトに設置できるソーシャルシェアボタンを Web Component として開発する2020/12/08 先日、「”地上最強”のエンジニア向け情報サービス」を謳うTechFeed Proが新規アップデート。様々な機能追加がなされ、更に多くの情報収集が可能となりました。 今回はそんな TechFeed のアップデートで追加された URL 共有機能の導線として、 techfeed-share-button パッケージを OSS として公開した記録を紹介します。 本記事では、 依存側の技術要件が不明または多岐に渡るケースの選択肢としての Custom Elements NPM パッケージとして提供と CDN SDK としての提供の両立 あたりの情報について紹介できればと思います。 ※ TechFeed との関係性について TechFeed Pro については構想段階で相談を

11/09 に開催された Front-End Study #1 について、Forkwellとの共催で運営・企画並びに司会に携わりました。参加登録者2,552人、同時視聴者も1,500人を超えるバケモンとしか言えないイベントになったわけですが、無事終わって何よりというところで一筆。 開催の経緯としては、勉強会で顔を合わせることも多かったForkwell重本さんから、InfraStudyの流れでフロントエンドの勉強会も開催したいという相談が上がってきて、そこから一緒に企画していく運びとなった形です。 Front-End Study の誕生について 昨今はオンラインであることが前提となるためミートアップの類もかなり数を減らしており、視界に入る中だと PWA Night、ng-japan onAir、あとは私の所属である LINE が運営している UIT くらいしか定常的に開催しているフロントエン

LitElement を利用した Custom Element の開発をしていて、 enzyme や vue-test-utils のようなコンポーネントのテストを記述したい。 ただ Custom Element 開発はブラウザの文脈に依存するものが非常に多く、Open WC などがツールを出しているみたいだけれど、ちょっとしたコードを書くには1からキャッチアップするのも大変。ということで、 Cypress で End-to-End でテスティングすることにした。 Jest + Puppeteer で自作しても良かったけれど、Shadow DOM にうまくアクセスする方法を持ち合わせていなかったので、試しも兼ねてというところ。 ローカルで一通り動いたので、CI に載せたくなったのは良いものの setup が少しクセがあったのでまとめておく。 GitHub Actions で動作させるために