サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Nintendo Direct
d.potato4d.me
今朝他の同僚も別のMTGでやりだしていることに気づいたため、せっかくなのであらためて書いてみる。 「定例的な取り組みはダレる」を対策したい 担当プロダクトであるLINEスキマニでは、他の企業や組織と同じようにデイリーで午前中にMTGを行っている。いわゆる「朝会」と呼ばれるタイプの取り組みとなる。 事前にある程度議題を用意する場所があり、そこに書かれた内容に沿って進行しつつも、書きそびれた議題などもカジュアルに話せる場になっている。「デイリーで顔を合わせる機会」というのは、チャットで書くにはライトすぎて逆に書きづらい内容や「この流れでついでに〜」共有しておきたいタイプの事柄を話しやすく、存在意義は多分にあると実感できる。 一方でこうした取り組みは得てして「やること」がゴールへと変遷していきがち無価値になりがちであるため、そうならないように常に細心の注意を払っている。 その一つとして我々が取り
ゼロランタイムのミニマルな静的サイトジェネレーター『dodai』の開発と JSX First な世界観について2023/01/27 本記事では来たる2/3のKyoto.js #18に備え、年末年始に npm パッケージとして公開した『@potato4d/dodai』という静的サイトジェネレーター(以下SSG)について紹介します。なお、開発にあたって本ブログも @nuxt/content からこの dodai へと移行しています。移行作業の所要時間は 30 分程度でした。 @potato4d/dodai について dodai は 1~5 つ程度の固定ページと、Nつの動的なページを持つ Web サイトの構築を想定した静的サイトジェネレーターです。 元々は私が複数の Web サイトの管理で使っていた Node.js 用の Script 群をパッケージとしてまとめたものになります。 技術的には複数
『遊戯王カードゲームインストラクター試験』に合格しました。他のゲームだとジャッジ資格などに近い立ち位置となる、「ユーザーでありながら公式側として対応する立場」の資格となります。この合格はもちろん、すでに紙のゲームで優勝や入賞もそれなりにできてきており、関連ゲームの『遊戯王マスターデュエル』で「ドライトロン」の流行の発祥になったり、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
”色” を自由に取り回せるサービス『Shiki』をリリースしました。 Shiki とは? Shiki は、 Web 上で色を扱うことを目的としたサービスです。 私達は普段、インターネット上でテキストと画像を中心としたコミュニケーションをしています。加えて近頃は音声や動画もコミュニケーション手段の主流に仲間入りし、情報量は日々上がっていることは事実でしょう。 一方で、情報量が増えることに比例し、その情報を生成するコストも高くなっています。私達はもう少し低コストで表現ができるコミュニケーション手段が必要なのではないでしょうか。 そこでこのたび、色を提供できるだけのシンプルな Web サービス 『Shiki』 をリリースいたしました。 機能とつかいかた ElevenBack LLC. としてホストしているため、 https://shiki.elevenback.jp/ にて利用できます。 トップ
当ブログでは昨年 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 で曜日指定ができるため祝日にフォーカスして良い 厳密性を重視しない ミッションクリティカルな領域の話ではない 以上を考
(以下、本文における「エンジニア」はすべてソフトウェアエンジニアのことを指します。) 私はエンジニアが所属組織の採用イベントに出演することにはかなりポジティブな作用があると考えています。もちろんそれには明確な理由があるのですが、それがなぜなのかをアウトプットしてこなかったので、試しに書き連ねてみることにしました。 なお、採用に関する情報をオープンにしない組織も非常に多く存在するため、あくまでも閉じた範囲に限定せずオープンにしている組織のことを前提とします。 採用イベントと技術イベントについて 「採用イベント」と一口に言っても、エンジニア向けの催しには直接的な採用へのコミットを意識したイベントと、中長期的を見据えての接触機会の増加や組織のブランディングを重要とした技術イベントの2つがあります。 前者は採用説明会などと呼ばれることが多く、後者は Meetup や Tech Talk などの名称
『遊戯王オフィシャルデータベース ドローシミュレーター』を Chrome Extension として公開しました2021/06/26 タイトルの通り、遊戯王オフィシャルデータベースにドローシミュレーターを追加する Chrome 拡張を開発しました。遊戯王ニューロンに存在するドローとマリガン機能を Web 版にも追加できる拡張機能となっています。 インストール 動作イメージ 拡張機能を導入したあとに公式データベースのデッキ表示ページにアクセスすると『5枚ドロー』と『+1枚引く』ボタンが追加されます。 基本的には遊戯王ニューロンと同じつくりになっているため、デッキ枚数が尽きるまでドローし直すことが可能であり、5枚ドローはすべてリセットしての再抽選(マリガン)となります。 インストール方法 内容としてはこの記事とほぼ同じですが、一応紹介用のWebページを作ったのでこちらよりどうぞ。 https:
5/7(金) 開催の #web24 にて、26時50分より開催される Stack トラックのご紹介2021/05/03 Web24 という、Web についてぶっ通しで 24 時間語るという、今の時代、そして GW という時期でしかできないイベントに、 Front-End Stack のセッションオーナーに任命されました。 この記事では、せっかくなので簡単にトラックの設立意図について紹介します。 私について @potato4d のハンドルネームで Web 上にてコンテンツを発信している、LINE株式会社のエンジニアリングマネージャーです。領域としては主にフロントエンドを中心としており、副業では技術的負債の解消や、イベントの企画・運営などを行っています。 これまで Front-End Study を始めとした、様々なフロントエンドを中心とながらもある程度広い領域にて、Web 系のイベントを運営
Stencil でつくられた Custom Element を React/TypeScript 環境から呼び出したい2020/09/16 会社で Stencil で作られた Web Component の NPM パッケージが OSS として公開されていて、Vue.js のアプリケーションではこれまでも利用していたけれど、React でも利用したくなった。が、やってみるとドキュメント以上の工夫が必要だったのでメモ。 ちなみに使ったものは @uit/glitch-image というパッケージ。 一応免責として 2020/09/16 時点での公式ドキュメントにない範囲のハマりであり、連休にでもドキュメントに Pull Request でも送ろうかな。と思っているので、割とすぐに outdated な情報になるかもしれません。 Stencil の吐き出す Custom Elements と型定
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 に記述するだけで、ひと
2020 年は一般的なソフトウェアエンジニア。というよりは少し経路が違う仕事を主にやっていたので、良い機会なのでまとめようと思います。 やったこととしては多岐に渡って価値を発揮できたかなと思う一方、心情的にはしっくりこない一年でした。 要約 業務内容だけ見たい人は実際の業務についてへ 採用ブランディング/DX改善/コミュニティ活動などを行うチームを設立し、回していた それと並行して、採用活動や選考フローの改善、LINE DEV DAY 2020 Frontend の管理を行った 来年はまた事業側の仕事をやっていくつもりである 出来事 先に今年は大きな出来事が2つあったので、その変遷を紹介します。 Front-End Advocates TF を立ち上げた 今年の 3 月に Front-End Advocates TF という Task Force(以下 TF) を社内で設立しており、それの
最近 zenn.dev がソーシャルで流行っている。サービスコンセプトであったりアプリケーションの品質だったりといろいろな観点で各々が言及しているけれど。個人的には情報を発信した人に対して金銭的なインセンティブがある点がかなり面白いなと。 私も以前は Patreon を開設していて大体 $15k/mo くらいの支援をもらっていたこともあるけれど、OSS などに対して出せる出力が一定ではない状態で支援してもらうのが少し申し訳ない気持ちもあり、なんだかんだクローズしてしまった過去があったり。 そんな中、ワンショットの支援ができる zenn.dev はかなり面白いなと思いつつも、プラットフォームで記事を書くことが多くなると重厚な記事を用意したくなり、結局は億劫になってしまうサイクルが発生するのを Qiita で学び、結局書いた記事は伸びるけれど書くことそのもののモチベーションが低下したという経験
採用技術問わずWebサイトに設置できるソーシャルシェアボタンを Web Component として開発する2020/12/08 先日、「”地上最強”のエンジニア向け情報サービス」を謳うTechFeed Proが新規アップデート。様々な機能追加がなされ、更に多くの情報収集が可能となりました。 今回はそんな TechFeed のアップデートで追加された URL 共有機能の導線として、 techfeed-share-button パッケージを OSS として公開した記録を紹介します。 本記事では、 依存側の技術要件が不明または多岐に渡るケースの選択肢としての Custom Elements NPM パッケージとして提供と CDN SDK としての提供の両立 あたりの情報について紹介できればと思います。 ※ TechFeed との関係性について TechFeed Pro については構想段階で相談を
今年はフルリモートを契機に、東京都心から郊外や関東4県へ引っ越すケースを TL や職場でよく見る一年でした。 「家賃は下がる上に静かだし部屋も広くなった」みたいな話を聞くたびにそれも良いなと思いつつも、冷静に考えると私は都心以外で生活できる場所はかなり限定されるなと思うので、その辺りについて改めて残しておこうと思います。 これまでの生活について 就職による上京まで 大阪の北摂と呼ばれるエリアの実家暮らし 大阪梅田まで電車で30分、京都河原町までも30分程度 周りにはコンビニとスーパーしかない 映画を見たいときは15~20分くらいチャリを漕いでイオンシネマに行く 上京〜2019/08まで 東京・千駄ヶ谷〜代々木あたりのエリアで生活 新宿まで徒歩10~15分、渋谷まで徒歩40分程度 2019/08~2020/03まで 神奈川県横浜市 上大岡の方 新宿まで電車で1時間ない程度 2020/03まで
年の瀬なので、私自身が今年利用した技術をベースに技術スタックをまとめてみようと思います。 とはいえ Web Standard といった広い対象から、フレームワークやライブラリまで、粒度の違うものを全て言及するのは無理があるというもの。特に強く言及できるものは個別で説明しつつ、最後に利用する機会がなかったものも最後に記載する形で。 以下常体。 追記: マイナー企業のようなので一応書いておきますが、筆者は本業ではLINE株式会社という組織でいわゆるエンジニアリングマネージャーと言われるような業務とその採用に関わる仕事をしています。 利用した技術一覧 HTML/CSS/JS みたいなことを書いてるとキリがないので、独断と偏見で区分けして適宜漉いています。特に利用する機会が多かったものは太字でピックアップ。 Frontend Language/Platform TypeScript JavaScr
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 で動作させるために
次のページ
このページを最初にブックマークしてみませんか?
『potato4d D(iary)』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く