Blog - LINE ENGINEERING

TAG ARCHIVES: UIT

2021 LINE NEWS UIT Workshop レポート
Takuya Abe2022-03-09
こんにちは。 LINE フロントエンド開発センターの安部です。私が所属するフロントエンドチームでは月間154億PV(2021年8月時点)の大規模サービスであるLINE NEWSの機能追加・改善に日々取り組んでいます。 LINE NEWSの開発を継続していく中で改善のアイデアや要求は日々蓄積していきます。エンジニアもそれぞれ理想やモチベーションを持って開発を続けていますが稼働中のサービスに対しアーキテクチャやフレームワークの刷新といった大きな変更を伴う改善に着手できる機会はそう多くありません。またLINE NEWSは企画・開発・QAが分業体制になっているため開発側の都合だけでは作業の優先順位付けができず技術的負債が放置されてしまうこともあります。その少ない機会への備えや現実的な制約へのフラストレーション発散の場としてLINE NEWSのフロントエンドエンジニア全員で「LINE NEWSを作り直すなら？」というテーマで各メンバーが抱いている理想や、その理想の実現を阻害する原因について話し合うWorkshopを実施しました。今回の記事ではそのWorkshopの様子を紹介します。多人数チ
- frontend
- UIT
続 LINE 社内用 NPMパッケージの管理戦略
Takayuki Yoshizawa2022-01-28
みなさんこんにちは。UIT Front-end Dev7チームの吉澤です。主にUITが扱う社内サービスやミドルウェアの開発/運用などを行っています。またDev7チームにはLIFF（LINE Front-end Framework）というLINEが使っているフレームワークの開発をしているメンバもいます。他のUITのチームとは一風変わった特徴的なチームです。このチームの業務の1つにUITが管理しているPrivate npm registryの拡張、関連機能開発/運用があります。実はこれに関連した全社的にnpmが使えなくなるという障害が2021/2/15にLINE社内で発生していました。今回はその障害について話しながら私たちUITが管理しているPrivate npm registryについての話を書きます。 Private npm registryについて npm(node package manager)に関して改めて説明の必要はない気がしますが、Private npm registryって何だろう？という疑問は浮かぶかもしれません。文字通りnpm, incが管理している公式のregis
- frontend
- UIT
- npm
Prettier への支援開始のお知らせと企業が OSS に対して支援するということ
Takuma HANATANI2022-01-27
Engineering Manager at LINE Corp. @potato4d
フロントエンド開発センター(通称: UIT) Front-End Dev.9 チームの花谷(@potato4d)です。『UIT 新春 Tech Blog』 1/27 の今回は、UIT が主体となって行っているフロントエンド領域の OSS のスポンサー活動についてご紹介します。 LINE のフロントエンド領域関連の OSS スポンサリング状況 LINE では、2022年1月現在以下のフロントエンドに関する OSS の支援実績があります。 Vue.js 2021年4月より支援開始し、継続中毎月500ドルを Evan You 個人の Patreon アカウント経由で支払い Husky 2021年3月より支援開始し、継続中毎月100ドルを Open Collective 経由で開発チームのアカウントへと支払い Bootstrap 2021年6月より支援開始し、継続中毎月100ドルを Open Collective 経由で開発チームのアカウントへと支払い組織としても OSS のスポンサリングへの意識が高まり、 2021 年より活発に支援している
- UIT
2022年におけるフロントエンド開発のベースライン
Alan Davalos2022-01-25
Front-end Engineer - @AlanGDavalos
TL;DR:2022にフロントエンド開発で最も考慮すべきユーザー環境は、パフォーマンスでは低スペックのAndroid端末、標準仕様では2年前のSafari、そしてネットワークでは４Gです。それに対してはJSへの過剰依存などが原因で主にパフォーマンスの面でのウェブ全体の対応がよくありません。こんにちは！LINEフロントエンド開発室のダバロスアランです。この記事のタイトルを見て「釣りタイトルですね〜」と考えている方がいると思いますが今回に限ってはそれを大目に見てください。それはなぜかと言いますと、2021年から2022年にかけて私たちフロントエンドエンジニアが全体的に考え方を改める必要が出るほど大きな変化がありました。その変化とそれに対して私たちフロントエンドエンジニアがちゃんと応えられているかを色々なデータを見て分析したいと思います。 2021年にあった最大の変化 ~ Internet Explorerのリタイア 2021年には色々な変化はありましたがInternet Explorer(以下 IE)がついにリタイアされることになりました。それは2021年5月にMicrosoftが正
- frontend
- UIT
- JavaScript
- CSS
社内のデザイナーの業務をサポートする LDSG Figma Plugin の工夫したところ、ハマりどころ
Amon Keishima2022-01-25
Front-End engineer at LINE Growth Technology
こんにちは！LINE Growth Technology UITチームの keishima です。普段はフロントエンドエンジニアとして LINEポイントクラブの開発に携わっています。本記事では、 UIT 新春 Tech blog 5日目として、社内向けに作った Figma プラグインの技術的な面にフォーカスした記事をお届けします。Figma プラグインを作った背景や、プラグインの機能紹介は、同時に公開したこちらの記事をご覧ください。（先にそちらを読むのがおすすめです！） Figma プラグインとは？どうやって作るの？みなさんは Figma を使ったことはありますか？ Figma とは UI デザインを行うためのツールで、類似のものに Adobe XD や Sketch などがあります。Figma はWeb ベースで作られたツールであるため、アプリをインストールしなくてもブラウザから利用することができます。また、ユーザー自身でプラグインを作成することも可能で、コミュニティでも多くのプラグインが公開されています。 Figma 自身と同じように、プラグインも Web ベースで構
社内のデザイナーの業務をサポートする LDSG Figma Plugin を作りました
Amon Keishima2022-01-25
Front-End engineer at LINE Growth Technology
こんにちは、LINE Growth Technology UITチームの keishima です。普段はフロントエンドエンジニアとして LINEポイントクラブの開発に携わっています。本記事では、この半年間で LINE Growth Technology のエンジニア・プロジェクトマネージャーと、 LINE のデザイナーがタッグを組んで作成した、LDSG Figma Plugin についてご紹介します。 LDSGとは？ Figma Plugin の話に入る前に、まずは LDSG と、LDSG が提供している Figma Library についてご紹介します。LDSG とは LINE Design System for Global Family Service の略です。LINEのファミリーサービス間で、一貫したユーザーエクスペリエンス（UX)を提供するためのデザインシステムです。 LDSG は Color, Typography, Icon, Components などから構成され、ファミリーサービスを担当するデザイナーは、これらを利用してサービスのUIデザインを作り上げていきます。
フロントエンド開発の業務を支えるちょっと珍しいチームのご紹介
Kohei Maekawa2022-01-24
この記事は UIT 新春 Tech blog 4 日目の記事です。こんにちは。LINE フロントエンド開発センターの前川です。主にフロントエンド開発センターで働く方々のDX改善や、社内サービスの運用を行なっています。私の所属しているチームは、フロントエンドと名前はついているものの、実際はフロントエンドとそれ以外の業務の割合が2:8程度という珍しいチームです。そのため、技術記事というカテゴリからはやや外れてしまいますが、その業務内容をご紹介したいと思います。 LINEを支えるプラットフォーム本題に入る前に、まずはLINEのプロダクトがどのようなプラットフォームの上で動作しているか説明します。 LINEでは、Verdaというプライベートクラウド環境を運用しており、LINEのほとんどのプロダクトはこのVerdaの上で動いています。LINE NEWSやLINEギフトといった、フロントエンド開発センターのプロダクトもその例に漏れず、Verda上で稼働しています。内製のプライベートクラウドがあるということは、Verdaを運用しているバックエンド・インフラ開発者の方々とダイレクトに
- frontend
- UIT
- DevOps
業務で役に立つVS Code機能拡張を作ってみた話
Kaido Iwamoto2022-01-21
LINE FukuokaでLINE証券のフロントエンドを開発しています。
この記事は UIT 新春 Tech blog 3日目の記事です。こんにちは。LINE証券のフロントエンドを開発している岩本海童です。今日は、業務で利用できる便利なVS Codeの機能拡張を作ってみた話をします。背景 LINEでは、XLTと呼ばれるアプリケーションの多言語化のための社内ツールがあります。あるキーとなる文字列に対して、対応する日本語や英語の文字列を関連づけることができ、それをソースコードから参照します。例えば次のように、ボタンにXLTから設定した文字列を表示します。 export const ShowAllAssetsButton: FC = () => <button>{xlt('portofolio.showAllAssets')}</button> // 日本語環境の場合は <button>資産を全て表示</button> // 英語環境の場合は <button>Show all assets</button> のようにレンダリングされる当然ですが、ソースコードにはキーが書い
業務で見つけた！　Conditional Types
LINE Engineering2022-01-20
こんにちは。LINE証券フロントエンドエンジニアの鈴木です。この記事は「UIT 新春 Tech blog」シリーズ2日目の記事です。 LINE証券ではTypeScriptを使用しており、TypeScriptの力を最大限発揮させられるように日々取り組んでいます。そこで、この記事ではLINE証券のプロダクション用コードで実際にConditional Typesが使用された事例をご紹介します。Conditional TypesはTypeScript 2.8で追加された機能で、部分型関係に基づいた型レベルの条件分岐やパターンマッチができる機能です。TypeScriptの機能の中でも高度な部類であり、一部の型に凝ったライブラリや曲芸的な遊びを除いてはなかなか実用例を聞かないものです。我々が書いたコードでConditional Typesが使われた事例をご紹介することで、皆さんにもConditional Typesを身近に感じていただき、ぜひ自分のプロダクトでも活用機会を探していただきたいと思います。非同期処理を表すAsyncData型まずは、我々が最近導入したAsyncData型をご紹介し
Web フォントを使って contenteditable から脱出する
Akihiro Tamada (spring-raining)2022-01-19
Engineer at Front-End Development Center
こんにちは、LINE フロントエンド開発センターの玉田です。突然ですが、本日よりフロントエンド開発に携わる UIT のエンジニアが持ち回りで記事を公開する「UIT 新春 Tech blog」を開催します。 UIT のメンバーが普段の業務で得た知識や、年末年始でたまった知見などを共有していきます。本記事の公開から 1 月 28 日 (金) まで、平日の毎日違うメンバーが記事を公開していきます。ぜひ最後まで見に来てください！トップバッターは私から、フロントエンドエンジニアを悩ませる contenteditable からの脱却についてです。 contenteditable の呪いみなさんは contenteditable についてご存知でしょうか？　contenteditable 属性とは、ある要素が編集可能かどうかを示す HTML 属性で、この属性を true にすることでユーザー自身がその HTML 要素を編集できるようにするものです。<input type="text"> や <textarea> といった要素はテキストを編集す
- frontend
- UIT

1 2 3 4 5