はてなブックマーク

明けましておめでとうございます。 @h13web です。 今年の読み初めは、ニコラス・G・カーの「ネット・バカ」でした。 原題は「The Shallows」 脳の可塑性（かそせい） メディアはメッセージである テクノロジーは批判され、受け入れられていく 紙の書籍は消えるのか 作り変えられていくわたしたち 原題は「The Shallows」 その扇動的な邦訳タイトルにより、引用時には原題の「The Shallows：What What the Internet to Our Brains」が併記されることが多いように思います。 訳者自身によると、これは本書のベースとなっている以下論文のオマージュだそうです。 Is Google Making Us Stupid? バカから始まり Shallows （= 浅瀬、思慮が浅い人たち ? ）や Stupid と、ページをめくりたい気持ちを掻き立てられ

4月に発売された書籍「HTML解体新書」。その電子版は今までPDF版しかありませんでしたが、このたびリフロー版が発売となり、Amazonでも購入できるようになりました。 この記事では、HTML解体新書のリフロー版電子書籍を実際に作成した際の流れについて、なぜ作成したのか、どうやって作成したのか、どのようなトラブルがあったか、といった点をご紹介します。リフロー版の電子書籍の作成、出版を検討されている方の参考になれば幸いです。 リフロー版の電子書籍を作った理由 リフロー型と固定レイアウト型 リフロー型とアクセシビリティ リフロー版の電子書籍を作るには 電書協 EPUB 3 制作ガイド 実際の制作の流れ テキスト原稿を用意する XHTMLを作る その他EPUBに必要なファイルを準備する OCFコンテナのメタデータを用意する mimetype container.xml OPFパッケージのデータを

初めまして。弁護士ドットコム株式会社でエンジニアをやっている井出です。 弊社は 2022 年 2 月から Creator's Blog を始めております。 その記念すべき最初の記事として 弁護士ドットコムサービスのビジネスと共にみるマイクロサービスの進化 を投稿いたしました。 こちらの記事で弊社がマイクロサービス化に挑戦したこと、その後の課題をどう解決していったかについて分かりやすくまとめられておりますので、ぜひ一読してから今回の記事を読んでみていただければと思います。 さて、上記記事内でも触れられているとおりマイクロサービス化プロジェクトである Gavel プロジェクトでは様々な課題が出てきました。 今回はその中の 1 つである、 ビジネス分析が不十分で一部のサービス境界が想定と異なり、開発速度が低下 について、何をどう間違え、なぜ開発速度が低下したのかについて振り返ります。 もしこれか

はじめに 弁護士ドットコム デザイナーの林（@taka_piya）です。 弁護士ドットコム 案件管理システムでは、アプリケーションとUIの状態管理にXStateを用いたステートマシンでの管理を導入しています。 この記事では、UIデザインの考え方にステートマシンを導入し、実装まで一気通貫で行う方法と、そのメリットについて説明します。 はじめに UIは2つの要素からなっている ステートマシンを理解する 定義 状態遷移図 ステートマシンを使ったUIデザイン〜実装プロセス ステートマシンを定義する Figmaで表現する JavaScriptで表現する ステートマシンをアプリケーションに適用する UIデザインにステートマシンを導入するメリット 振る舞いに集中できる チームの共通認識として使える 変更に強い おわりに 関連ドキュメント ALPS-ASD UIは2つの要素からなっている Android

こんにちは。クラウドサイン Product Engineering 部です。 今回 Vue Fes Japan Online 2022 にてプラチナスポンサーとして参加させていただきました！ 本記事は登壇させていただいた「Design System Meets Vue.js」の紹介をしつつの Vue Fes Japan Online 2022 全体の参加レポートとなります。 なお各セッションのアーカイブは以下にございますので、見られていない方はぜひご覧ください。 メドピアトラック FUTURE トラック クラウドサイントラック Design System Meets Vue.js エンジニアリングマネージャーの芳賀です。 今回はクラウドサインとデザインシステムの成長にフォーカスをあてて発表させていただきました。 デザインの管理系ツールとフロントエンドの管理系ツールの組み合わせは膨大にあり、

