MERYの記事作成ツールをNuxt.js × Atomic Designで作り直した話（CSS設計編）
前回は、記事作成ツールの具体的な機能や記事内容を構成するアイテムコンポーネントの中身を紹介しました。今回は、記事作成ツールで採用したCSS設計について紹介していきます。 新しい記事作成ツールでは、CSSプリプロセッサとしてSCSSを使用しており、共通のカラーコードやフォントサイズなどはグローバルCS...
システム
MERYの記事作成ツールをNuxt.js × Atomic Designで作り直した話（機能編）
前回は、レガシーなMERYの記事作成ツールのフロントエンドをNuxt.jsとAtomic Designで作り直した際のコンポーネント設計の話を紹介しました。今回は、記事作成ツールの具体的な機能や記事内容を構成するアイテムコンポーネントの中身を紹介していこうと思います。 記事作成ツールを構成する要素 ...
MERYの記事作成ツールをNuxt.js × Atomic Designで作り直した話（コンポーネント設計編）
MERYでフロントエンドエンジニアをしているcomyです。MERYの記事作成ツールのフロントエンドをNuxt.js × Atomic Designで作り直した話を3回に渡って紹介していこうと思います。今回は、コンポーネント設計の話を中心に紹介していきます。 MERYの記事ができるまで MERYでは毎...
Unicodeの結合文字をスマートフォンで表示したときに発生した問題の対応策
こんにちは、MERY開発部のhoshinoです。 前回投稿した「制御文字が含まれていることで発生した問題の対応策」に引き続き、今回はUnicodeの結合文字をスマートフォンで表示したときに発生した問題の対応策*1紹介する内容は、技術書典6で頒布された「INSIDE MERY」の「6.5 Unicod...
制御文字が含まれていることで発生した問題の対応策
こんにちは、MERY開発部のhoshinoです。 前回投稿した「FFmpegを使用した動画変換処理で発生した問題の対応策」に引き続き、今回は制御文字が含まれていることで発生した問題の対応策*1紹介する内容は、技術書典6で頒布された「INSIDE MERY」の「6.4 制御文字による問題」と同じ内容で...
FFmpegを使用した動画変換処理で発生した問題の対応策
MERYのサービスの裏側では、多数のアプリケーションが稼働しています。障害などの問題が発生した場合は、社内のエンジニアが全て対応をしています。1回目となる今回は、FFmpegを使用した動画変換処理で発生した問題の対応策について紹介します。ここで紹介するのは、一部の記事において元動画以外の動画が保存されておらず、動画が表示された時に自動再生されない状態になった問題についてです。
コレクションにおけるフラグメントキャッシュの粒度とパフォーマンスのはなし（Jbuilder編）
MERYのAndroid/iOSアプリ向けの記事一覧取得APIのキャッシュ粒度を小さくした際に生じたパフォーマンスの劣化とその対応について紹介します。 MERYのWeb APIでは少しでもレスポンスタイムを短くするために、Ruby on Rails（以下、Rails）のフラグメントキャッシ...
MERYのシステム概要
MERYでは一日におよそ80本の記事を配信しています。記事が配信されユーザーに届くまでには、様々なステップがあります。そして、それらに対応する専用のアプリケーションが存在します。今回は、現時点でのそれらステップ毎のアプリケーションの概要、そして、課題と解決の方針を説明します。 記事がユーザーに届くま...
