はじめに この記事は、AEON Advent Calendar 2023の21日目です🎉 イオンスマートテクノロジー株式会社（通称AST）のCTO室TechLeadチームの@t0doroki_takaです。弊社ではSREチームの発信に勢いがありますが、アプリケーションレイヤーよりの話題も積極的に発信していければと思います。 自分の敗戦の振り返り 以前、大規模ECシステムのリプレース案件に関わった時(そして敗戦したとき)の振り返りです。 今回取り上げるケーススタディは、システム全体(連係するシステム含む)としては段階的移行ではありましたが、主ターゲットとなるシステムは、全EC機能を包括する大規模なシステムで、それをフルスクラッチでリプレースするものでした。 巨大なモノリス構造であったため、マイクロサービスアーキテクチャに移行することで、サービス提供のアジリティを確保することが目的の一つでし
目次 1.はじめに 2.コーディング 3.コンテナ化 1. はじめに 友人に「PythonでAPIをサクッと作ってよ」と言われたのでシンプルなREST APIを作ってみた。 作ったものを渡すだけでなく作り方も教えて欲しいとのことなので、ここに記事として掲載する。少し手順書のような記載なため、初学者向けかもしれない。 Pythonと聞いて「Djangoでも使うか？」と思いつつも、よりサクッと感のあるフレームワークを探してみたところ FastAPIなるものがあり、今回はこれを採用してみた。 公式より引用 FastAPI は、Pythonの標準である型ヒントに基づいてPython 3.6 以降でAPI を構築するための、モダンで、高速(高パフォーマンス)な、Web フレームワークです。 FastAPI には Swagger UI と ReDoc の両スタイルのドキュメントを自動で生成してくれる機
自分の本業は10年物のMVCプロジェクトなのでClean Architecture忘れがちです。 なので、慣れてるGoでパッとClean Architectureの復習を行ってみました（２年前にPythonでやった事はあるんだけど・・・）。 このスクラップでは単語とか作りどころとかを整理するのですが、また後でRustで作ってそっちは前例がほぼないので記事にします。 Go + Clean Architectureは結構記事あるんですが、Swaggerつけたしたのと自分なりに納得いくディレクトリ構成にオリジナリティを出しました。ちなみにgo-swagger使うと本当は凄く楽に作れるのですが(ついでにフロントはopenapi-generator)、今回はClean Architectureを理解するのが主目的なので、サーバーは手書きでopenapiのyamlも1から自作しました。 ↑ postに
TypeScript は本質的に自分に型が付与されていると思っているだけの JavaScript です。 いくら型を付与しようが、それが実行時に影響を与えることはありません。 コードレビューをしているとここを誤解している人が本当に多いです。何度も解説しているのですが、なかなか浸透しないので、TypeScript におけるバリデーションという視点で記事を書くことにしました。 あと TS でバリデータ使って色々作ろうとしている友人と、プログラミング始めたてで zod と openapi を使っいる友人がいたので、彼らが想定読者です。 型と値の名前空間 TypeScript 上での名前空間(スコープ)は2つに分類できます。 値: 実行時にランタイム上のメモリに存在するもの 型: 静的解析時にのみ参照可能なもの。コンパイル時に完全に消滅する。 TypeScript は基本的に JavaScript
はじめにこんにちは、Finatext で保険事業のプロダクト開発をしている @toshipon です。今回は以前の Fin-JAWS のイベントで少し紹介させていただいた、我々の現場で取り組んでいる、大規模API開発における Swagger を用いたAPI仕様のドキュメント運用方法について紹介いたします。 概要我々の現場では、API ベースのWeb Application を開発する際に、Swagger を用いて API 設計をしたり、BFFサーバー開発者やフロントエンド開発者とのコミュニケーション手段として活用しています。 ただし、Web Application の規模が大きくなってくると、Swagger の 定義ファイルは肥大化してしまい、メンテナンスが困難になってきます。 今回は、Web Application の規模が大きくなっても耐えうる Swagger 定義ファイルの運用方法を
2021年6月2日に行われたSendai Frontend Meetup #6で使用したスライドです。 GitHub サンプルコード https://github.com/KanDai/openapi-sample ReDocで生成されたドキュメント https://kandai.git…
はじめに 自分は実務でReact×TypeScriptを利用したフロント周りとNode.js(Nest)やRailsを用いたバックエンド(API)の開発をしています。 本記事では、OpenAPIを用いたAPI設計の書き方及び、Swaggerの説明と使い方についてまとめていきます。 この記事の対象者 プログラミング初心者から中級者 APIの基礎を理解している人 OpenAPIを用いてサクッとモックサーバーを試したい人 この記事の目標 モックサーバーの環境構築を学ぶ Swaggerの使い方を理解する OpenAPIを用いてAPI設計の具体的な書き方を学ぶ この記事でやらないこと 本記事ではOpenAPIの「書き方」をメインで解説するため、API設計についての細かい解説は省きます。 なおAPI設計については下記の記事でまとめているので、ぜひ参考にしてみてください。 用語解説 OpenAPI 公式
フロントエンドエンジニアの @rry です。 自分は BASE の Sales Promotion というチームで主に新規機能開発を行っています。このチームでは主にオーナーさんの使う管理画面に新しく機能追加をしています。 そこで、管理画面で使っている API Client と型を、OpenAPI Generator を使って自動生成するようにしてみたのでそのお話を書きたいと思います。 そもそも OpenAPI とは？ https://www.openapis.org/ OpenAPI とは、RESTful Web サービスを記述、生成、使用、および視覚化するための仕様です。 ※ 以前は OpenAPI ではなく仕様自体も Swagger と呼ばれていましたが、現在は仕様自体については OpneAPI と呼ばれており、Swagger というのは OpenAPI を使ったツール群のことをさすよ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
「実践！フロントエンド分離戦略」はREADYFOR 株式会社主催のエンジニア向けLT勉強会です。ここで、菅原氏が「OpenAPI GeneratorとTypeScriptによる型安全なスキーマ駆動開発」のタイトルで登壇。スキーマ駆動開発とそのメリット、活用しているツールについて話します。 READYFORのフロントエンジニア菅原弘太郎氏（以下、菅原）：それでは「OpenAPI GeneratorとTypeScriptによる型安全なスキーマ駆動開発」と題して、発表します。自己紹介します。2020年11月に、フロントエンドエンジニアとしてREADYFORに入社しました。岩手県在住で、フルリモートで勤務しています。ReactとTypeScriptが好きで、React Hook Formのメンバーなので、もしフォローしてくれる方がいれば、フォローしてください。 フロントエンドとバックエンドの分離ま
はじめにTIG真野です。失敗談をテーマにした連載で、ちょうどプロダクト開発的に良い区切りのタイミングでもあるため、振り返りがてら、DynamoDB,Go,AWS Lambdaの技術要素について自分自身の理解・見込みの甘さについて反省します。 DynamoDBのシステム項目created_atとかupdated_atのタイムゾーンはJSTにすれば良かったDynamoDBは日付型を直接サポートしておらず、文字列型で保存することになります。 https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/HowItWorks.NamingRulesDataTypes.html#HowItWorks.DataTypes.String データサイズや諸々の理由でUnixTime 勢力もあるかもしれませんが、アプリケーションから直接参照
一行要約 はじめに Readable OpenAPIとは? 既存ルールの不満点 不満点1: 標準仕様外の分割を行っている 不満点2: ディレクトリ階層が深い 不満点3: 1つのAPI定義を参照する際にたくさんのファイルを参照する必要がある 不満点4: コンポーネントスキーマの同一性が不明瞭 新ルールで工夫した点 工夫1: operationIdと対応したパス定義のファイル名を採用し、フラットなディレクトリ構造を実現した 工夫2: パス定義ファイルに含まれる情報量を増やした 工夫3: 再利用性を重視したcomponent定義 できなかったこと、やらなかったこと、やりたいこと 定義ファイルのhttpメソッドごとの分割ができなかった ルートの定義ファイルにcomponentディレクティブを置かなかった exampleの定義は余力があればやりたい おわりに We are hiring! 脚注 一行
はじめに こんにちは！ WEARバックエンドブロックの高久です。 WEARではOpenAPI（Swagger）を使って、アプリやWebのクライアントが利用するAPIを定義しています。そして先日、開発効率化のためにOpenAPI GeneratorでOpenAPIからAPIクライアントコードを自動生成、活用できるように整備をしました。その中でOpenAPI Generatorに適したOpenAPIの書き方のポイントがいくつかあったので、内容を紹介していきます。 想定読者 OpenAPIを現在利用している、またはこれから利用する予定の方 OpenAPI Generatorを利用したコード自動生成を検討している方 背景 当初WEARではAPIクライアントコードはOpenAPIでのAPI定義を基に各クライアントが手動で実装していました。しかし手動で実装すると初期の実装コストや変更時の追従コストがか
swaggerとは 古の時代、API仕様書はwordやexcelで表現され、各所に共有されるというのが一般的でした。 ですが近年、API仕様を表現する際にはswaggerを利用するのが最も効率的で、保守性が高く、世間一般で仕様化され、見やすいというのもあり、一般化されてきたのではないのでしょうか 今回はそんなswaggerの書き方について、まずは書くために覚えておきたいポイントを解説していこうかと思います！ どう書いてくか swagger editorで書く 公式がWeb上に提供しているツールを利用し、すぐにでもswaggerの執筆が可能となっています！ なにをインストールする必要もなく開始1秒で利用できるので、私も重宝してます なお、ページを開くとサンプルAPI仕様がすでにある状態でのスタートとなり、記法の参考などにもなります vscodeで書く 必要なプラグインをインストールし、vsc
はじめに axiosの型付けはどうやらそれなりに頭を悩ませる課題のようです。 実際にuhyo氏のTwitterでのTypeScriptコミュニティにて以下のような質問がありました。 私もaxiosの型付けに悩まされた一人です。 最近それなりに幸せに型付けできる方法が整理できたので、自身の備忘録も兼ねてまとめます。 前提として、openapiファイルが用意されていることとします。 コード例は下記レポジトリに配置しております。 幸せになるとは何か 結論から言うと次のような型の補完が効き、かつ型安全なaxiosのrequest APIのカスタムAPIを作る事です。 URLパスの補完が効いていて、 実装されているHTTPメソッドの補完も効いており、 パラメータの型も補完され、 レスポンスの型も手に入るrequest APIです。 見た目上は、request APIですので、axiosのドキュメント
2022-08-27 データ抽出に特化したAirbyteによるEL(T) 環境構築の実践 データ基盤 Airbyte ELT こんにちは。今回は、データ基盤の構築の一部を実際に体験してみたいと思います。 データ基盤を作成するにあたり、まずは、社内に眠る様々なデータを集めてくる必要があります。前回の記事では、その機能を「収集」と紹介していました。 データ基盤とは何か… データ基盤 データ分析基盤 実践 2022-08-18 Metaflowでモデルの学習をpipeline化するまで MLOps Metaflow Pipeline 皆さんは「MLOps」について取り組んでいらっしゃるでしょうか。私は2018年頃からデータクレンジングや機械学習モデルの構築や運用をしてきましたが、当時の日本で私の耳にはMLOpsという言葉が入ってくることはありませんでした。 ただMLOpsの元となった「Dev…
Postman+Swagger Editor+Swagger UI+Stoplight+ReadMe+JMeter+SoapUI+Mock ...
はじめに Swagger（OpenAPI）とは？ なぜ Swagger を使うのか 統一感のあるAPI仕様の定義 自動化と効率化 APIのテストとインタラクション チーム間での協力 バージョン管理と変更管理 Swagger の主要なツールたち Swagger UI Swagger Editor Swagger Codegen Swaggerを使ったAPIドキュメント作成の基本ステップ 1. Swagger Editorのセットアップ 2 .API仕様の記述 3. ドキュメントの確認・視覚化 4. ドキュメントの公開 私が Swagger を実際に使ってみた感想 まとめ はじめに はじめまして。ネットコム新人エンジニアの井手上と申します。 普段は、Webシステムの開発・保守を行っています。 Webシステム・アプリ開発に興味を持つと、Swagger という言葉を耳にする機会があるかもしれません
おそらく一般的にSwaggerと呼ばれるのはSwagger 2.0で、これは2014に公開された規約です。Swagger 2.0はOpenAPI 2.0と同義で、OpenAPI 3.0.0には2017年に、3.0.3は2020年に公開されています。 なぜ作ったかフューチャーは常に数十の開発プロジェクトが動いており、それぞれの案件内でちょっとした開発規約が作られることもあれば、暗黙的に遵守されるルールもあります。プロジェクトの大小も様々で数名から数百人規模に及ぶこともあり、新卒採用もキャリア採用も活発なので、フレッシュなメンバーも多くジョインしてくれます。 キャッチアップをしやすいように暗黙知を減らし明文化する意味でも、一定ラインの品質を守るためのガイドラインを作る文化があります（大なり小なりどこでもそうだと思いますが）。個人的にも隣のプロジェクトが同じ技術スタックを採用しているのに、マイナ
TIGの伊藤真彦です。 渋川さんが投稿された Go 1.16のembedとchiとSingle Page Application Go 1.16のgo:embedとNext.jsの相性が悪い問題と戦う に近い研究記事です。 やりたいこと 私の最近の仕事はgo-swaggerによるバックエンドAPI開発です。本流はバックエンドですが、必要に応じてクラウドインフラを弄ったり、ちょっとしたフロントエンドアプリケーションを作ったりといった動き方で働いています。 ある時、go-swaggerで作ったバックエンドAPIの資産を使って、ちょっとした開発者向けアプリケーションを作りたくなりました。 ローカル環境でサーバーとフロントエンドアプリケーションを両方起動すると、サーバーがlocalhost:3000 フロントエンドがlocalhost:8080を占拠してしまいます。また、フロントエンドとバックエン
OpenAPI TypeScriptConvert OpenAPI 3.0/3.1 schemas to TypeScript types and create type-safe fetching.
昔々あるところに、既存のWeb APIの実装がありました。 それなりに実装を進めた後に、天の声が言いました。「OpenAPIのドキュメントを公開したい」と。 さて、あなたならどうする？っていうニッチな問いに対する一つの答えとして。 ルーターごと乗り換える？ たとえば今回でいうと、元のAPIはCloudflare Workersにデプロイされてた。 ので、たとえばhonoとかitty-routerとか、OpenAPIのドキュメント生成ができるエコシステムが整ってるルーターに乗り換えてしまうという手がある。 https://github.com/honojs/middleware/tree/main/packages/zod-openapi hono好きなあなたに https://github.com/cloudflare/itty-router-openapi/ itty-router好きな
こんにちは、21新卒エンジニアの柳です。 先日、PR TIMESの企業ページをSmartyというテンプレートエンジンからReactへリプレイスを行いました。その際にOpenAPIを社内のプロジェクトで初めて導入したので、OpenAPIのメリットや活用方法について書きたいと思います。 プロジェクトの背景 OpenAPIの説明に行く前に、企業ページをReactへリプレイスするに至った背景について少しお話しします。 企業ページをReactへリプレイスを行うことになった背景は以下の2点です。 現状使用されている JavaScript, jQuery では今後の機能追加に応えることが困難PR TIMES全体のフロントエンドのレガシー改善プロジェクトの最初の一歩として 企業ページは企業の様々な情報を1つにまとめたページになっているためデータ量も多く、また非同期通信によるLoad Moreやアニメーショ
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
ファイル分割もいいけど、取り回しわるくなるとねぇ 分割ファイルをひとまとめにするスクリプトをメンテするのさぼっちゃうし 分割そのままで対応してきてるツールももうあるのかな・・？ でもそうするとprismとかのモック動かすときにどうなるんだろう・・ 1ファイルにしといて、コードジャンプやらの開発環境を最強にできればそれがベストなのでは！ ということでvscodeに入れるプラグイン考えていきましょう 入れるプラグイン vscodeでswagger書くっていったらやっぱりこれ swagger ui表示しながら書かないとね 正直これはちゃんと活用できている気がしないけど、改めて調べてみるとめっちゃ便利な機能なんすね・・ Snippetsとか書いてあると脳死でインストールしてしまうのですよ・・ これからは活用していこう もっと快適にかきたい！と思って今回調べて追加したやつ swaggerって1ファイ
こんにちは！ フューチャー22卒内定者の大岩と申します。現在は、TIG DXユニットでアルバイトとして従事しています。 はじめに私が参加しているプロジェクトで、OpenAPI定義ファイルからモックサーバを建てることができるOSSツール「Prism」を導入することになりました。この記事では、Prism導入の手順や、躓いた点などを紹介します。 導入の背景現プロジェクトでは、フロントエンドにVue.jsを採用し、バックエンドはGo言語で書かれたAPIサーバ2台で構成されています。これまでフロントエンドの開発を行う際には、ローカルでAPIサーバとDBを立ち上げる必要があり、フロントエンドを少しだけ変更したいという場合でもかなりの手間が掛かっていました。そこでモックサーバを構築し、画面の開発の際にはそこからデータを取得出来れば、フロントエンドの作業が格段に楽になると考えました。 バックエンドのAPI
はじめにTIG DXユニット真野です。サービス間通信とIDL（インタフェース記述言語）連載の1本目です。 Open APIはgo-swaggerを用いたWebアプリケーション開発Tips19選という記事を過去に書いたこともあり、バージョン2（Swagger）をよく使っていましたしまだ継続してそれらを用いた開発もしています。2022.6.21時点では3.1.0が最新です。これまでリリースノートすらウォッチしていなかったので気になったことを調べてまとめました。 Open API SpecificationとはOpen API Specification（公式でもOASと略されます）は、HTTP APIのIDL（インターフェース記述言語）です。HTTP APIということで、いわゆるRESTishなAPIも含みます。エンドポイント（URLのパス）、パラメーター（リクエスト、レスポンスのヘッダ・ボデ
Introducing TypeSpec: A New Language for API-Centric Development Over last few years, we’ve been hard at work on https://typespec.io/, a modern API definition language. This language is designed to meet the evolving needs of API developers, architects, and managers in an environment where the delivery of consistently high-quality APIs and related experiences is becoming increasingly complex and cr
ProductivityGet your API ready out of the box in a few seconds. Prevent human error, and let your parameters, clients and types be auto-generated by Orval. Error boundaryGet your contract! With the combination of Orval and OpenAPI, you have a strong standard for your team, which avoids misunderstandings and lets you focus on your UI. API mockingYou don't have to wait for your backend to be ready,
DX事業部の @yyoshiki41 です。 今回は、今年1月にリリースしたLayerX インボイス のアプリケーション開発についてです。 インフラ構成については、昨日のLayerX インボイスのインフラアーキテクチャで紹介されています。 tech.layerx.co.jp LayerX インボイスというプロダクトの特徴 LayerX インボイス は、主に経理業務を行う方を対象ユーザーにした SaaS プロダクトです。 サービス内で以下の業務を行うことがメインになっています。 請求書の受領 請求書から仕訳を行う オンラインバンキングに取り込むためのデータを出力する 会計ソフトに仕訳データを連携する また上記の他にも マスタデータ（例えば、仕訳データの入力に使う取引先や部門、税区分など）の管理や会計ソフトへの連携 源泉税の支払管理 請求書の社内での確認 などを行う機能が実装されています。 エ
OpenAPI記述 定義したモデルとAPI仕様をOpenAPIで記述していきます。 info, host, schema, securityなどの項目は省略しています。 コードは以下のバージョン指定で確認しています。 OpenAPI 3.0.1 Swagger Editor v3.15.10 OpenAPIバージョンはspecファイルの先頭で、Swagger EditorバージョンはDocker版のタグで指定しました。 基本的にはオンラインのSwagger Editorに貼り付けて動作するはずです。 STEP1. 取得可能属性でschemaを定義してリクエストは個別に定義する まずは最も使う頻度が多い返却データの形式でschemaを定義してレスポンスで利用します。 リクエストごとに異なる形式は個別に記述します。 openapi: 3.0.1 info: title: "STEP1" des
OpenAPIとSwaggerの違い What Is the Difference Between Swagger and OpenAPI? OpenAPI: RESTful APIの仕様を記述するためのフォーマット Swagger: OpenAPIを使用するツールのこと Swaggerのツールは、色々ありますが以下の3つがよく使われるようです。 名前 概要
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
こんにちは、CX事業本部 IoT事業部の若槻です。 REST APIを実装する際に、API仕様書としてOpenAPI Specification（OAS、Swagger）準拠のドキュメントをよく作成するのですが、OASドキュメントはとても記述量が多くなることがあり、何の記述支援もなく編集するとなると結構たいへんです。 OpenAPI Specification - Version 3.0.3 | Swagger そこで今回は、VSCodeでOASドキュメントを編集する際に使ってみたら便利だったプラグインを紹介します。 OASドキュメント 参考として、次のようなOASドキュメント（Yamlファイル）で試してみます。 openapi: 3.0.3 info: title: Hoge REST API version: 0.0.1 tags: - name: user description:
こんにちは。カート決済部カート決済基盤ブロックの高橋です。 カート決済部では、現在Spring BootのJavaプロジェクトを運用しています。今回Spring Bootのバージョンアップを実施した際に発生した問題点と対応内容、注意点をご紹介します。加えて、使用しているライブラリなどのバージョンも上げているのでご紹介します。 アップデート前後のバージョン 種類 前バージョン 後バージョン Java 17 17 Spring Boot 2.7 3.0 Gradle 7.x 8.x SpringFox 3.0.0 - Springdoc-openapi - 2.1 openapi-generator 5.1 6.5 Spock Framework 2.1-groovy-3.0 2.4-M1-groovy-4.0 JavaはSpring Bootのバージョンアップ前からJava 17を使用してお
はじめに 開いていただきありがとうございます。 OpenAPIを書く際はこれまでブラウザ上の「Swagger Editor」を使用していました。 プラグインを入れることでVScodeでも書けることがわかった(おそらく今後は全部VScodeで書くことになるんだろうな・・・)ので、その際に使用したプラグインをまとめてみようと思います。 プラグイン Swagger Viewer viewerを開くには以下の方法で行います。 コマンドパレットから「Preview Swagger」を選択 shift + option + p 以下のようにSwagger Editorと同じ画面で確認することができます。 また、編集はリアルタイムで更新されます。 openapi-lint openAPIのドキュメントを検証や静的解析を行ってくれる拡張機能です。 OpenAPI(Swagger) Editor エクスプロ
テックブログ担当させていただくことになりましたTakです。業務ではJavaのサーバーサイド実装が主なのですが個人的にはPythonが好きです。私の業務では使っていませんがPythonについての記事になります。 OpenAPIとは？REST APIを開発する際にAPI仕様書をOpenAPI Specificationで用意するのは一般的です。「OpenAPIとはなにか」が分からない場合はググってもらうとたくさん解説が見られるのでそちらをご覧ください。 簡単に言えば、「あるREST APIは、このようなパスで、このようなリクエストを受け付けてこのようなレスポンスを返すよ」というスキーマ定義です。 GraphQLのスキーマ定義についてはこの記事では書いてないです。 文章で書かれたAPIドキュメントは人間が読むだけのものになりますが、OpenAPIのスキーマ定義はツールに読み込ませて次のようなこと
マニュアルや操作説明書など、改版を繰り返す文書や、共同で執筆する文書などは、バージョン管理システムにより、最新版や改版履歴の管理が必要です。 Wordなどで作成されることが多いと思いますが、バージョン管理システムとの親和性やテキストデータの流用性、検索性に優れた軽量マークアップ言語の AsciiDoc を紹介します。 ここで紹介する AsciiDoc は、PDF形式の出力を前提に、Asciidoctor, Asciidoctor-pdf について説明します。 この文書も、AsciiDocで記述し、Git(バージョン管理システム)で修正履歴を管理しています。
Swaggerを使う事になり OpenAPIを触ってみると 3.0.3 と 3.1.0 が存在します。どちらを使うべきが悩んだので調べて整理してみました。 3.0.3 から 3.1.0 への変更点は過去のポストを参照ください。 参考: Open API Specification 3.1と気になる仕様策定 結論Amazon API Gateway を使い、OpenAPIで定義されたAPI仕様書のインポート機能 を利用する場合は 3.0系（ 3.0.3）一択です。理由は単純に執筆時点では Amazon API Gateway が 3.1系 に対応してないからです。 また、VSCodeの拡張機能の中には 3.0.3 に対応しているものの 3.1.0 には未対応のものも多いようです（決して 3.1.0 で書けないわけではないありません） https://github.com/42Crunch/v
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く