Vue.jsでカテゴリー分けされた画像リストを実装たくさんある商品画像やポートフォリオの作品一覧などを見せたいときに、カテゴリーごとに絞って表示できたら便利ですよね。Vue.js を使えば同じページのまま表示画像を変更できるので、管理も楽になりますよ。 完成図 まずは画像を一覧で表示させ、上部にあるカテゴリー名のボタンをクリックすると、そのカテゴリーに属する画像だけを表示させます。 1. Vue.js の読み込み設定まずは HTML の head 内に Vue.js を読み込ませます。別のバージョンや NPM でのインストール方法は公式サイトを参照してください。 <script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script> 2. 画像を一覧表示Vue.js の配列を使って画像を用意します。各画像に index
IE のサポートを終了せずに IE のサポートを終了した話
IE サポートとは一体… スタディスト 開発本部 技術支援ユニットの笹木 (@s_sasaki_0529) です。 Microsoft による Internet Explorer (以下 IE) のサポート終了(2022/06)を 目前(執筆時点) とし、フロントエンドエンジニアの皆様はウッキウキの日々を過ごされていることでしょう。 今回は、弊社の主要プロダクトである Teachme Biz における「IE サポート終了」が何を指しているのかを明らかにし、その範囲内で開発体験を最大限良くするために行った仕組み作りについてお話します。 TL;DRTeachme Biz は IE の「サポートを終了」するが、ビルドターゲットから IE を除外する「提供終了」をするわけではないVue 3 を採用したいが、そのためには IE への「提供終了」が必須IE 用ブランチを切ってコードフリーズし、IE 用
*1. 画面に表示されるがコンソールにエラーが出る。 Warning: Received NaN for the `children` attribute. If this is expected, cast the value to a string. *2. 画面には表示されずコンソールにワーニングが出る。 [Vue warn]: Invalid VNode type: undefined (undefined) *3. Chrome だと以下の形式（実行環境によって異なる可能性あり）。 Mon Jan 01 2024 00:00:00 GMT+0900 (GMT+09:00) *4. ランタイムエラー。 Uncaught Error: Objects are not valid as a React child (found: object with keys {}). If you
💡 IntuitiveStores are as familiar as components. API designed to let you write well organized stores. 🔑 Type SafeTypes are inferred, which means stores provide you with autocompletion even in JavaScript!
この度、PLAIDはGitHub Sponsorsを利用してOSS(オープンソースソフトウェア)にスポンサーしました！ GitHub Sponsors OSSにスポンサーするモチベーション 利用しているOSSの持続 OSSに対して金銭的な支援をすることは、OSSの作者やOSSの開発をリードする人、そしてOSSで活動するチームに対して継続的な活動を支援できることを意味します。 私達が利用しているOSSは様々な規模なものがあります。個人で開発した特定の問題解決にフォーカスしたライブラリやツールのような小さい規模のもの、そして、フレームワーク、SDK、ToolKit、データベース、そしてプログラミング言語といった大きい問題を解決するために提供されている大規模なものまで。 OSSは使うユーザーが増えてくるとOSSの成長とともに、機能追加、改善、バグ修正などの開発の他に、ドキュメントの整備やissu
はじめに hey でECのフロントエンドエンジニアを担当している @nkoba です。 STORES ECでは先日、アイテム機能のアップデートをリリースしました。そのアップデートのうちの一つが、アイテム画像件数上限アップです。 これは今までアイテムごとに画像を15枚までしか登録できなかった制限を拡大し、30枚まで登録できるようにしたアップデートです（スタンダードプランのみ）。 このアップデートのプロジェクトに担当の一人として開発に参画した中で、フロントエンドに求められる仕事について多くの気づきがあったので、この記事で紹介したいと思います。 アイテム画像件数上限アップとユーザー体験 プロジェクトの当初はフロントエンドとバックエンドの画像枚数のバリデーションを修正すれば作業は終わりという認識でした。 そのため、開発期間もかなり短く見積もって計画を立てていました。実際にバリデーション周りのコード
Laravel + Vue.jsでGoogleカレンダーのクローンを作ろう！！【Laravel8対応】フロントエンド編①｜Yuu's Memo
皆さんこんにちは！！ 昨日に引き続き、フロント（Vue.js）側の開発を始めていきます。 前回までで、一応LaravelのBlade上にVue.jsのコンポーネントを表示する事ができました。 今回はカレンダーを作っていきたいと思います！ 前回までの記事はこちらからどうぞ Laravel + Vue.jsでGoogleカレンダーのクローンを作ろう！！【Laravel8対応】準備編Laravel + Vue.jsでGoogleカレンダーのクローンを作ろう！！【Laravel8対応】API作成編①Laravel + Vue.jsでGoogleカレンダーのクローンを作ろう！！【Laravel8対応】API作成編②Laravel + Vue.jsでGoogleカレンダーのクローンを作ろう！！【Laravel8対応】フロントエンド準備編 今回は前回インストールしておいたライブラリーを使用するので、それ
Vue.js用ライブラリ『VueUse』はVue.jsの機能である、Composition APIを用いて作られた関数のパッケージです。VueUseの大きな特徴のひとつに、コンポーザブルな関数をまとめたライブラリであるという点が挙げられます。 「コンポーザブルな関数」とはなんでしょう？ コンポーザブルな関数にはどのようなメリットがあるのでしょう？ 本記事はVueUseの使用を通じて、Vue 3から導入されたComposition API、そしてそれを利用したコンポーザブル関数への理解を深める内容となっています。 VueUseとは まずはVueUseの便利さを体感してもらうため、簡単なデモを用意しました。 次のデモはVueUseに含まれているuseMouse()関数を用いています。この関数はマウスの座標を取得し、リアクティブに返すコンポーザブルな関数です。 ▼マウス座標を取得し表示するコンポ
本連載では、JavaScriptフレームワーク「Vue.js」を、型定義が利用できるようJavaScriptを拡張した言語「TypeScript」で活用する方法を、順を追って説明していきます。前回は複数のコンポーネントをURLによって切り替え表示できる「Vue Router」の利用法を説明しました。今回はVue.jsの状態管理ライブラリ「Pinia」について説明します。 はじめに 本連載では、JavaScriptを利用して動的なWebページを構築できるフレームワークVue.jsを、データの型定義ができるように拡張されたAltJS（コンパイルしてJavaScriptにする言語）であるTypeScriptで活用する方法を、順を追って説明しています。 一般にWebページは、ユーザーの入力値やWeb APIから取得したデータなど、さまざまな状態を持ちます。これらの状態がさまざまなコンポーネントに散
Slinkity
To eleventy and beyond Follow along on Twitter for project updates ❤️ ⚠️ Slinkity is no longer maintained. The project owner (@bholmesdev) now works on Astro full-time. If you want to build component-driven content sites, give Astro a try! If you're committed to 11ty and want to use client components, consider 11ty's WebC project. Slinkity is the simplest way to handle styles and component framewo
How Astro Works Astro works a lot like a static site generator. If you have ever used Eleventy, Hugo, or Jekyll (or even a server-side web framework like Rails, Laravel, or Django) then you should feel right at home with Astro. In Astro, you compose your website using UI components from your favorite JavaScript web framework (React, Svelte, Vue, etc). Astro renders your entire site to static HTML
Track page speed over time and get the data you need to optimize it. Vue is built to handle most typical use cases efficiently without requiring a lot of manual tweaking. But sometimes, you’ll hit situations that need a bit more fine-tuning. In this article, we’ll go over the key things to keep an eye on for optimizing performance in a Vue app. Page Load Performance vs. Update Performance When ta
タブは、Webサイトやスマホアプリでよく使用されるUIコンポーネントです。TailwindCSSやBootstrapなどのライブラリにも必ずありますが、再利用可能な柔軟性のあるものではありません。 スタイルを簡単にカスタマイズできる再利用可能なタブコンポーネントをVue.jsで実装する方法を紹介します。 How to Build a Tab Component In Vue.js by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 実装の概要 AppTabs.vueコンポーネントの作成 コードの解説 コンポーネントの使用方法 終わりに はじめに タブはUIでよく使用されるコンポーネントの1つで、Bootstrapのような人気のあるCSSフレームワークやTailwindUIのようなUIコンポ
この記事はVueアドベントカレンダー2021の7日目の記事です。 SPAでボタンのコンポーネントをリンクとして扱いたいときに気をつけたいことを書きます。 Vueに限った話ではないのですが、僕がVueで開発をする機会が多いのでサンプルコードではVueを使用しています。 他のフレームワークを使っている方は、適宜置き換えて考えていただければ幸いです。 ボタンのコンポーネントでリンクさせたい時ありますよね？ Vue Routerを使用していれば router.push('/foo') のように関数を実行して遷移させることができるので、コンポーネントの内部が aタグ でも buttonタグ でもリンクとして動作させることが可能です。 どちらでもできるけど aタグ を使おうぜというのが本記事の言いたいことです！ サンプル 早速ですが、サンプルを使って紹介していきます。 見た目の同じボタンが2つ並んでい
はじめに JavaScript フロンエンドフレームワークは 2014 年ごろから本格的に使用され始め、従来のサーバーサイドテンプレートに対し、現代では一般的な Web 技術としてすっかり定着し、シェアとしては React、Vue が 2 強状態になっています。本稿では、最初に過去から現在の状況を俯瞰した後、React と Vue の関数コンポーネントを使用して、同じ画面と機能を持つコードの書き方を比較していきます。 過去から現在の状況 フロントエンド MVC の衰退 10 年前、フロントエンド MVC を標榜していた Angular や Ember は低迷し、以降のフレームワークはもはや M とか V とか MV なんたらなどのレイヤーを言及しなくなり、ビュー + イベント + ステートを 1 つの責務としてまとめた直感的で分かりやすいコンポーネント指向となりました。以下は State
Vue 3.5 β版のリリースが始まっています！本記事では3.5で追加された新機能などを一足早く動作させてみましたので、個人的に楽しみにしている機能をまとめてみました。 composable useTemplateRef テンプレート参照をcomposableとして便利に利用できる関数です。 Vue 3.5より前は以下の様に変数を定義してテンプレート参照を行っていたため、下記のonMountedの処理をcomposableとしてまとめようとしてもテンプレート参照の変数（下記で言えばtemplateRef）自体を渡さなければならず、少し扱いづらいところがありました。 <script setup> import { ref, onMounted } from 'vue' const templateRef = ref() onMounted(() => { templateRef.value.
Vue 3 Vapor Mode News
What is Vapor Mode? 🧐 Vapor Mode is a new and alternative compilation strategy inspired by Solid.js. It aims to enhance your apps' performance by compiling your code into a more efficient JavaScript output. When used at the app level, you can drop the Virtual DOM completely, thus reducing your app's bundle size. ✅ Benefits More performant Uses less memory Requires less runtime support code. Solid
Focus on Your ContentEffortlessly create beautiful documentation sites with just markdown. Enjoy the Vite DXInstant server start, lightning fast hot updates, and leverage Vite ecosystem plugins.
Electronの使い方 Web開発の技術でデスクトップアプリを作ろう | フューチャー技術ブログ
TIGの伊藤真彦です。 最近Electronを用いたアプリケーション開発を行っています。技術ブログで今まで取り扱った事のないテーマであるため、まずは入門記事を書いてみました。 ElectronとはElectronは、GitHubが開発したオープンソースのソフトウェアフレームワークです。 ChromiumとNode.jsをコアとして採用する事で、Web開発と同じようにHTML,CSS,JavaScriptを用いて開発したものを、デスクトップアプリケーションとしてビルドすることが可能になります。クロスプラットフォームであることも利点の1つであり、同一のソースコードからmacOS、Windows、Linuxへのアプリケーションビルドが可能です。 つまりWeb開発の技術でデスクトップアプリが作成できるものです。 Electronを使って開発されているもの。Electronを使って開発されているアプ
最近の Rails 関係の仕事内容 - r7kamura.com 最近の Rails 関係の仕事内容｜はっさんブログ｜ note を参考に、自分も書いてみます。 ここ最近は Nuxt.js を用いた開発の仕事をしており、新規機能開発や現行の機能の改修のほかに、開発体験をよくするためのタスクを消化していくことが多いです。 以下に、改善系のタスクで実際にどのような仕事をしてきたか雑にまとめてみます。 Nuxt.js のバージョンアップ TypeScript の導入 Vuex に型を付与 フロントエンドからの API 呼び出し方法の見直し 無駄なリクエストの削除 無駄なコンポーネントの削除 不要な layout ファイル の削除 エラーハンドリングの方法の見直し 監視ツールの導入 分析ツールの導入 sitemap の設置 フロントエンド開発のためのドキュメントの整備 無視されている ESLint
More than 4 years have passed since the initial introduction of Vue 3. Many discussions over several RFCs and a lot of influence from other modern frameworks including React and Svelte have shaped Vue to become probably the most powerful and well-rounded framework out there, capable of progressively supporting applications of any scale and architecture. Sounds exciting, right? Well, the truth is f
Webページやスマホアプリにスクロールのアニメーションを実装したり、特定の地点までスクロールしたらイベントをトリガーにしたりする際は、JavaScriptのライブラリを使用するのではなく、Intersection Observerが非常に簡単で便利です。 Intersection Observerを使用して、Vue.jsでスクロールイベントをトリガーする方法を紹介します。 How To Trigger a Scroll Event in Vue.js With the IntersectionObserver by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Intersection Observer APIで何ができるか IntersectionObserverのコンポーネント 終わり
はじめに Nuxt3の安定版がリリースされ、しばらく経った。現在筆者もNuxt3を活用しているプロジェクトがある Nuxt3は以前の2系にも増して更に強力な機能を公開しており、快適な開発体験を提供してくれる 代表的な機能としては Auto-imports Data-fetching utilities Zero-config TypeScript support Universal rendering (Server-side rendering and hydration) といったものがある。またNitroという新しいサーバーエンジンが導入され、より高いパフォーマンスでのレンダリングが可能になった そしてNuxt3では2つの新しいAPIであるuseFetchとuseAsyncDataが導入されている(useLazyFetchとuseLazyAsyncDataも含めれば4つ)。useFe
Vue.js の Composition API が登場してから 1 年少しが経過しており、すでに使いこなしている方もいらっしゃるのではないでしょう？ 私自身お仕事で Composition API を使用しており、従来の Options API と比較して UI とロジックの分解がよりやりやすくなったように思えます。リアクティブなデータをコンポーネントの外で定義できるようになったことで、1 つのコンポーネントにまとめて書かざるをえなかった論理的な関心事に分けてそれぞれ別のファイルで定義できます。 書き心地としては React のカスタムフックに近い感じとなっていますね。 個人的には React がクラスコンポーネントから関数コンポーネント + Hook へ移行したように、Vue.js においても Composition API へ移行する流れが来るのではないかと思います。 さて、そんな
想定読者や使い方などについては「はじめに」の章をご覧ください。
この記事はBASE Advent Calendar 2020の2日目の記事です。 devblog.thebase.in こんにちは、BASEのフロントエンドチーム エンジニアの加藤です。 先日、弊社松原のこちらのブログにて、「既存のVue.jsによる資産は積極的にメンテナンスしつつ、その時その時で総合的に判断して最適な技術を選定する」スタンスで我々は考えているということをお話しました。直後にVue.js 3.0の正式リリースがあり、アップデートに関して実際に取り組みを始めています。 現在イメージしている流れ 現在、BASEのサービスで使われているバージョンは2.6系で、そこからのアップデートということになります。 現在利用しているVue.jsに依存したUIライブラリやバリデーションライブラリも3系対応で大きくAPIが変わることが予想され、一気に全ての使用箇所でバージョンをアップデートするこ
Plug-and-play image optimization for Nuxt apps. Resize and transform your images using built-in optimizer or your favorite images CDN.
JSer.info #675 - Vue 3.4 がリリースされました。 Announcing Vue 3.4 | The Vue Point Vue 3.4ではVueテンプレートのパーサーのパフォーマンス改善、watchEffectの改善、defineModelがStable APIに変更されています。 また、v-bindが同名の場合の省略記法を追加、Hydrationのエラー表示を改善などの変更も含まれています。 破壊的な変更として、global JSX namespaceの型を定義しないように変更、実験的な機能だったReactivity Transformの削除なども含まれています。 関連して、Vue 2.x は2023年12月31日にサポートが終了し、End of Life(EOL)となりました。 Vue 2 Has Reached End of Life 最終バージョンは2.7.
Vue 3.4
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
AutoAnimate - Add motion to your apps with a single line of code
Introducing KickStart — AI generated FormKit forms in seconds. Generate from a screenshot, edit with drag-and-drop or conversational AI, copy & paste as components or schema! Try for free Add motion to your apps with a single line of code. AutoAnimate is a zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Solid, Vue, Svelte, or any oth
あなたにとって重要なトピックや同僚の最新情報を入手しましょう最新の洞察とトレンドに関する最新情報を即座に受け取りましょう。 継続的な学習のために、無料のリソースに手軽にアクセスしましょうミニブック、トランスクリプト付き動画、およびトレーニング教材。 記事を保存して、いつでも読むことができます記事をブックマークして、準備ができたらいつでも読めます。
Last year, a lot has been in happening on the web in terms of performance. Unsurprisingly, everyone agrees the web should be fast. Google introduced its Web Vitals metrics to stress that the web applications should load fast even on slower devices and slow networks. Svelte showed that web apps can be significantly smaller in their bundle size. React introduced the Fiber algorithm that allows pausi
TypeScriptで型駆動開発
はじめに 型駆動開発とはどんなもので実践すると何が嬉しいのかを自分なりに理解するためにこの記事を書きます。 2021年8月時点では「型駆動開発」でググっても意図した内容がヒットせず、「Type-Driven Development」と検索して英語の記事が何件かヒットする程度です。 自分の「型駆動開発」に対しての理解・認識が世間一般のそれと相違がある場合もありますので、何か思うところがあればご指摘いただければ大変嬉しく思います。 また、この記事ではTypeScriptとVue.jsでフロントエンドのコードを書いていきます。TypeScriptは必須の前提ですがReactでも同じような考え方を活かせるのではないかなと思っています。 型駆動開発とは 型駆動開発とはなにか。書籍「プログラミングTypeScript――スケールするJavaScriptアプリケーション開発」から引用させてもらいます。
JSer.info #625 - 2022 Year In Review | The Vue Pointという記事では、Vue 2のEnd of Life (EOL)が改めて周知されています。 Vue.js - Vue 2 LTS, EOL & Extended Support Vue.js 2は2023年12月31日にEOLとなり、サポートが終了されます。 サポート終了後はセキュリティリリースも行われなくなる予定です。 NextAuth.jsがAuth.jsの一部という扱いに変更されました。 これによって、SvelteKitやSolidStartでもNextAuthが実装していた認証、認可の仕組みが利用できるようになっています。 React NativeがTypeScriptをFirst-classとしてサポートすることが発表されました。 First-class Support for
本連載では分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説を行っています。 今回は、MisskeyでUIフレームワークとして採用している、Vueの実験的な脱仮想DOM実装であるVaporモードの開発状況を紹介します。 仮想DOMとは 今日、一般的なWebのUIフレームワークでは仮想DOM（Virtual DOM, VDOM）と呼ばれる技術を採用していることが多いです。 Webでは、JavaScriptからHTMLを操作するためのインターフェイスとしてDOMが用意されていますが、仮想DOMを採用するフレームワークではこのDOMを直接操作するのではなく、一旦独自に仮となるDOM（V-tree）をメモリ上に構築し、操作する必要のあるHTML要素を特定して効率的にDOMを変更（patch）します。 しかし、UIが複雑になってくると仮想DOMも大き
Histoire
📖 StoriesWrite stories to showcase and document your components. ⚡ FastIncredibly fast development building and production page loading!
builders.flash は、変化を求める開発者の皆様へ向けて、楽しみながら実践的に学べるトピックを日本語でお届けする AWS のウェブマガジンです。お客様の開発のスピードを加速し、イノベーションをサポートするハンズオンや技術解説を通じて、毎月お好きな時間に学ぶことができます。 メールメンバーに登録 することでハンズオンに役立つクレジットコードや最新アップデートを受け取ることができます。
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Vue.jsを利用してスクラッチからガントチャートを作成する方法を解説しています。JavaScriptのガントチャートを検索するとライブラリの利用方法を解説している記事がほとんどで作成方法を公開している記事を見つけるのは困難です。 本文書では有償・無償を問わずガントチャートのライブラリは一切利用しておらず、Vue.jsを利用してスクラッチからガントチャート の作成を行っています。 内容が比較的多いので3回に分けて文書を公開していますが、最終的には下記のようなガントチャートを作成することができます。 完成時のガントチャート 【実装するガントチャートの主な機能】 タスクバーは横方向にドラッグ&ドロップで移動することができ、移動が完了すると日付も一緒に更新されます。タスクバーの両側についている四角いボタンをドラッグ&ドロップすることでタスクの期間を変更することができ、日付も一緒に更新されます。タ
React VS Vue ～ どっちを使うべきか問題に終止符を打つ(2021年 ver)【Agent Grow Advent Calendar 2020：21日目】
React VS Vue ～ どっちを使うべきか問題に終止符を打つ(2021年 ver)【Agent Grow Advent Calendar 2020：21日目】 この記事は Agent Grow Advent Calendar 2020 21 日目の記事です。 React VS Vue の戦いにそろそろ決着をつけようじゃないか みなさん、Webフロントエンドで JavaScript 書いてますか？書いてますよね？ 以前は Web開発といえば、サーバー側で HTML を作ってそのままブラウザで表示、 というパターンが多かったですが、 最近ではサーバーは API 化して、表示まわりは JavaScript で制御、 というスタイルも結構多くなってきましたよね。 そのため、フロントエンドにも何かしらライブラリを入れることも、 当たり前になってきました。 2020 年だと、主流は React
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.jsでカテゴリー分けされた画像リストを実装
【徹底比較】Vue.js と React でレンダリングされる値、されない値
Pinia | The intuitive store for Vue.js
PLAIDはGitHub Sponsorsを利用してOSSのスポンサーになりました
アイテム画像件数上限アッププロジェクトの裏側 - STORES Product Blog
VueUseで極めるVue.jsとComposition API - ICS MEDIA
TypeScriptとも相性抜群なライブラリ──Vue.jsで状態管理を行う新定番「Pinia」を解説！
Introducing Astro: Ship Less JavaScript | Astro
How To Optimize Performance In Vue Apps | DebugBear
Vue.jsで再利用可能なタブのUIコンポーネントを実装する方法を解説
SPAでボタンコンポーネントをリンクにする時に気をつけること
ReactとVueの比較 | 完全に同じアプリのコードの書き方の違い - Qiita
ついにβ版となったVue 3.5の魅力的な新機能をまとめてみた
VitePress | Vite & Vue powered static site generator.
最近のNuxt.js関係の仕事内容 | blog.y-temp4.com
Vue 3 was a mistake that we should not repeat
Intersection Observerを使用すると実装が簡単に！Vue.jsでスクロールイベントをトリガーする方法
Nuxt3で個人的にuseFetchよりuseAsyncDataを推したい理由
【Vue.js】ref と reactive どっちを使う？
Storybook 7 を Vue 3 + TypeScript ではじめよう！
Vue.js 3 アップデート対応の現状報告 - BASEプロダクトチームブログ
Optimized Images for your Nuxt Apps
2024-01-02のJS: Vue 3.4、Vue 2.xのEOL、quick-lint-js 3.0.0、AstroとDenoの2023年まとめ
Inertia.JSでAPI不要のモノリシックReact/Vue/Sevlteアプリケーションが記述可能に
<Lazy> rendering in Vue to improve performance
2023-01-06のJS: Vue 2のEOLは2023年末、NextAuthはAuth.jsに、React NativeのFirst-class Support for TypeScript
Vue Vaporモード近況 | gihyo.jp
builders.flash - 変化を求めるデベロッパーを応援する AWS のウェブマガジン
Vue 3 Composition API を使ってみよう - Qiita
スクラッチからVue.jsで作る自作ガントチャート | アールエフェクト
mainichi.jp
news.yahoo.co.jp
posfie.com
www.as-web.jp
tabelog.com
posfie.com