DroidKaigi 2018のスライドです
はじめに GraphQLについての知見が溜まってきたので、これから何回かに分けて記事としてまとめていきたいと思います。 GraphQLはWEB APIのクエリ言語であり、既存のデータに対してクエリ(データ取得の命令)を実行するためのランタイム(実行時に必要なもの)です。 REST APIと異なり、GraphQLではエンドポイントが1つだけであり、処理ごとに増やしていく必要もないので、管理しやすいことが大きな特徴です。 本記事では、GraphQL公式チュートリアルを参考に、実際にスキーマ言語を記述した上でGraphQL IDEにてクエリを書き、データの取得を実践します。 記事内で使用する言語はJavaScriptです。 GraphQLの歴史 GraphQLは2012年頃Facebook社が開発をスタートしたこときっかけに、2015年にはオープンソース化、2018年にはGraphQL Foun
2021年に3サービスをリリースしたSHEにラブグラフCTO横江が質問し、スミからスミまで聞き出す「【CTO対談】ラブグラフCTOが訊く!『SHEの爆速開発の裏側』」。ここでSHE株式会CTOの村下氏、株式会社ラブグラフCTOの横江氏が登壇。ここからは、半年で3つのサービスをリリースするために組織面で意識したことについて話します。前回はこちらから。 半年で3つのサービスをリリースするために組織面で意識したこと 横江亮佑氏(以下、横江):他になにか「こういうところを工夫したよ」みたいなところはありました? 最初は未経験のエンジニアの方も多いじゃないですか。 村下瑛氏(以下、村下):どうだろうな。けっこうGraphQLのオンボコスト(オンボーディングのコスト)は低かった印象があって。クライアントが自動生成できるのも大きかったんですかね。特にフロントエンドはほとんどオンボーディングする必要なくキ
Ruby on Rails Guides / Ruby on Rails ガイド:体系的に Rails を学ぼう 公式Docs。教典。 Ruby on Rails チュートリアル:プロダクト開発の0→1を学ぼう Railsやってる人で知らない人はいないRails2系の頃からある定番サイト 昔は全部無料でWebテキストが読めたが今は1000円くらいで購入することになってる。今でも進化しながらメンテナンスされており神。 Railsの練習帳 少しだけ発展的だけど必須で知っておきたい内容。データモデリングとかGraphQLのような話も追加されていっている。無料。 asyraffff/Open-Source-Ruby-and-Rails-Apps: Awesome Ruby and Rails Open Source applications 🌈 Rails製のOSSプロジェクトをまとめたページ
gRPC、あるいはGraphQL 昨今のAPI開発にgRPC、またはGraphQLを採用するケースは増えてきていて、ドメインロジックをgRPCで実装して、フロントエンド(BFF)はGraphQL経由のHTTP一本で取得するのはベストプラクティスの一つだと思っています。 とはいえ人的リソースや管理の問題から、ProtobufとGraphQLスキーマを両方メンテナンスしていくのはとてもつらくて、 他のエントリでも結果としてどちらかに寄せました、というケースをよく目にしました。 実際自分もやってはみたものの、両方のメンテナンスをしていくのは相当辛くて、Protobufを直してgRPCのI/Fを変更、合わせてGraphQLのSchemaにも手を入れてフロントに渡して…というのは管理コストに見合わないな、ってことで諦めました(今は grpc/grpc-web 、または grpc-ecosystem/
今週、10月23日(土)に発売されるWEB+DB PRESS Vol.125に掲載される、特集記事「GraphQL完全ガイド」を執筆しました。よろしくおねがいします。 桃栗三年、GraphQL 6年 原稿を書く過程で、知っているはずのことでも改めて調べなおしたりする。特に歴史みたいなのが好きで、GraphQLは2015年6月に発表されて、2018年に安定版になって、みたいなのをずっと調べてしまう。GraphQLってなんかすごい最近っぽく感じていたけど、発表されてからもう6年経つらしい。 ちなみにjQuery 1.0は2006年8月にリリースされていて、Reactは2013年5月に公開されたらしい。6年というのはだいたいそれくらい。 6年で、GraphQLはよく普及した。Facebookはもちろん、GitHubもTwitterもNetflixも、GraphQLを使っている。GitHubの新し
スマートキャンプのエンジニア瀧川です。 弊社では昨年からエンジニア合宿を企画していまして、今年は10月15日から17日までの2泊3日で実施しました! 合宿のテーマや全体感は別記事でまとめるかなと思いますが、3日の限られた時間で1チーム(4人)1つのプロダクトを作り、成果として発表する必要がありました。 この条件だとあまり技術的なチャレンジもできないな...と感じてはいたのですが、どうしてもチーム内でGraphQL触りたい欲求が高まってしまったので、なんとか負荷があまりかからない形で導入できないか調べて見つかったのがPrismaというツールでした! 本記事ではPrismaを試した際のメモ、Tips、所感を書いていきます! (公式でPrisma2がアナウンスされてますが、ほぼ別物なので今回はPrisma1について書いています) (多分最終的な成果物の進捗は、慣れ親しんだツールを使った場合とほぼ
エムスリーでマルチデバイスチームのチームリーダーをしている松原@ma2geです。 マルチデバイスチームはこちらのテックブログでは初出なので簡単に紹介すると、iOS や Android 等のデバイス対応を主導する開発するチームで、主に iOS, Android のネイティブアプリ開発から、アプリから叩く API サーバ(いわゆる Backends For Frontends(BFF))、プッシュ通知基盤システムのバックエンドサービスも開発しております。 私自身は3月までは別チームで Rails/Java/Elixir などを触っていましたが、4月から現チームに移動しこちらでもまた新たな挑戦をさせてもらっています。 💪 前提 今回はネイティブアプリ向けの RESTful な API サーバがレガシーとなっており、このサーバのリニューアルを検討している話を書きます。 対象のサーバはフレームワー
Prismaは、様々なデータベースをバックエンドにGraphQLのスキーマからCRUDを行うためのエンドポイントを提供するプロキシとして動作するミドルウェアです。最近$4.5Mの資金調達をしてちょっとだけ話題になりました。 www.prisma.io Prismaが提供するソフトウェアは現在オープンソースソフトウェアとしてGitHub上で公開されています。本体はScalaで書かれていますが、CLIはTypeScript(Node.js)で書かれているようです。Scalaのコードは関数型プログラミングを駆使したものではなく、比較的読みやすい部類だと思います。 github.com 触ってみる GraphQLのエンドポイントを簡単に用意することができそうということで少し調べてみました。Webサイトにチュートリアルがあり、dockerを使って簡単に試すことができるようになっています。事前にnpm
最近 Graph database が盛り上がってるように感じる。 さて ArangoDB という DB を知っているだろうか。 MySQL とか MongoDB とかと比べると知名度は低いものの、NoSQL、とりわけ Graph database 界隈では名が知られている。Graph database 界隈と書いたが、さしずめこの領域では Neo4j が幅を利かせている。Neo4j なら聞いたことあるって人はたくさんいると思う。 Graph databases ・Neo4j Neo4j の強みとしては、そのクエリ言語である Cypher の読みやすさが一つ挙げられる。Cypher の紹介ページ に書かれている最初のサンプルを引用すると、こうだ。 MATCH(:Person{ name:"Ann"})-[:MARRIED_TO]->(spouse) このクエリは「name が "Ann"
フロントエンドアプリケーションの開発を行う上で避けては通れないデータフェッチの実装。 REST APIを使うか、GraphQLを使うか、クライアントでキャッシュするか、APIレスポンスにどのようにして型を付けるか、状態管理はどうするのかなど、開発者の悩みが尽きないけれども、それに関しての設計を考えたり議論を行うのはフロントエンド開発の楽しいポイントだと僕は思っています。 この記事では、バックエンドにHasura、フロントエンドにNext.jsを使用する場合に僕が最強だと感じたツールの組み合わせ・使い方を紹介します。 モチベーション APIからのレスポンスにはTypeScriptの型が勝手についてきてほしい。asで型アサーションするのはやりたくない。 クライアントでもサーバー(SSR)でもデータフェッチの方法が同じインターフェースで提供されてほしい。 クライアントでAPIレスポンスをキャッシ
ソフトウェアエンジニアの尾崎です、最近は新規事業を立ち上げるべく色々やっています。この度、弊社2名(私とあんどう)が翻訳したGraphQLの入門書『初めてのGraphQL』がO’Reilly Japanから出版されます。(2019年11月13日(水)発売予定です。)今回はこの書籍について紹介します。 表紙の鳥はタカ目タカ科のボネリークマタカです GraphQLとは GraphQLは公式ドキュメントに “A query language for your API” とある通りAPIのためのクエリ言語です。GraphQLは2015年にFacebookによってOSSとして公開されました。2017年にGitHubの公開APIがGraphQLに移行されたことを契機に採用事例が増えてきています。 GraphQLのAPIはこれまでのAPIとはパラダイムが大きく異なります。現在主流のWeb APIはRoy
We found both options to be largely viable for the core feature set. Which left us with one final hang-up: we host free-tier projects on VMs with 1 GB of memory. After tallying the resources reserved for PostgreSQL, PostgREST, Kong, GoTrue, and a handful of smaller services, we were left with a total memory budget of ... 0 MB 😬. Unsurprisingly, our pathological memory target disqualified any opti
Install Totally plug-in-play # Add the gem to your Gemfile $ bundle add rails-graphql # Then run the Rails generator $ rails g graphql:install Define Designed for simple and complex Schemas # app/graphql/app_schema.rb class GraphQL::AppSchema < GraphQL::Schema field(:welcome).resolve { 'Hello World!' } end Run Follows Rails core principles $ curl -d '{"query":"{ welcome }"}' \ -H "Content-Type: ap
Provides functions to help TypeScript GraphQL client development including auto completion, query validation, type… このツールに限らずですが、開発支援系のツールは自分で使うモチベーションがあるときに作るのが一番ということもあり、重い腰を上げてこいつに大幅にアップデートを加えました。年末年始で時間もいっぱいありましたしね。 エディタ支援機能ts-graphql-plugin という名前にもある通り、こいつはTypeScriptのLanguage Service Pluginです。 Language Service Pluginというのは、TypeScriptの言語支援サーバー(tsserver)上で動作するため、エディタの種別を問わず動作するのが特徴です。 さて、例えばReac
公開日:2018-04-06 GitHubのAWS Samples に https://github.com/aws-samples/aws-amplify-graphql というリポジトリがあります。 これは AWS AppSync を用いて作られたフォトアルバム Webアプリで、Cognito User Pools, Federated Identities, Amplify, DynamoDB, S3 がシームレスに統合された React製 single-page application (SPA) です。 Getting Started の項に書かれている手順に沿って、用意されている GraphQLスキーマとマッピングテンプレートを AppSync に設定していけばアプリケーションが動くようになるので、AppSync (GraphQL) のパワフルさを強く感じられるチュートリアルに
こんにちは。メルカリ ハロのSoftware Engineer (Engineering Head)の@napoliです。連載:Mercari Hallo, world! -メルカリ ハロ 開発の裏側-の2回目を担当させていただきます。 2024年3月上旬にメルカリ ハロという新しいサービスが公開されました。メルカリ ハロは好きな時間に最短1時間から働ける「空き時間おしごとアプリ」です。 この記事ではメルカリ ハロを作るにあたり、どういった技術スタックやアーキテクチャを選定したのか、さらにその背景と意思決定をご紹介したいと思います。 この記事で得られること メルカリ ハロで採用されている技術スタックやアーキテクチャの全体像 その意思決定の理由とプロセス これから新規サービスを立ち上げるうえでのヒント 主な技術スタック メルカリ ハロで利用されている主な技術スタックは以下のとおりです。 バッ
こんにちは、エンジニアの@dachi_023です。最近、MacBook Proの調子が悪いのですが修理に行くのが面倒で行っていません。放置し続けていたら直ったりしないかな・・・。 今回の記事はGatsbyで100ページ超えの静的サイトを構築したときの学びについてです。Gatsbyって実際どうなん?って思っている方に読んでもらえたら幸いです。 つくったもの ママリユーザーが本当に使ってよかったと思う商品・サービスの口コミを元に、自分と家族に合うものを探すことができる「ママリ口コミ大賞」の2019年 秋版のサイトをGatsbyで実装しました。妊娠中の方、育児中の方におすすめしたいサイトです。私も実際つかってみて、「これ、子どもが産まれた時にあったらもっと便利だったな〜!」って毎回思っています。 award.mamari.jp これまでの技術選定 ママリ口コミ大賞は今回で3回目なのですが、毎回使
はじめまして、株式会社カミナシのエンジニア @tomiです。 カミナシは、2020年10月にサービスサイトをフルリニューアルしました。 kaminashi.jp 今回のサイトリニューアルでは、どのような構成で作ったのか、また技術選定で考慮した点をお伝えします。 Jamstackな静的サイト構成 Gatsby.jsとWordpressを使いJAMstack構成で作成しました。 最終的に以下の画像のような構成になりました。 利用した技術を並べると、 Gatsby.js Typescript StyledComponents GraphQL EsLint + Prettier Wordpress + Gutenberg Netlify 導入事例やセミナー情報など、動的な情報は記事としてWordpressに登録し、Gatsby.js側で記事をGraphQL経由で取得して表示しています。 静的なファ
ひさしぶりに学習した。 Reactは2015年くらいには、趣味でVRハウスを作ったり、QRコードを読めるページを作ったり、仕事でも使ったり、React鳥貴族っていう名前のただの飲み会に行ったりと、しばらくは触っていたのだけど、チームの異動があって、最近は主にjsx-domという、JSXを書いてBabelを通すとcreateElementに変換してくれる、という独特の世界観のJSXを書いたりしていた。 jsx-domは、Styled Componentsを使えたり、useRefを使えたりと、ちょっとReactのエッセンスは吸われているものの、単にcreateElementしてくれるだけで、差分レンダリングとかは当然できない、という、シンタックスシュガーとしてJSXを使える、というもので、偶然発見して、React非導入アプリケーションにとっては便利じゃん、って使っていたけど、身の回りに使ってる
Next.jsのapp directoryについて話していて、GraphQLを使う場面ではServer Componentsの魅力がいくらか落ちるよな、と思った。裏を返せば、Server Componentsが活用されるような時代ではGraphQLの重要度が下がるかもしれない。 現にServer ComponentsのRFCの「Credits and Prior Art」を見ると次のように書いてある。 Relay’s data-driven dependencies, which allow the server to dynamically choose which Client Component to use. GraphQL, for demonstrating one approach to avoiding multiple round trips when loading d
概要 Apollo によって、Principled GraphQL という記事が公開された。これは、Apollo が 2015 年からデータグラフ技術を先導してきてからのこの数年間、大小含めた企業に属する様々な GraphQL 開発者と議論を重ねてきた中で得た知見を共有するもの、とされている。記事は GitHub でもオープンに管理されているので、PR や issue も送れそうだ。 https://principledgraphql.com/ https://github.com/apollographql/principled-graphql ここでは要点だけメモをしておく Integrity Principles (統一の原則) 1. One Graph 企業は、チーム毎に作成された複数のグラフではなく、 をもつべき メリット: 1 回のクエリで、より多くのデータやサービスにアクセス
こんにちは。はてなWebアプリケーションエンジニアの id:KGA です。 2022年9月7日(水)に Hatena Engineer Seminar #21 「GraphQL 活用編」を開催します。 今回は「GraphQL 活用編」です。モバイルアプリからフロントエンド、バックエンドまで、はてなのGraphQL活用について紹介します。 15の出版社・20のマンガサービスに採用いただいているはてなのマンガビューワ「GigaViewer」の開発チーム、株式会社集英社の少年ジャンプ+編集部との協業サービス「マンガノ」の開発チームのメンバーが発表を担当します。 開催はオンラインです。 (詳しくはconnpassのイベントページをご確認ください)。皆様のご参加をお待ちしております! イベント概要 日時: 2022年9月7日(水) 19:00-20:30 参加費: 無料 開催形式: オンライン配信
DroidKaigi 2019 にスポンサー枠で参加しました。 弊社では Android アプリエンジニアをはじめとして各分野のソフトウェアエンジニアを募集しております。 人生を豊かにするプロダクトの開発や、大きな企業でのソフトウェア開発をいかに改善していくかといったところに興味がある方はぜひお声がけください! いっしょにやっていきましょう! DroidKaigi 2019 それはともかく DroidKaigi、様々なセッションがあって素晴らしかったですね。 運営、スピーカー、スポンサー、そして参加者の皆様、ありがとうございました。 私個人としては、GraphQL についての知見を得られたのが大きな収穫でした。 本記事について 本記事は、GraphQL サーバーを Kotlin で立てるにあたって、仕組みを学んだ軌跡を残すものです。 GraphQL 自体の初心者が、Kotlin で Gra
銀の弾丸ではないので良し悪しあるのは当然として、それを差し引いても以下の2つの要素があるのではと思った。 なんとなく使ってもメリットが十分得られない RESTでできてたことができなくなる(※ちゃんと調べればできる) なんとなく使ってもメリットが十分得られないWeb界隈は良くも悪くも新しい技術をとりあえず使ってみるところがあると思っていて、そこがGraphQLは十分に事前知識を持って導入しないとメリットが薄いところとミスマッチを起こしてネガティブな意見が出るのかなと思う。 GraphQLはもともとFacebookがReact, Relayとの組み合わせで使い始めたもので、クライアントライブラリとしてのRelayと、IDやページネーションについての追加仕様を公開している。ライブラリとしてのRelayは使わなくても仕様に乗っかることはできるのでそれをRelayスタイルと言ったりする。出典を忘れた
FirebaseのFirestoreをやめることにしたので雑なメモを残しておく。なお、まだ走り始めたばかりなので、内容には間違いや考慮不足も多数含まれる可能性があるので読む人はその点注意を。あと、あくまでも雑なメモなので細かいところは書いていない。 なぜ脱Firestoreするのか? なぜGraphQLではなくREST APIなのか? 移行にあたって検討したこと、決め事 ドキュメントIDをどう扱うか サブコレクションをどう扱うか 配列やマップといったフィールドのタイプをどう扱うか 追記: Mapの配列をどうするか Firebase Authenticationとセキュリティルールで実現しているセキュリティ機能をどうするか では実際にどんなテーブル設計にするのか 次にやること なぜ脱Firestoreするのか? まず、脱Firestoreする理由は ユースケースとしてFirestoreでは対
ありがとうございました #未踏— arailly (@arailly_) 2020年2月15日 2019年度の未踏が終わったのでこの1年を振り返ります. 未踏とは 未踏期間で作ったもの 未踏期間でやったこと サーバーレスアーキテクチャとは なぜサーバーレスか サーバーレスを採用した本音は 実装したアーキテクチャ サーバーレスを使い込んだ感想 いいところ 辛いところ 未踏を振り返って 頑張ったこと 未踏のいいところ 残念だったところ 最後に 未踏とは IPA(情報処理推進機構)が行なっている「未踏IT人材発掘・育成事業」のことです. 「未踏事業」は、ITを駆使してイノベーションを創出することのできる独創的なアイディアと技術を有するとともに、これらを活用する優れた能力を持つ、突出した人材を発掘・育成することを目的としています。 未踏事業ポータルページ:IPA 独立行政法人 情報処理推進機構 ざ
GraphQL Code Generator v3 以降で標準となった Client preset では設定が大きく異なります。 この記事は Client preset を使わない前提の内容になっているため、注意が必要です。 Client preset 用の設定は別記事で紹介します。 全体 生成物をフォーマッタにかける graphql-codegen には Lifecycle Hooks という仕組みがあり、いくつかの用意された hook ポイントで任意のコマンドを実行できる。 これを使って生成されたコードを Prettier 等のフォーマッタに通しておくのがおすすめ。 基本 DO NOT EDIT とはいえ、コードジャンプしてきて生成された型を読みたいケースはよくある。 そういうときのために、人間が見やすいように改行しておいてもらうといい。 typescript plugin, type
GraphQLは実装内容に合えばタイタニックの救命ボードのように混沌から救い出してくれる。だからと言って全てのプロジェクトがタイタニックな訳ではないので、使い所が合わなければそんな救命ボードにもあまり意味は無い、という話。 先日、個人開発して公開したプロジェクト「node-node-node」のバックエンドはRails APIにGraphQLを使っていて、このプロジェクト内容に対しては最高の親和性を発揮してくれた。 GraphQLのメリットを一言で言えば「クライアント=サーバー間での複雑なトランザクション処理の全てをGraphQLが吸収してくれる」ということに尽きる。ややこしい技術の詳細を書いたところでメリットはこれ以外に無い。 /usersや/postsというそれぞれのエンドポイントにリクエストを投げていたのがRESTful。 GraphQLにするとエンドポイントを気にすることなく「これ
GraphQL クライアントの選び方について 現状大きく次のような選択肢があります。 Apollo Client Relay Urql 他に react-query や SWR などの GraphQL に特化していないものを使うこともできるらしいがあまりメリットがピンときていない GraphQL クライアントにやってもらいたいこと 上記は Web の GraphQL クライアントの比較しか書いておらず、他のプラットフォーム(Flutter とか)でも選定軸が持てるように、もう少し "GraphQL クライアント" と呼ばれるものに何を期待しているのかを書き出してみる。 graphql リクエストを送れる 最低限の機能です。 エンドポイント、認証トークン は共通のものとして準備して、あとはクエリをのっけたらリクエストが作れたらいいでしょう。 キャッシュを保ってくれる キャッシュの正規化ってな
GraphQLのクライアントといえばApollo Clientが使われることが多いと思いますが、urqlというクライアントをおすすめする記事です。 TL;DR urqlのドキュメントキャッシュはApolloみたいなキャッシュ管理が要らなくて楽だからおすすめ ドキュメントキャッシュは、Mutationの __typename を見て汚れたキャッシュを捨てる仕組み Mutationのあと refetchQueries やってるならそれはurqlが自動でやってることと同じ なぜurqlをおすすめするのか この記事ではurqlのドキュメントキャッシュというキャッシュを仕組みだけを紹介します。雑に言うと、Apolloの正規化されたキャッシュより多少効率は落ちるものの煩雑な正規化されたキャッシュの管理から解き放たれるというものです。Apolloのキャッシュの管理に疲れた人にめちゃくちゃおすすめですし、
はじめに こんにちは、fluctでエンジニアをやっているyanyanです。 この記事は、仕事でバックエンド開発をするときに考えていること の続きです。 前回のスライドでは、私がバックエンド開発をするときに大事にしている考え方や思想の話をしました。今回は、じゃあそうした思想の下で実際にどういうものを私が作ったかという話をしようと思います。なので、この記事を読む前にスライドの方を読むことをおすすめします。 speakerdeck.com 何を作ったの? すごいざっくりいうと、顧客向けWebサービスのバックエンド部分を0からつくりました。 0からと言っても、インフラ部分に関してはすでにあるECSサービスにタスクを追加するだけという形を取りましたが、アプリケーション開発というスコープでいうと技術選定からやり始めました。 どんなサービスなのか fluctが広告配信をしたり、運用支援をしている媒体社が
Before there was GraphQL, there was REST. In recent years, REST has become the dominant API style for building backend web services. With REST, you could signal the type of request we want to make (ex: GET, POST, PUT, or DELETE) and the resource we’d like to fetch or interact with (ex: /api/pets/1) using an HTTP method and a URL. It’s a great approach (and one we initially used at StockX for sever
はじめに この記事は、個人で作っているサービスをアプリとWebの両方に展開しいて感じたことを書いたものです。 作っているもの 著者は、個人でRabbytという、デジタルキャンバスサービスを作っています。 タブレットやスマホに全画面で絵を表示することで、「タブレットで絵を飾れる」サービスです。 壁にかけたりスタンドを使ったりすれば簡単に絵が飾れます。 アプリもリリースを重ね、今は1.0.8になり、最近のリリースではファイルをアップロード出来るようになりました。 使用している技術を図にすると上のようになります。 色々使っていますが、 Go (バックエンド) Flutter (アプリ) React (Web) GraphQL (API) を使っていることが、この記事での重要な点です。 モノレポ Rabbytは1人で作っていて、リポジトリを分けても楽にはなりません。 そのため、必要なものは全て1箇
【書評】「初めてのGraphQL」を読んで、サーバーレスアプリケーションのための新しい武器を手に入れるのだ 2020年11月12日追記: Apollo Client V3 がリリースされ、大幅に内容がかわっています。本書のサンプル記述はV2ですので、利用法が異なる可能性があります。ご注意ください。 apollo-client/CHANGELOG.md at main · apollographql/apollo-client きっかけは サーバーレスアプリケーションの実装で 本格的に AWS AppSync を使いたいと考えたところでした。Amplify + AppSync なチュートリアルやサンプルもたくさんありますが、要素技術を習得してから使い始めたいと考えました。私が執着している考えのひとつに、 サービスやライブラリがどこまでの責任をカバーしてくれるのかを把握してから使う があります
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く