検索しているユーザー（イメージ） はじめまして。弁護士ドットコム事業本部でエンジニアをしている狩野です。 弁護士ドットコムのサービスにはいくつかの検索機能があります。主に「みんなの法律相談」「弁護士検索」「弁護士ドットコムニュース」などで使われています。 これらは Apache Solr（以下、Solr）という検索システムで動いていました。 これを OpenSearch という別の検索システムに載せ替えました。 経緯 選定 機能 モジュール AWS サービス 実装 リリース さいごに 経緯 弁護士ドットコムのサービスにはいくつかの検索機能があり、そこで Solr を使っていました。 確認できた限りでは 2013 年から 10 年近くの間、使っていたようです。もっと以前から使っていた可能性もあります。 だいぶ昔の話なので Solr が導入された経緯などは不明ですが、当時の判断としては Sol

9/24 〜 9/25 まで開催された PHP Conference 2022 に弁護士ドットコム株式会社は、ゴールドスポンサーとして協賛し、2 名のメンバーが登壇しました。 この記事では、登壇者 2 名による登壇内容の紹介と感想をお届けします。 登壇内容の紹介とカンファレンスの感想 Naoki Tsuhciya (@TSUCHIYA_Naoki) 登壇内容について カンファレンスの感想 komtaki (@komtaki) 登壇内容について カンファレンスの感想 おわりに 登壇内容の紹介とカンファレンスの感想 Naoki Tsuhciya (@TSUCHIYA_Naoki) 登壇内容について 「理解共有どうしてますか？」というタイトルで、ゴールドスポンサー LT 枠（5 分）で登壇しました。 このセッションでは、alps-asd についてご紹介しました。弁護士ドットコムに入社してから 3

弁護士ドットコム株式会社 Creators' Blog の運営開始から半年が経過しました。何を目指して、どのような運用をしていたか公開します。 記事の公開戦略やレビュー体制にも触れているので、技術ブログを立ち上げようとしている人の参考になれば幸いです。 技術ブログを立ち上げた理由 記事内容の方針 レビュー体制 定期的に記事を発信するために 立ち上げ初期 3か月後~ うまくいった施策 月ごとに、Spread sheetで書いてくれる人をまとめ 「ブログ期待」Slackスタンプ 月1の編集会議 失敗した施策 Google Formで記事のネタを募集 半年でできた拡散戦略 成果 はてなブックマークランキング Twitterでの絡み 採用 これから 技術ブログを立ち上げた理由 弁護士ドットコムでは社外に向けていろいろな情報を発信していますが、発信の方法は各部署ごとにさまざまで、ブログも乱立していま

はじめに こんにちは。弁護士ドットコム株式会社エンジニアの砂川です。 社名と同じ弁護士ドットコム事業本部の開発部でエンジニアリングマネージャをしています。 弁護士ドットコムではいくつかのプロジェクトチームに分かれてそれぞれのミッションに取り組んでいます。 その中で今回は掲題の Working Agreement 1 2 を作成しながらチームビルディングをしていった話をご紹介します。 はじめに 導入 Working Agreementってなに？ 導入の背景 導入の流れ 実践 導入初期 追加されたルール例 導入から3か月 追加されたルール例 導入から半年 追加されたルール例 導入から一年 追加されたルール例 まとめ 導入 Working Agreementってなに？ Working Agreement とはチームで仕事をするときの約束事を書いたものです。会議をいつ行うのか、流れはどのように実施

