はじめに Gridsome どんな感じで動くのか やってみる データソースとかもろもろ設定してみる ビルドする Wordpressをデータソースに設定してみる まとめ はじめに 前回、Docker + Remote Containersを最高だと紹介したわけですが、今回はGridsomeを紹介します。そもそも前回のブログはこれを試すために環境を整備しなおそうとしたのがきっかけでした。なお、前回のブログはこちら。 www.keisuke69.net どこらへんが最高かっていうと全てのデータソースに対してGraphQLでアクセスできるようになるところ。これって最高じゃないですかね。ま、最終的には静的サイトとしてGenerateしてしまうわけですが。 ちなみに、なぜ、今回Gridsomeを試そうと思ったかというと、最近聞いたとあるPodcastで紹介されてたからです。それだけ。 Gridsome
React 本体のみで Redux フレンドリーな非同期処理を実現するアイデア | Recruit Tech Blog
こんにちは。2019 年 10 月に join した kazuma1989 です。スタディサプリENGLISH の Web 版を担当するフロントエンドデベロッパーです。 今回は、React と Redux を用いたアーキテクチャーで問題になる 非同期処理 を扱うアイデアの一つをご紹介します。Redux フレンドリー と題したように、Redux でなくとも（useReducer や unstated-next でも）適用することができます。 アイデアを EffectComponent と名付けました。そもそも Redux において非同期処理の何が問題なのか、そして EffectComponent とは何か説明します。React Hooks と Redux についてある程度知っていることを前提とします。1)言語は TypeScript です。がんばらないで始める のがおすすめです Redux
Opens in a new windowOpens an external siteOpens an external site in a new window Databases are a key scalability bottleneck for many web applications. But what if you could make a small change to your database design that would unlock massively more efficient data access? At Shopify, we dusted off some old database principles and did exactly that with the primary Rails application that powers onl
初めて Apollo Client を使うことになったらキャッシュについて知るべきこと - WASD TECH BLOG
この記事は GraphQL Advent Calendar 2020 2日目の記事です。 前回は mtsmfm さんの記事でした。 GraphQL は REST などと同じく、DB のテーブルをそのまま露出するとは限らない - Qiita はじめに こんにちは、 shinnoki です。 フロントエンドで用いる GraphQL のクライアントは複数の選択肢が存在しますが、 React + TypeScript なプロジェクトでは Apollo Client が採用されることが多いのではないでしょうか。 Apollo Client の特徴のひとつに強力なキャッシュ機構がありますが、逆に理解しないと意図しない挙動になることもあったりと、初学者にとってはなかなかイメージを掴みづらいものになっています。 まず最初に結論として、「初めて Apollo Client を使うことになったけど、とにかく早
RustでGraphQLやってみるその3(関連付けされたデータを扱う) - 虎の穴開発室ブログ
皆さんこんにちは、虎の穴ラボのY.Fです。 GraphQLシリーズとして連載してる記事の4つめの記事になります。(本エントリー2回+番外編1回) 前回までの記事はこちら (前回の記事) toranoana-lab.hatenablog.com (番外編) toranoana-lab.hatenablog.com さて、今回はGraphQLを使って関連するデータを扱ってみたいと思います。 データの関連付けを行う 前回記事までで作成していた Photo テーブルの親テーブルとして Post テーブルを作ることにします。 マイグレーション方法などは前回記事を参照してください。ここではテーブル作成、カラム追加のSQLのみ記載します。 Postsテーブル作成 --- Your SQL goes here CREATE TABLE posts ( id SERIAL NOT NULL PRIMARY
概要 2022年のフロントエンドに必要なスキルマップにもあるように、GraphQLという選択肢が一般化しています。 引用元 GraphQLを使用する場合、GraphQLの特性を知らなければなりませんが、今回の記事ではGraphQLとは何か。どう使うのかについては言及致しません。その場合は、こちらの記事を一読していただけますと幸いです。 今回は、GraphQLを使用する際にGraphQLのスキーマやクエリからTypeScriptの型定義を自動生成する方法について記事にしていきます。 GraphQLのスキーマやクエリからTypeScriptの型定義を自動生成するには 例えば、フロントエンド開発においてTypeScriptの導入をしている場合、GraphQLのスキーマごとの型定義を作成しなければなりません。 ただ、GraphQLのスキーマを確認しながら型を手動で作っていくのってしんどいですよね。
こんにちは、ケイジです。 WordPressのカスタマイズなどをして暮らしています。 当ブログを先日リニューアルしたのですが、人気記事ランキングを表示させるようにしました。 今回は当ブログでも実際に使っている、WordPressで表示回数が多い順に投稿を表示させる方法をご紹介します。 ランキング表示にはWordPress Popular Postsプラグインが有名です。 それをインストールしてしまえば手っ取り早いのですがWordPressプラグインは出来るかぎり少ない方が望ましいので、直接コードを書いていきます。 WordPressの人気記事ランキングをプラグインなしでつくる 基本的なことはmanablogさんの過去記事に掲載されていましたので、そちらをベースに使っていきます。 しかし、その記事ではWordPress公式から非推奨とされているquery_posts()が使われているので、W
カテゴリー毎に記事投稿一覧を表示する | WPスイッチ
トップページ等に最上位のカテゴリーと、それぞれのカテゴリーに属する投稿を取得して一覧表示する場合の記述です。 "query_posts"を使用して出力する方法を見かけますが、現在では"query_posts"は非推奨となるため、ここでは"WP_Query"を使用しています。 参考：WordPress Codex 日本語版 テンプレートタグ query posts index.php等<?php $categories = get_categories(array('parent' => 0)); //最上位のカテゴリーのみを取得する foreach ($categories as $category): ?> <h2><a href="<?php echo esc_url(get_category_link($category->term_id)); ?>"><?php echo $cat
GraphQL Code Generator 導入する
import { gql, useQuery } from '@apollo/client'; interface PostQuery { posts: { id: string title: string author?: { id: string firstName: string lastName: string } }[] } const postsQueryDocument = gql` query Posts { posts { id title author { id firstName lastName } } } ` const Posts = () => { const { data } = useQuery<PostQuery>(postsQueryDocument); // ... }
/** * WordPress Post Thumbnail Template Functions. * * Support for post thumbnails. * Theme's functions.php must call add_theme_support( 'post-thumbnails' ) to use these. * * @package WordPress * @subpackage Template */ /** * Determines whether a post has an image attached. * * For more information on this and similar theme functions, check out * the {@link https://developer.wordpress.org/themes/b
WordPressサイトに自動更新されるサイトマップを作る方法をご紹介します。プラグインを使わない方法です。一度作成すれば、コンテンツが増えるたび自動的に反映されます。WordPressに慣れていない方でも5分程度でサイトマップを作成できます。 サイトマップとは？初めに【サイトマップ】がどういったものなのか解説をしておきます。 以下の解説が【サイトマップ】を理解する上で非常に分かり易いのでご紹介します。 サイトマップとは、一言で表すと、サイト内のページリンクをまとめたページのことで、検索エンジンと検索ユーザー双方に、そのサイトにどうのようなページがあるのかを伝えるためのものだ。このサイトマップには非常に重要な役割があり、サイトのユーザビリティの改善や、内部SEOの向上にも密接に関わっている。サイトマップのSEO効果と理想的な作成方法より引用 設置する理由としては、以下の2つが挙げられていま
Simplify GraphQL requests with React Query, GraphQL Code Generator, and TypeScript - LogRocket Blog
Simplify GraphQL requests with React Query, GraphQL Code Generator, and TypeScript Using a GraphQL API comes with distinct advantages. With GraphQL, we can request the exact data we need without ever under- or over-fetching. We can also get multiple resources in a single request. At the same time, the requests themselves can serve as a form of documentation, making it is easy to understand what da
今回はWordPressのカスタム投稿タイプの記事一覧ページ（アーカイブページ）を作る方法を紹介します。 というテンプレ階層になっています。本当はもう少しあるけどほぼこの2つしか使いません。 カスタム投稿タイプのスラッグっていうのはコレです↓（Custom Post Type UIを使っている場合） カスタム投稿タイプごとに使用するファイルを分けたい場合はarchive-[カスタム投稿タイプ名].php、全てのカスタム投稿タイプで同じファイルを使用したい場合はarchive.phpにするといいと思います。 これがカスタム投稿タイプを一覧表示させるファイルになります。 ループ処理をするサブループに一覧表示させたいカスタム投稿タイプを指定することで、その投稿タイプの記事一覧を表示できます。 なお、サブループはnew WP_Query()を使用してください。 たまにquery_posts()で書
[WordPress]プラグインを使わずに、カスタム投稿タイプごとに検索をする方法（wp_query）｜blog（スワブロ） | スワローインキュベート
[WordPress]プラグインを使わずに、カスタム投稿タイプごとに検索をする方法（wp_query） 2019.01.10 むったん 明けましておめでとうございます、六崎です。 今年もフロントエンド周りのお話から、オタクなお話までずずーぃっと書いていこうと思うので、 よろしくお願いします(´人・ω・｀) では、早速オタクなお話（笑） 去年末のお話になるのですが… よ、横浜に…パシフィコ横浜にリアルヒノエがいたよぉぉぉぉ☆:*:・｡ﾟ(ﾟﾉД｀ﾟ)ﾟ｡・:*゜☆ 行ってきました…「遙かキャラソン祭」へ！ ロビーは出演キャラクターのお出迎え 夜の部のみ参加したのですが、もうホントに参戦してよかった！ 初っ端から井上和彦さんの月下美人（橘友雅）、水蜜桃の雫絵（翡翠）という大人な構成。 一緒に参戦した大学時代の先輩は「ヤバい、ヤバいから…」って呟いてました（笑） 私の本命はというと… 「あれ、こ
![[WordPress]プラグインを使わずに、カスタム投稿タイプごとに検索をする方法（wp_query）｜blog（スワブロ） | スワローインキュベート](https://cdn-ak-scissors.b.st-hatena.com/image/square/edf92f4d8e7d406524174358ae7a9ecf8c13c51a/height=288;version=1;width=512/https%3A%2F%2Fswallow-incubate.com%2Fsw_wp%2Fwp-content%2Fuploads%2F2019%2F01%2Fg12.png)
GraphQL VS REST – Benefits and Code Example Comparisons
REST was not the first protocol for sending information over the web. But for over a decade, it has dominated the API landscape. More recently, GraphQL, a newcomer designed by Facebook, has become more and more popular. It is intended to correct some of REST’s weaknesses, but no technology is perfect. What are the benefits of GraphQL over REST, and why would you use one over the other in your proj
プラグインIntuitive Custom Post Orderを使っているのに、並び替えが効かないケースがあったので、その対処方法をメモ。 カスタム投稿タイプのテンプレートを使っていたケース プラグインIntuitive Custom Post Orderで並び替えをするには、管理画面の「設定＞並び替え」で、並び替えたい投稿タイプなどにチェックを入れる必要がある。しかし、チェックが入っていて、管理画面でも並び替えができるのに、サイト上では並び替えが反映されないというケースがあった。 私の場合、カスタム投稿タイプのカテゴリー別記事一覧ページで並び替えが効かなかった。taxonomy-×××.phpのテンプレートを使っているページだった。 アーカイブのテンプレートでは、設定しなくても大丈夫そうですが、タクソノミーで作ったカテゴリーで表示させた場合、デフォルトの日付順に表示されてしまうので、設
<?php /** * ページネーションHTML出力 * * $limit ページあたりの表示上限数 * $post_typed 投稿タイプのスラッグ */ function pagenation($limit = NULL, $post_typed = 'posts') { global $wp_rewrite; global $paged; global $wp_query; // 検索条件 $query = array(); if ($limit != NULL) { $query['posts_per_page'] = $limit; } if (count($query) != 0) { $wp_query->query($query); } $wp_query->query(array( 'post_type' => $post_typed, )); $paginate_bas
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.jsのサイトジェネレータGridsomeが最高かもしれない - Sweet Escape
How to Introduce Composite Primary Keys in Rails
GraphQLのスキーマ定義やクエリから型定義、自動生成できまっせ - Qiita
WordPressのランキングをプラグインなしでつくる - caracal media／キャラカルメディア
I Wonder If Mattinguapp Is Trend に何も見つかりません
【WordPress】プラグインなしで自動更新されるサイトマップを作成する方法
【WordPress】カスタム投稿タイプの記事一覧（アーカイブ）ページを作る方法
カスタム投稿タイプでIntuitive Custom Post Orderの並び替えが効かない場合
【WordPress】カスタム投稿タイプにも対応しているページネーション用関数 - Qiita