タグ

関連タグで絞り込む (136)

タグの絞り込みを解除

frontendに関するsh19910711のブックマーク (928)

  • [WebGL] Three.jsでジオメトリインスタンシングを使ってモデルをレンダリングする - Qiita

    現状、通常のフローでモデルデータを読み込んでそれをそのままジオメトリインスタンシングでレンダリングする方法はないようです。 なので、モデルデータを読み込み、自前で処理する必要があります。 （ただ、ドキュメントも整備されておらず、もしかしたらまだ安定していないかもしれないので、利用する場合は自己責任でお願いします） ちなみに今回の解説用に作ったサンプルはGithubに上げてあります。 （動作デモはこちら） ジオメトリインスタンシングって？ さて、まずジオメトリインスタンシングとはなにか。 WebGLでの詳細についてはエマさんのこちらの記事（WebGLにおけるジオメトリインスタンシング（ANGLE_instanced_arrays）を丁寧に説明してみる）がとても分かりやすく書かれているので読むことをおすすめします。 ざっくり言うと、プログラムで言うところのクラス・インスタンスの関係をジオメトリ

    [WebGL] Three.jsでジオメトリインスタンシングを使ってモデルをレンダリングする - Qiita
    sh19910711
    sh19910711 2024/06/26
    "プログラムで言うところのクラス・インスタンスの関係をジオメトリにも当てはめ / インスタンスごとの設定やデータを事前にまとめてGPUに送っておくことで、この切替コストを最小限にしよう、というもの" 2016
    リンク

  • Testing Library流でフロントエンドテストのコスパを最大化する

    “Testing takes too much time and effort” by Kent C. Dodds （ライブラリ作者） 訳：テストには時間と労力がかかりすぎる https://testingjavascript.com/

    Testing Library流でフロントエンドテストのコスパを最大化する
    sh19910711
    sh19910711 2024/06/26
    "テストのコスパが悪いと良いテストが継続的に書かれていく流れを作れない / Testing Library: Jestで動作するフロントエンド特化型のテストヘルパー / ユーザーにとって意味のある単位をテストする" 2022
    リンク

  • TypeScript 5.5 で追加された正規表現構文チェックを理解する


    TypeScript 5.5で、@graphemeclusterさんによって正規表現リテラルの構文チェックが導入されました🎉 この構文チェックによって、正規表現に間違いがあった場合、事前にTypeScriptがエラーを出力してくれます。 この機能について、次のことが気になったので調べてみました。 どんな構文がエラーになるか なぜ導入されたか どうやってチェックしているか JavaScriptで実行できるがTypeScriptでエラーになる構文はあるかESLintとのカバー範囲の違い 本記事に関して、誤り等があれば指摘いただけると嬉しいです。 どんな構文がエラーになるか TypeScript 5.5では、正規表現に関するエラーメッセージが40個程度追加されています。 例えば、下記のような構文は、5.5でエラーになります。 // 存在しないフラグ var re = /a/b; // エラー
    TypeScript 5.5 で追加された正規表現構文チェックを理解する
    sh19910711
    sh19910711 2024/06/22
    "正規表現に間違いがあった場合、事前にTypeScriptがエラーを出力 / よくある間違いについては改善方法まで提示してくれるメッセージ / 構文チェックに関する Issueは、2015年ごろに立てられ"
    リンク

  • 軽量なStorybook駆動開発を支えるコンポーネント設計

    こんにちは。この記事ではStorybook駆動開発をゼロから導入するために実践した内容をコンポーネント設計の側面から紹介します。合わせて、紹介した設計を元にどのようなテストを実装しているかについても紹介します。 簡単に実装できることが持続可能なテストへの鍵 Webフロントエンドの持続可能なテスト文化を醸成するためには、テストを開発フローの中で簡単に実装できることが何よりも重要です。テストの実装に機能開発以上のコストが掛かってしまう場合、「時間が無いのでテストコードを後から実装する（結果実装されない）」という典型的なアンチパターンに繋がってしまいます。 持続可能なテストを実現するためのアプローチ フロントエンドにおいて、特にIntegration Testの実装容易性は、コンポーネント設計やツールの使い方によって大きく左右されます。 筆者が関わるプロジェクトでは軽量なStorybook駆動開

    軽量なStorybook駆動開発を支えるコンポーネント設計
    sh19910711
    sh19910711 2024/06/19
    "「時間が無いのでテストコードを後から実装する（結果実装されない）」という典型的なアンチパターン / 持続可能なテスト文化を醸成するためには、テストを開発フローの中で簡単に実装できることが何よりも重要"
    リンク

  • HTMX + Hyperscriptでサーバレスアプリケーションをつくってみた

    日程調整サービス 「イツスル？」をつくった ちょうど今日MVPをリリースしました。 イベントを作成して、予定を入力すると皆の予定表ができる 画面数は3画面しかない小さいツールをつくったお話です。 URLをシェアすると動的なOGPが生成される みんなに入力をお願いする時に、URLだけだと素っ気ないので 調整さんの代わりにどうぞ！ 利用はこちらから（無料、ログイン不要） きっかけは、日程調整ツールの老舗「◯◯さん」 普段、ゲームやオフ会の日程調整をする際に、◯◯さんを良く使っていました。 ログイン不要でプラットフォームに依存しないでブラウザだけで完結するミニマルな機能をかなり気に入っていたからです。 というのも、個人間でやり取りするケースでは、有料のリッチな調整サービスはそもそも不要だし、 ディスコのBotや、LINE日程調整ツールは、フレンドになるか鯖に招待しないと使えなかったりして個人的に

    HTMX + Hyperscriptでサーバレスアプリケーションをつくってみた
    sh19910711
    sh19910711 2024/06/19
    "せっかくのHTMXならサーバレスにしたいなぁみたいな事をぼんやり思っていた / 無料枠もあって、お金もかからずに、サーバ側のほとんどの事をまかせて、UX設計や、デザイン、フロントの開発に集中"
    リンク

  • フロントエンドエンジニアに勧めるvscode の file nesting


    File Nesting is なに その名の通り、ファイルがネストされます。 どういうことかというと、こんな感じです ↓ 昨今のフロントエンドでは1つのコンポーネントに Storybook や CSS、test などのファイルが存在する場合があるとおもいます。 自分の場合は Storybook のファイルのみでしたが、これだけでも正直、 ツリー構造が見にくい ファイル名のタイポに気づきにくい などがあり辛かったです。 そんなときに VSCODE の File Nesting という機能が出たことをきき、試したところかなり快適になったので紹介しました。 具体的な設定方法 まずエディタを開いて、 ⌘, で設定を開きます 検索窓に﹁file nesting e﹂と入力します 下記画像のように、ネストする条件と、機能を有効化に設定します 自分は tsx に対しての設定のみ変えてますが、ここら
    フロントエンドエンジニアに勧めるvscode の file nesting
    sh19910711
    sh19910711 2024/06/19
    "昨今のフロントエンドでは 1 つのコンポーネントに Storybook や CSS、test などのファイルが存在 / File Nesting という機能が出たことをきき、試したところかなり快適になった" 2022
    リンク

  • ClojureのDuctとClojureScriptのre-frameによるREST API + SPA開発入門 - Qiita


    Java (JVM)環境でのClojureとJavaScript環境でのClojureScriptを組み合わせると、典型的なWebアプリケーションのサーバサイドもフロントエンドもほぼ同等の言語で開発できるというのはClojureの魅力のひとつですが、日本語でも英語でも入門者向けにそのようなフルスタックなClojure開発のしかたを解説するリソースはまだ多くないようです。 今回は国内Clojurianの間でも人気のサーバサイドフレームワークDuct、ClojureScriptのReactラッパーReagentを基礎としたフレームワークre-frameを利用して、REST API + SPAという構成でTODOアプリを開発する例をご紹介します。 ビルドツールとしてサーバサイドの開発にはLeiningen、フロントエンドの開発にはshadow-cljsを使うことにします(開発/実行環境としてJa
    ClojureのDuctとClojureScriptのre-frameによるREST API + SPA開発入門 - Qiita
    sh19910711
    sh19910711 2024/06/19
    "Java (JVM)環境でのClojureとJavaScript環境でのClojureScriptを組み合わせると、典型的なWebアプリケーションのサーバサイドもフロントエンドもほぼ同等の言語で開発できるというのはClojureの魅力のひとつ" 2020
    リンク

  • OpenAPI3 + OpenAPI generator でgolangサーバ・TypeScriptクライアントの実装を試す - Qiita

    OpenAPI3 + OpenAPI generator でgolangサーバ・TypeScriptクライアントの実装を試すGoTypeScriptswaggerOpenAPIOpenAPIGenerator 昨今のマイクロサービス化の流れに伴い、サービス間の情報のやり取りのルールをスキーマとして定義してクライアント、サーバーの開発を行うスキーマ駆動開発が取りた出されている。 今回はOpenAPI3(旧Swagger)をスキーマ駆動開発のツールの一つとして取り上げたが、意外と踏み込んだHello Worldの記事が少なかったので書いた。 対象読者 最近swaggerやOpenAPIという言葉を聞いて試してみたいが導入に悩んでいる人 普段からAPIを使用した開発を行っているがOpenAPIを使ったことがない人 Dockerや特定プログラミングをある程度まで習熟している人 OpenAPIとは

    OpenAPI3 + OpenAPI generator でgolangサーバ・TypeScriptクライアントの実装を試す - Qiita
    sh19910711
    sh19910711 2024/06/18
    "コードジェネレータがなければ、究極的にはスキーマはただのドキュメントと何も変わらない / 内部利用向けのAPIの定義に使うかと聞かれると微妙 / コードジェネレータの質が言語によってまちまち" 2020
    リンク

  • 【フロントエンド】GraphQLを導入する時はFragmentを理解しよう - Qiita


    はじめに GraphQLを用いたフロントエンド開発は多くなってきているように思います。 フロントエンドから柔軟にデータを取ってくることができるということは、今までバックエンドが担保してきていた部分をフロントエンドが担わないといけなくなった ということを意味します。 保守性をちゃんと考えないといけない。 ということですね。 今回は、Fragmentについての話 Fragmentとは？ GraphQLにおけるFragmentとは複雑なクエリを小さくまとめ上げるために生み出されました。 これはとてもComponentの概念に似ていますね。 僕たちはComponentという小さな単位に分割し、それを組み合わせることで複雑なアプリケーションを構築しています。 これと同じです。 データをFragmentという小さな単位に分割し、複雑なクエリを役割ごとに分割してやろう。 という話です。 どうやって実現す
    【フロントエンド】GraphQLを導入する時はFragmentを理解しよう - Qiita
    sh19910711
    sh19910711 2024/06/18
    "Fragment: 複雑なクエリを小さくまとめ上げる / 親のクエリで子のfragmentを呼び出し + データをFragmentという小さな単位に分割し、複雑なクエリを役割ごとに分割 / 共通化: 保守性を上げる時もあれば、下げる時もあります" 2022
    リンク

  • GraphQLのschema.graphqlsファイルをバックエンドとフロントエンドで同期するベタープラクティス - Qiita


    この記事は何か？ フロントエンドとバックエンドをGraphQL APIで連携する場合、スキーマファイル(schema.graphqls)をどうやって連携するか悩んでいました。 色々と試行錯誤して、ベストプラクティスとまでは言えないまでもベタープラクティスに近い解決策に至ったので共有してみます。 構成 バックエンドは Go, Gin, gplgen、 フロントエンドは TypeScript, React, Next.js のSPA構成でそれぞれ別リポジトリで管理しています。 やりたいこと バックエンドとフロントエンドでschema.graphqlsファイルから型を自動生成したい。 ※ schema.graphqlsファイルの管理はバックエンドが主導で行う前提です。 やりたくないこと graphqlsファイルの二重管理。バックエンドの差分を逐一フロントエンドでコピーして追従、というケースだけは
    GraphQLのschema.graphqlsファイルをバックエンドとフロントエンドで同期するベタープラクティス - Qiita
    sh19910711
    sh19910711 2024/06/18
    "フロントエンドとバックエンドをGraphQL APIで連携する場合、スキーマファイル(schema.graphqls)をどうやって連携するか / schema.graphqlsファイルをバックエンドのサーバにホスティングし、codegenの参照先として設定" 2023
    リンク

  • ビジュアルリグレッションテストのすすめ - Qiita

    日々いろいろなWebサイトの制作や修正を対応していく中で、修正したページとは関係ない（と思っていた）ページで表示が崩れてしまったことってありませんか？ 私はたびたび経験があります。 毎回目視で全ページをチェックすれば防げるのかもしれませんが、それは現実的ではありません。 自動で全ページをチェックしてくれて不具合があれば教えてくれる、そんな便利なツールがあればと何度も思いました。 どうやら現代の技術でそれは作れるみたいです。ビジュアルリグレッションテストというらしいです。 ビジュアルリグレッションテストとは ざっくりいうと「見た目の比較」をするテストのことです。 変更前のWebサイトのスクリーンショットを用意しておき、変更後のスクリーンショットを撮り比較することで、どこが変わったか差分を表示し確認することができます。 どうやって使うの ビジュアルリグレッションテストを導入するための方法はいく

    ビジュアルリグレッションテストのすすめ - Qiita
    sh19910711
    sh19910711 2024/06/17
    "修正したページとは関係ない（と思っていた）ページで表示が崩れ / 変更前のWebサイトのスクリーンショットを用意しておき、変更後のスクリーンショットを撮り比較することで、どこが変わったか差分を表示" 2022
    リンク

  • Vitest / Playwrightを使ってSvelteのコンポーネントをテストする - Qiita


    Ateam Group U-30 Advent Calendar 2022の1日目は 株式会社エイチームライフデザインの@oekazumaが担当します。 はじめに Svelte、SvelteKitのプロジェクトにおいて、コンポーネントテストを書きたい場合、どのようなテストランナーを使ってどう書けばいいかを解説していきます。 SvelteKitが用意してくれているプロジェクト作成のCLIではPlaywrightとVitestがデフォルトで追加できるようになっていますのでこれらのテストランナーを使ったコンポーネントテストを紹介します。 今回、作ったサンプルはこのリポジトリで確認できます。 SvelteKitとは SvelteをベースとしたハイパフォーマンスなWebアプリを作るためのフレームワークです。 ReactでいうNext.js、VueでいうNuxt.jsような立ち位置だと認識していただけ
    Vitest / Playwrightを使ってSvelteのコンポーネントをテストする - Qiita
    sh19910711
    sh19910711 2024/06/17
    "コンポーネントテストを書きたい / Vitest: Vite環境で動作する高速なテストフレームワークで、Jestの代替として期待されているフレームワーク + SvelteKitはViteを使用しているので簡単な設定のみで利用可能" 2022
    リンク

  • あなたはフロントエンドの何をテストしたいのか。 - Qiita


    フロントエンドのテストをしよう Webのフロントエンドの自動化を進めようか。という話をしていて、 ﹁そもそもテストってなんだ？﹂ ﹁フロントエンドに特有のテストってなんだ？﹂ ﹁〇〇ってツール流行ってるらしいってどうよ？﹂ みたいなことを話をしていました。そうしたときに、やっぱり知識足らねぇなぁ。と思ったので、2,3日でゴリゴリと内容をまとめてみる作業をしてみました。 あんまりこういう書き方はしないんですが、私自身散発的な思考で、フロントエンドのテストを調べることをしたので、そのような語り口で書いてみようと思います。 以下の内容は、あくまで例なので、別にこういう仕事があったわけではないです。 とりあえず投げられた要求・仕様 とりあえずなんか仕事が振ってきた。パラパラと要求を聞いてみると、こんな感じだった。 承認のダイアログが欲しい メッセージのフォントはOswald メッセージは変更できる
    あなたはフロントエンドの何をテストしたいのか。 - Qiita
    sh19910711
    sh19910711 2024/06/17
    "テストの難易度や運用コストのトレードオフがある / 学習コストのかかるスタック + 実運用まで時間がかかりすぎるため、本当にやるべきか？という疑問 / フロントエンド特有の難しさ" 2023
    リンク

  • Playwright Component Testに思いを馳せる - Qiita


    はじめに (今更ですが) Playwright Component Testの存在を最近知りました。 PlaywrigthはE2Eテストライブラリで、NodeJS上でchromium, firefox, webkitのようなブラウザ・レンダリングエンジンでのWebアプリケーションの操作を自動化してくれます。 個人だとAngularをメインで触っていることもあり、Headless Browserの実行はPuppeteer、E2EテストはCypress、のような印象を持っていましたが、React・Vue・SvelteのプロダクトではPlaywrightが採用されるケースを多く見ます。 上記のブログのように、Page(一画面)に対してテストコードを書いて実行する...というのが基本的な使い方ですが、experimentalでComponent Test Runnerも提供されています。 コンポー
    Playwright Component Testに思いを馳せる - Qiita
    sh19910711
    sh19910711 2024/06/17
    "Playwright Component Test: Page(一画面)に対してテストコードを書いて実行する...というのが基本的な使い方ですが、experimentalでComponent Test Runnerも提供 / 「実際にブラウザでコンポーネントが正しく動くこと」の担保" 2023
    リンク

  • まだ実装してない API を Prism でモックするとフロントエンド開発が少しはかどった - Qiita


    導入前の課題 Web サービスの開発でフロントとバックエンドを並行してすすめてるけど、まだ API が実装できてなくてフロントの開発に困ったことはありませんか？ 以前、API 定義は決まったがバックエンドの開発が 1-2 週間遅れそうとわかり、フロントの開発を先んじで行いたという状況になったので、その際に行った解決策をまとめてみました。 結論はタイトルにある通り﹁OpenAPI のスキーマ定義ファイル(以下 OpenAPI 定義ファイル)があるなら、Prism という OpenAPI 定義ファイルをもとに API モックサーバをたてられるツールが便利﹂です。 状況 ざっくり以下の様な状況でした フロントエンドとバックエンドを分けて、別リポジトリで開発 フロントはNuxt、TypeScript の SPA クライアントライブラリは Axios を利用 API の仕様は OpenAPI に準
    まだ実装してない API を Prism でモックするとフロントエンド開発が少しはかどった - Qiita
    sh19910711
    sh19910711 2024/06/17
    "バックエンドの開発が 1-2 週間遅れそうだがフロントは先んじて実装したい / Prism: モックサーバーを簡単に立ち上げ + OpenAPI 定義ファイルをもとにするので API モックサーバーと仕様のズレを気にしなくてよい" 2020
    リンク

  • NestJS + OpenAPI(Swagger)からAPIクライアントを生成し型安全に通信する - Qiita

    こちらは、TypeScript Advent Calendar 2020 14日目の記事になります！ はじめに 最近、個人での開発にてTypeScriptを選定することが多くなり、その中で NestJS を使ってバックエンドのAPIを構築する機会があったのですが、 フロントエンド（Nuxt.jsで作ったSPA）との通信について、割といい感じに作れた気がしたので、備忘録として残したいと思います✍️ どんなものを作るか Webアプリのフロントエンドとバックエンド間での通信として、以下のことを実現したいという気持ちがありました リクエスト/レスポンスに型付け したい💪 フロント/バックエンド双方のTSで、InterfaceなりClassなりに値が詰められたDTOを扱いたい バックエンド側で定義した型をフロント側でも使いたい I/Fの更新をフロント側からいい感じに取り込みたい フロントのコード上

    NestJS + OpenAPI(Swagger)からAPIクライアントを生成し型安全に通信する - Qiita
    sh19910711
    sh19910711 2024/06/17
    "バックエンド側で定義した型をフロント側でも使いたい / NestJSにて @nestjs/swagger にてアノテートしたDTOとエンドポイントを定義 / openapi-generator-cli にて、1.で作成したyamlファイルからTypeScriptのAPIクライアントを生成" 2020
    リンク

  • Code Firstで疲弊しないOpenAPI活用方法 - Qiita


    こんにちは！ 本記事は2021年度の﹁株式会社カケハシxTypeScript﹂アドベントカレンダーの10日目の記事として執筆いたしました。 私が、最近設計開発するWebAppではOpenAPIを活用しており、本記事では実践している知見が共有できればと思います！ OpenAPIとは ご存知の通りOpenAPI は、プログラミング言語に関係なくAPIの仕様を定義するための仕様です。デモとしては Swagger Editorのページが有名です。 OpenAPIの成り立ちとしては、元々SwaggerというAPI定義仕様とツール群がありましたが、こちらの通り 2015年ころ、ベンダー依存しないオープンなプロジェクトに拡張するためSwaggerのスペックをベースに構築されたAPI定義仕様がOpenAPIです。その後 数々のツール が開発されています。 OpenAPIの記述方法は json, ya
    Code Firstで疲弊しないOpenAPI活用方法 - Qiita
    sh19910711
    sh19910711 2024/06/17
    "OpenAPIの記述方法は json, yaml が選択できますが、いずれにしても一種の JSON Schema で表現 / OpenAPIの強みは スペックを中心として、ドキュメント・サーバ・クライアントなどをある程度自動生成する事ができる点" 2021
    リンク

  • Swagger StudioでAPI仕様書の作成とモックサーバー利用してみた - Qiita


    フロントエンド開発のためにモックサーバーを使いたかった フロントエンドのAPI実装をするにあたって、モックサーバーを作るためのツールを検索していたら、API仕様書作成ツールのSwaggerのサードパーティ製ライブラリのSwagger Studioで作成した仕様書のモックサーバーを簡単に利用できることを知った。 元々モックサーバー用のライブラリであるPrismが統合されているらしい。 GUIで直感的にAPI定義できる SwaggerではAPI仕様書をyamlファイルを書いて作成していくが、Swagger Studioを利用するとGUIで直感的に操作して定義を作成しそのコードを出力することができる。 実際に操作してみる まずアカウントを作成ます。 API Design & Documentation Management | Designing & Building OpenAPIs自分のワ
    Swagger StudioでAPI仕様書の作成とモックサーバー利用してみた - Qiita
    sh19910711
    sh19910711 2024/06/17
    "Swagger Studio: GUIで直感的に操作して定義を作成しそのコードを出力することができる / エンドポイントのURLも自分の好きなものに変えられ / スピーディーにフロントの開発をするにはよいツール" 2022
    リンク

  • GitHub Actionsを使ってAPI設計をフロントエンドと共有する話 - Qiita


    はじめに 以下記事を読んで、OpenAPI Specをもっとフロントエンド側で活用できたら良いなと思いました。 そこで、同じようにGitHub Actionsを使って、GitHub PagesにReDocを配置、Mock Server︵Prism︶をCloud Runへデプロイしてみることにしました。 なお、Mock Server︵Prism︶のデプロイ先をCloud Runにしたのは、最小インスタンスを0にする︵つまり、アクセスが無い時はインスタンスが落ちている状態にできる︶ことができ、課金を抑えられると思ったからです。 ReDocとは？ ReDocは、OpenAPI Specからドキュメントを生成してくれるツールです。 同じようなツールで、Swagger UIもありますが、Swagger UIはリファレンス要素が強く、ReDocはガイド要素が強い︵見易さ重視︶印象を受けました。そのため
    GitHub Actionsを使ってAPI設計をフロントエンドと共有する話 - Qiita
    sh19910711
    sh19910711 2024/06/17
    "GitHub Actionsを使って、GitHub PagesにReDocを配置、Mock Server（Prism）をCloud Runへデプロイ / Mock Server（Prism）のデプロイ先をCloud Runにしたのは、最小インスタンスを0にすることができ、課金を抑えられる" 2022
    リンク

  • GraphQLのSchemaを元にサクッとモックサーバーを作る - Qiita


    概要 GraphQLでクライアントの開発をしており下記のような理由からモックサーバーが欲しくなりました。 バックエンドの開発を待たずにGraphQLのSchemaベースで非同期でフロントエンドの開発を行いたい テスト用にAPIのモック サクッと良い感じにモックサーバー建てられないかな〜と思って調べてみました。 作りたいもの GraphQLのSchemaを正にして、可能な限り自動で型セーフなMSWのハンドラ＋データ作成関数を作りたい。 これによってShemaの変更に対してモックサーバもすぐに追随できる＋モックサーバのメンテナンスもしやすいのかなと思いました。 ざっくりと導入手順 下記にやったことをざっくりと書いていきます。 まず、下記のようなGraphQL SchemaとQueryがあると仮定します。 Schema type Query { getUser(id: ID!): User }
    GraphQLのSchemaを元にサクッとモックサーバーを作る - Qiita
    sh19910711
    sh19910711 2024/06/16
    "msw: リクエストをインターセプトし、モックのレスポンスを返す / typescript-msw: クライアントで定義したquery/mutationから型セーフなmswのhandlerを自動生成 / graphql-codegen-typescript-mock-data: Schemaからデータ自動生成" 2023
    リンク
  • 1 2 3 4 5 6 7 8 9 10 次のページ

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.