こんにちは。弁護士ドットコム本部デザイン部の細貝です。 少し前になりますが「DESIGNING CONNECTED CONTENT デジタルプロダクトの長期的な成長を支える構造化コンテンツ」の社内勉強会を有志で行いました。 とても良い本だったので、社内外への布教がてら勉強会の様子を紹介したいと思います。 勉強会のきっかけ 情報設計についてもっと知りたかった チームで実践する前提の内容なので、みんなで勉強するのに向いていそうだった やったこと 冒頭に要約パートを用意する 書籍内で紹介された手順をグループワークで試す 監訳者の石橋さんへの質問会と、関連するツールや情報の紹介 勉強会に参加したメンバーの反応 勉強会後の変化 カテゴリ設計の話をチームで話す機会ができた 施策の打ち合わせにモデル図が添付された資料が出てくるようになった 勉強会を振り返って 繰り返し読んだり周辺知識を学びたい もっと情

こんにちは。弁護士ドットコム クラウドサイン事業本部 Product Engineering 部の篠田 (@tttttt_621_s) です。 普段は Vue.js と TypeScript を使ってクラウドサインのフロントエンドの実装を担当しています。 本記事では、クラウドサインのフロントエンドミーティングと、その勉強会で実際に発表した内容を紹介いたします。 フロントエンドミーティングの内容 実装の相談や改善提案 技術情報の共有 ぷち勉強会 ぷち勉強会で発表した内容 概要 ISR: Incremental Static Regeneration ISR とは ISR の動作例 ISR の問題点 On-demand ISR : On-demand Incremental Static Regeneration On-demand ISR とは On-demand ISR の動作例 おわりに

こんにちは。弁護士ドットコム クラウドサイン事業本部で SRE をしています、大内と申します。 クラウドサイン事業本部の SRE ではサービスの可用性、信頼性の向上や開発の高速化、省力化を目指した開発を日々行っています。 クラウドサイン事業本部では本体アプリケーション（以下本体）のソースコード管理を GitLab で行っています。 そして、本体とその関連サービス、バッチなどを 1 つのリポジトリで管理するモノレポ構成を取っています。 今回は、そんなモノレポ構成のリポジトリの GitLab CI パイプラインを分割し、開発速度を大きく改善した話をご紹介します。 CI 分割以前の CI 構成 モノレポ構成プロダクトの CI が抱えていた課題 他のテストの待ち時間の影響を受けて待ち時間が伸びる テストが失敗するとすべてのデプロイがブロックされる .gitlab-ci.yml の肥大化による、コー

はじめに こんにちは。弁護士ドットコム株式会社エンジニアの@shinfkdです。 普段は社名と同じ弁護士ドットコムというサービスを運営する開発部で、部長をやっております。 本記事では、弁護士ドットコム事業における技術課題に対する取り組み、 Tech Focus Day(通称 TFD)についてご紹介します。 はじめに Tech Focus Day(TFD)って何 TFDをはじめた背景 TFDの前身 Bug Fix Week TFDの誕生 TFDの運用と変遷 TFD Ver2.0 クエストボード制 TFD の成果とまとめ Tech Focus Day(TFD)って何 弁護士ドットコムでは現在、毎週金曜日を Tech Focus Day(以下 TFD) と称し、集中的に技術課題の対応をしています。TFD は Tech に Focus する Day、すなわち技術課題に集中して取り組む日という意味で

こんにちは。弁護士ドットコムの太田です。 毎年、5月の第3木曜日は "Global Accessibility Awareness Day (GAAD)" とされています。世界的にデジタル分野のアクセシビリティを考える日ということで、アクセシビリティ関連のイベントが盛り上がります。日本でもさまざまな発表がなされたり、イベントが開催されたりします。 そんなわけで、今年2022年の第三木曜日である5月19日に、GAAD Japan 2022 というイベントが開催されました。このイベントで「大変だ アクセシビリティ なにすれば 〜川柳で見るアクセシビリティ再入門〜」と題してお話ししてきましたので、その様子や裏話をご紹介します。 このセッションのコンセプト 紹介した川柳と解説 大丈夫 ガイドラインが ちゃんとある まず欲しい 代替テキスト あと見出し いつだって 忘れちゃいけない キーボード これ

