Blog - LINE ENGINEERING

TAG ARCHIVES: UIT

UIT Meetup vol.20『これがぼくらのスタンダード』を開催しました
Takuma HANATANI2023-09-12
Engineering Manager at LINE Corp. @potato4d
9月8日に、フロントエンドコミュニティ UIT の20回目となるミートアップ UIT Meetup vol.20『これがぼくらのスタンダード』を開催しました。本記事では、イベントの内容について振り返っていきます。なお、本編のアーカイブについては以下の YouTube 動画より閲覧が可能となっております。まだ見ていないかた、見逃したかたはぜひ視聴いただければと思います。本記事では、各セッション紹介でチャプターへのリンクを貼り付けているため、特定のトークから再生を始めることも可能です。 YouTube: https://www.youtube.com/watch?v=kNvXW2gqOfA UITとは？ UIT は、 LINE のメンバーが中心となって発足した、「User Interface × Technology」を掲げるコミュニティです。 LINE の東京オフィスのメンバーからはじまったコミュニティですが、現在では外部コミュニティの方々との Podcast での交流、福岡でのミートアップ開催や、その他のフロントエンドイベン
Figma Dev ModeとVariablesでデザイナーとエンジニアの連携を強化
しまむら2023-08-30
UI Designer
はじめにこんにちは。フロントエンド開発センター(UIT) のUIデザイナーしまむらです。 LINEが保有する膨大なデータを安全かつ効率的に利活用できるData Catalog「IU Web」、UIツールキット「Astro」、アイコンライブラリ「LAICON」のデザインを担当しています。フロントエンドエンジニアやプロジェクトマネージャに近いところで、エンジニアとデザイナーの間に生じる認識のズレが起きないよう、Figmaを使ってUI設計をしています。 Figma Config 2023 アップデート Figmaカンファレンス「Figma Config 2023」にて、新機能が続々とリリースされました。Dev ModeとVariablesを使って、ハンドオフプロセスをスムーズにし、デザイナーとフロントエンドエンジニアの連携がさらに強化できる2つの機能についてご紹介します。 Figma Dev Mode Figma Variables 1. Figma Dev Mode スイッチをOnに変えれば、Dev Modeに切り替わります。今まで、フロントエンドエンジニアがFigma
- UIT
- UIUX
Bootstrap 5.3.1がリリースされました。
JuYoung Lee2023-08-01
はじめにこんにちは。フロントエンド開発センター(UIT) ジュヨンです。 LINEはOSS貢献の一環として、Bootstrap日本語リファレンスの翻訳・運営を担当しています。また、2021年5月よりBootstrapのOSSスポンサリングも行っています。 Bootstrapのv5正式公開から約2年、2023年5月30日に待望のv5.3が登場、先日はv5.3.1がリリースされました。皆さん、利用されているでしょうか？ v5からv5.3.1に至るまでエキサイティングな新機能と改善がたくさんがありましたが、ダークモード対応に伴い、Color modeやCSS variablesがサポートされたことが一番嬉しいです。これを中心でいろんなコンポーネントの扱いやユーティリティが変更されました。今回はv5.3からの大きめの変更を中心に紹介していきます。関連する過去の記事 2022-01-27 Prettier への支援開始のお知らせと企業が OSS に対して支援するということ 2021-05-12 Bootstrap5がリリースされました！ 2021-01-21 Bootstrap5 al
- UIT
- OSS
- Front-End
- CSS
- Bootstrap
LINE社員1,361名の"色覚に関するアンケート"
Akihiko Okazaki2023-07-14
Front-end Engineer
はじめにこんにちは。フロントエンド開発センター UIT Accessibilityタスクフォース岡﨑です。私たちは、Webサイトのアクセシビリティに関するガイドラインの策定・推進、社内に向けたアクセシビリティの勉強会やe-ラーニングを通じて、LINEとそのファミリーサービスのアクセシビリティ向上を目指しています。色に対する配慮アクセシビリティの国際規格となっているWCAGでは、テキストにおける色の取り扱いで以下のことが求められています。色に依存した表現にしないことコントラスト比を確保することなぜ、色に対する配慮が必要なのでしょうか？困っているのはロービジョンユーザーだけではない LINE STYLEの"Always Data-driven"に従って、LINE及びLINEグループ会社の社員に"色覚に関するアンケート"を実施し、1,361名の協力を仰ぐことができました。集計結果は社内のアクセシビリティ勉強会で共有し、反響が大きかったので外部にも公開することにしました。属性情報性別割合女性 46.8% 男性 51.5%
- UIT
- Accessibility
2023年にパララックスをCSS、JS、Vue3で実装！LINEポイント10周年記念サイトの実装例
Shoyo Kyo2023-07-04
Front-end Engineer
LINE株式会社 UIT3室 Front-end Dev3チームに所属しているキョウショウヨウです。 2023年6月20日に「LINEポイント10周年記念サイト」を公開しました。このサイトはパララックスデザインが採用されたLPです。今回はライブラリを使わずにパララックスデザインをCSS、JS、Vue3で実装する作り方について説明します。 LINEポイント10周年記念サイト※ 期間限定公開のため、2023年8月以降は見れない可能性があります。 LINEポイント10周年記念サイトでは3つの大きな取り組みをしています。 SNSシェア時に利用する、OGP画像の大量生成ツール & 生成APIの作成 Nuxt3を利用した、SSR、SSGハイブリットアプリの開発パララックスデザインの実装今回は3番の、Vue3（Nuxt3）で作成したLPにパララックスデザインを導入するための作り方についてお話します。私、個人としては7年ぶりにLP開発をおこないました。今回改めてパララックスデザインの実装方法について調査をおこなったのですが、フロントエンド技術の進化を感じる事ができました
アプリケーションコードに変更を加えないNode.js Native ESMへの移行
Konosu Kazushi2023-05-25
Front-end Engineer
はじめにこんにちは。フロントエンド開発センター(UIT) Front-end Dev.9チームの鴻巣(@kazushikonosu)です。LINEスキマニおよびLINE Creators Marketのフロントエンド開発を担当しています。 LINEスキマニのフロントエンドチームでは、React/TypeScript製のWebアプリを開発しています。主にクライアントサイド向けのコードを扱っていますが、SSRのため同じリポジトリ内でNode.jsを使って実行されるTypeScriptコードも扱っています。クライアントサイドのモジュールバンドラとして長らくwebpackが使われていましたが、webpackを使い続けることでチームのパフォーマンスに影響する二つの問題に直面していました。ひとつめは、開発環境におけるビルドパフォーマンスの問題です。webpackが差分が発生するたびに全体のビルドとバンドルを行うアプローチを採用している以上、開発時のビルド時間は遅くなってしまいます。ふたつめは、ビルド環境の設定のメンテナンスコストの問題です。さまざまな要件に対応するため、これまでの開発を通して長
UIT Meetup vol.19『デザインシステムのリアル』を開催しました
odan2023-03-24
Front-end Dev2チーム
3月15日に、フロントエンドコミュニティ UIT の19回目となるミートアップ UIT Meetup vol.19『デザインシステムのリアル』を開催しました。本記事では、イベントの内容について振り返っていきます。なお、本編のアーカイブについては以下の YouTube 動画より閲覧が可能となっております。まだ見ていないかた、見逃したかたはぜひ視聴いただければと思います。本記事では、各セッション紹介でチャプターへのリンクを貼り付けているため、特定のトークから再生を始めることも可能です。 YouTube: https://www.youtube.com/watch?v=poMrzn_2wLY UITとは？ UIT は、 LINE のメンバーが中心となって発足した、「User Interface × Technology」を掲げるコミュニティです。 LINE の東京オフィスのメンバーからはじまったコミュニティですが、現在では外部コミュニティの方々との Podcast での交流、福岡でのミートアップ開催や、その他のフロントエンドイベントとの共
LINE NEWS フロントエンドの自動テストの改善
Naoto Ikuno2023-02-24
Web Front-end Engineer
この記事は UIT 新春 Tech blog 2023 4日目の記事です。こんにちは。LINEフロントエンド開発センターの幾野(ikuno)です。普段は LINE NEWS のフロントエンド開発をしています。 LINE NEWS では昨年テストをたくさん書いた昨年 LINE NEWS ではたくさんテストを書きました。当初 78 ファイルだったテストファイルは半年で 150 ファイルに倍増しました。テストカバレッジも statements 33.6% から 64.4% まで改善しました。昨年当初のテストカバレッジ現在のテストカバレッジ今回はどういったテストを書いたらうまくいったかについて書いていきます。テストは意図しない breaking changes を防ぐために書くそもそも、なぜテストを書くのでしょうか? 筆者は、テストは意図しない breaking changes を防ぐために書くと思っています。もし意図しない breaking changes が起きたら一番に影響を受けるのはユーザーです。また、
- frontend
- UIT
- JavaScript
- test
静的リソースをCDN配信する社内サービス『Abyss』のフロントエンドを作り直した話
Shirahata Keito2023-02-22
Front-end Engineer
こんにちは、LINEフロントエンド開発センターDev7チームの白畑です。主にUITで使用している社内サービスの新規開発から運用・保守等を行なっています。この記事ではDev7チームが開発・運用しているAbyssと呼ばれる社内システムのフロントエンドを作り直した話をしたいと思います。画期的なCDNデプロイツール「Abyss」 LINEは様々なサービスを展開しており、それらのプロジェクトで個別にCDN配信を行なってしまうと以下のような問題があります。・リソースの管理がしづらい・独自の配信基盤が乱立する・独自の配信基盤を構築するための開発・運用コストがかかる・プロジェクトメンバーが参加した際や異動した際に学習コストがかかるこのような問題をなくすため、CDN配信の標準サービスとしてAbyssが誕生しました。開発者は以下の最低2つの手順のみで静的リソースをCloudFrontで配信することができます。 1. Abyssのフロントエンド(Orth)でプロジェクトを作成2. AbyssのCLI(reg)を使ってローカル環境もしくはCI上からリソースをアップロード構成 Abyssは3つの
- frontend
- UIT
LINEドクターフロントエンド開発の流れ
Youngjin Jang2023-02-21
Web Front-end Engineer
こんにちは。LINEフロントエンド開発センターのYoungjin Jangです。この記事ではオンライン診療サービスLINEドクターの概要と、フロントエンド開発の流れについて紹介します。LINEドクターは2020年リリースし、医師と患者の距離を縮めることを目指してサービスを展開しています。多くのユーザーのコミュニケーションを支えるLINEだからこそできるオンライン診療サービスの特徴と、その開発の様子を、この機会に是非知っていただければと思います。こちらがLINEドクターの入口となる画面です。ここからエンドユーザーはオンライン診療を申し込んだり、薬の配送を申し込んだりします。オンライン診療の予約が確定すると、ユーザーはLINEでのビデオ通話を使って診療を受けます。予約し、受診し、薬を受け取るまでをLINEを通して完結することができるサービスです。 LINEドクターのフロントエンド開発は、概ね下記のような流れになります。バージョンごとに企画からデプロイまでをワンサイクルで開発します。各段階でフロントエンドエンジニアが何をしているのか、今からお話しします。企画・デザイン新規機能に

1 2 3 4 5