弁護士ドットコム　人事室 労務チームの後沢です。 16年間の専業主婦から、弁護士ドットコムにパートで入社しました。その後、正社員登用され、今は人事室 労務チームで働いています。 (人事室 労務チームについてはこちらの記事もおすすめです: 職域接種の舞台裏 - 「社員が正しい選択ができるように」労務・竹内さんの奮闘記録) これはなに？ 16年間の専業主婦、いや、生まれてからずっとプログラミングとは無縁のわたしが突如「推し活」のためにプログラミングを学び、だいたい役に立たないジャニーズオタクの能力が、今回ばかりは仕事上でも役に立った話です。 具体的には 社内健康診断の予定を従業員のカレンダーに登録し、通知メールまでする話。「プログラミングなんて難しい〜！無理！無理！」と思っている方への勇気づけになったら嬉しいです！ ジャニーズオタクの行動力と根拠ない自信でプログラミングを学ぶ まず、わたしがプ

はじめまして。 弁護士ドットコムの弁護士ドットコム事業本部デザイン部の内藤です。 2017年10月にプレイヤーとして入社して、マネジメントの知識がほとんどない状態からマネージャーになり、現在は部長をさせていただいております。 今回は、僕自身の振り返りも含めて、デザイナーがマネジメントを行う際に参考になる書籍をご紹介します。これからマネージャーになる方や、マネジメントに興味が湧いてきた、というデザイナーの方におすすめです。 まずはマネジメントの全体像を知る マネジメント[エッセンシャル版] - 基本と原則 デザイン組織の事例を知る デザイン組織のつくりかた　デザイン思考を駆動させるインハウスチームの構築＆運用ガイド 隣接する開発組織への理解を深める エンジニアリング組織論への招待　～不確実性に向き合う思考と組織のリファクタリング 周辺組織への理解を深める THE MODEL（MarkeZin

こんにちは。弁護士ドットコム デザイン部の林（@taka_piya ）です。普段は弁護士向けの業務システムのデザインをしています。 10月から3月まで週1回、デザイン部内でJavaScript勉強会を開催しました。この記事ではその具体的な内容と成果、振り返り、頂いたフィードバックをご紹介します。ぜひ社内勉強会のネタに！ JavaScript勉強会をはじめたきっかけ （1）作るプロトタイプの幅が広がる （2）漏れのないUI設計ができるようになる 勉強会の内容 基礎編 基本を一歩ずつ学ぶ 身近なお題を取り入れた演習をやる 周辺知識にも触れる 応用編 （１）Vue.jsの基本を学ぶ （2）作りたいミニアプリを構想から実装まで一人で作る 成果発表会 みんなのミニアプリを紹介 どのような成果が生まれたか 改善点 想定した期間より長くなってしまった 途中からレベル差が生まれてしまった 双方向のコミュニ

こんにちは、弁護士ドットコムでエンジニアをやっている @namizatork です。 今回は、弊社もTシャツスポンサーとして協賛している PHPerKaigi2022 に登壇し、「PHPのエラーを理解して適切なエラーハンドリングを学ぼう」というタイトルでお話ししました！ PHPerKaigi2022 4/9(土) 20:15 ~ 20:35 Track A speakerdeck.com 今回の PHPerKaigi では、すべてのセッションが事前の録画収録になっていました。普段、僕は登壇1日前に徹夜して資料を仕上げるので、いつも他のセッションを見る余裕がないのですが、今回は心にゆとりを持って当日を迎えることできました！（いつも事前に仕上げろ） 今回は、せっかくなので day0（前夜祭） にオフライン会場で自分の録画収録を見てきましたが、自分の録画した姿をみんなに見られてるのは結構恥ずかし

5年——。 編集チーム連絡用のSlackに初の投稿があったのが2016年12月29日ですから、正確には5年と3ヶ月。そんな長い執筆期間を経て、ようやくみなさまにお届けできることになりました。それがこの書籍、「HTML解体新書 - 仕様から紐解く本格入門」です。 「HTML解体新書」カバー画像 ご購入、ご予約は以下からどうぞ! Amazon ボーンデジタル(紙版) ボーンデジタル(PDF版) ということで、こんにちは、弁護士ドットコム技術戦略室セキュリティチームの太田と申します。普段はWebのアクセシビリティ関連やセキュリティ関連の仕事をしているのですが、このたびHTMLの本を出版することになりました (もっとも、この本は入社前から書いていたもので、普段の業務と直接の関係はありません)。 この記事では、本の内容や執筆の経緯についてご紹介します。最後まで読むと、少しお得な情報があるかも……?

こんにちは、弁護士ドットコムでデザイナーをしているhosogaiです。 ふだんは https://www.bengo4.com/ サービス内のUI改善などをしています。 先日このブログ「弁護士ドットコム株式会社 Creators’ blog」のデザインカスタマイズを行った際にCSSの新機能をいくつか試す機会があったので、今回ここで紹介させていただこうと思います。 きっかけ PostCSSとは postcss-preset-envの使い方 npm packageで使う場合 CodePenで使う場合 試せるCSSの機能 Stage0（意欲的） Stage1（実験） Stage2（許容） Stage3（包含） Stage4（標準化） 新機能のNesting CSS Moduleを使ってみる Nesting CSS Moduleのルール 直接入れ子にする場合 @nestを使う場合 プラグインでの挙

はじめに こんにちは。弁護士ドットコム UX エンジニアの白井です。社名にもなっている 弁護士ドットコム というサービスを運営する専門家プラットフォーム事業本部に所属し、普段は開発業務やユーザーリサーチに携わっています。 この記事では、デザイナーとエンジニアが日々の開発を行ううえで課題となっていた HTML テンプレートの実装方法について、どのようなプロセスを通じて改善していったのかについて詳しくご紹介します。 はじめに HTML テンプレートとは HTML テンプレートを扱う仕組み HTML テンプレート開発上の課題 なぜ HTML テンプレートが重要か (1) HTML マークアップの品質に悪影響がある (2) 開発効率への影響が大きい "Tech Focus Day" のテーマとして改善活動を開始 いきなりのピボット。そして本当に必要だったもの あらためて問題定義 HTMLテンプレー

初めまして、弁護士ドットコムでエンジニアをやっている @namizatork です。 第1回目で @komtaki さんが書いた 「弁護士ドットコムサービスのビジネスと共にみるマイクロサービスの進化」 がプチバズりしていたので第2回目となる今回、少し 滑らないか 心配ですが頑張って書きます。 本記事では、サービス開始から10年以上が経過したサービスのユニットテストを改善したという内容をお話しします。 ユニットテスト改善チームの立ち上げ 改善前に必要なことを明確化 キックオフ ユニットテストを並列実行する GitLab parallel 時間の掛かっているユニットテストを特定する 実行方法 テストが遅い原因を特定&解決 (1) 多くのループ処理やスリープ処理を利用している (2) 誤ったsetUpやtearDownの使い方をしている (3) DBに依存しており、アクセスに時間が掛かっている

初めまして。弁護士ドットコム株式会社でエンジニアをやっている@komtaki です。弊社でも開発ブログを開設し、情報発信を強化します。サービス開発事例やデザイン活動を発信するので、お楽しみに。 本記事では、事業とマイクロサービスの視点から、基幹事業の 1 つである弁護士ドットコムサービスの進化を振り返ります。 昨今、クラウドネイティブやマイクロサービスといった概念が普及しました。弊社でもサービスの課題を解決するために、クラウドネイティブを掲げて取り組んでいます。 弁護士ドットコムサービスとは ビジネスとアーキテクチャの変遷 1. モノリス期 - EC2 2. マイクロサービス導入期 - EC2 on Owned Kubernetes どう分けるか どう連携するか どう運用するか 大きな知見と新たな課題 3. マネージドマイクロサービス期- AWS ECS 次期基盤候補 EKS vs ECS