WP REST APIでキーワード検索をしたら非同期で検索結果を表示
// ボタンクリックでイベント開始 document.getElementById("search-button").addEventListener("click", async () => { const searchInput = document.getElementById("search-input"); const searchResults = document.getElementById("search-results"); // 文字列の両端の空白を削除 const keyword = searchInput.value.trim(); // キーワードなしの場合無反応 if (keyword.length === 0) { return; } const targetSiteUrl = 'https://jobtips.net/'; // APIで取得したいURLを
HTMLにsearch要素が追加されたぞ！
先週、HTML Living Standardの仕様にsearch要素が追加されました。 ブラウザへの実装はまだ先になると思いますが、検索フォームを実装する時は下記のようなHTMLを使用できるようになります。アクセシビリティの面でも率先して使用していきたいですね。 参考: The search element 2023年3月24日、HTML Standardの仕様にsearch要素が追加されました。 Add the <search> elementhttps://t.co/AlmyHd0qxI — HTML Standard (@htmlstandard) March 24, 2023 追加されたsearch要素は、下記で確認できます。 カテゴリは、フローコンテンツです。 4.4.15 The search element -HTML Standard search要素は、検索またはフィル
ソースコードから検索できる！PublicWWWとNerdyDataを使ってみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。エンジニアのつっちーです。 みなさんは「ソースコードから検索したい」と思ったことはないでしょうか。 「あるライブラリについて、どんなサイトで採用されているのか知りたい。」「あるCSSプロパティについて、実際のサイトでの使用例を参照したい。」 たとえばこんなとき、Googleなどの検索エンジンでは期待するような検索結果にはならないでしょう。 でもこの記事で紹介するPublicWWWとNerdyDataなら、できちゃうんです！ では、それぞれ検索結果と特徴を見ていきます。 検索結果のちがい Google、PublicWWW、NerdyData、それぞれのサービスで「Swiper」と検索し、比較してみました。スライダーライブラリ・Swiperを採用しているサイトの一覧取得を目的とします。 Google Googleでは、当然ながら、Swiperのオフィシャルサイトや、Swiperの使
Akar Icons
A perfectly rounded icon library made for designers, developers, and pretty much everyone.
Pattern Monster - SVG Pattern Generator
Changelog September 5, 2023 Added 10 new patternsAdded Japanese translation available hereAdded Korean translation available hereJuly 16, 2023 Added 10 new patternsUpdated Russian translationAdded Czech translation by Jan Drochytka available hereAdded Danish translation available hereAdded Finnish translation available hereAdded footer link to Creze certificate generator hereJune 2, 2023 Added 12
Indie Icons | VISIWIG
AddAirplaneAlien FaceAlign CenterAlign JustifyAlign LeftAlign RightArrow BackArrow DownArrow LeftArrow RightArrow UpAtomBar ChartBasketballBattery 0Battery 1Battery 2Battery 3Battery 4BeakerBellBinocularsBlockBookBookmarkBracketsBriefcaseBrowserBullhornCalendarCalendar AltCameraCartCheckmarkChevron DownChevron LeftChevron RightChevron UpCircle LargeCircle MediumCircle SmallClockCloudCloverClubCode
Web制作者におすすめ！VS Codeと同じエディタを使用した最強のコードスニペットマネージャーが登場 -massCode
使い勝手がよく、高速動作のオープンソースのコードスニペットマネージャーを紹介します。VS Codeと同じMonacoがエディタに使用されており、非常に快適です。 macOS, Windwos, Linux対応のアプリで、Web制作のさまざまな言語をサポートしています。日本語の入力など、日本語環境でも問題なく利用できます。 massCode massCode -GitHub massCodeの特徴 massCodeのダウンロードとインストール massCodeの使い方 massCodeの特徴 massCodeは、デベロッパー向けのコードスニペットマネージャーです。ライセンスはGNUで、オープンソースなので商用でも無料で利用できます。 macOS 10.13+, Windows 7, 8, 10, Ubuntuをサポートしています。 コード管理 massCodeは、マルチレベルのフォルダとタグ
CSS Flexboxで、Webページによく使用されるUIコンポーネントを実装するテクニックのまとめ
CSS Flexboxを使用してWebページによく使用されるUIコンポーネント、ヘッダでロゴを左端にナビゲーションを右端に、固定幅のサイドバーと流動幅のメイン、フォームで入力欄とボタンの高さを合わせる、同じHTMLで異なるレイアウトのカードを実装するテクニックを紹介します。 CSS Flexbox: 5 Real World Use Cases by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Flexboxでヘッダを実装する方法 Flexboxでサイドバーとメインを実装する方法 Flexboxで「Top Sellers」のグリッドを実装する方法 Flexboxでカードを実装する方法 Flexboxで検索フォームを実装する方法 はじめに FlexboxはCSSの中でも最も優れた機能の1つ
Beeftext - Windows用のスニペット管理
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 仕事中、繰り返し使う文面であったり、よく使う関数があります。それらをメモしておくと便利です。そして必要な時に検索してコピー&ペーストすれば仕事の効率が大幅にアップするはずです。 今回紹介するBeeftextもそんな短文、スニペットを管理するソフトウェアです。 Beeftextの使い方 新しいスニペットを記載します。 スニペット一覧です。グループ管理できます。 設定です。 Beeftextはショートカットキー操作が基本で、さっと立ち上げて検索し、そして文字列をコピーするといった一連の操作をショートカットキーでできます。Webベースでなく、GUIアプリケーションなのも使いやすい点です。 BeeftextはC++製、Windows用のオープンソース・ソフトウェア（MIT License）
Google検索結果に表示される説明文などの詳細なコントロールを可能にする新仕様が発表
by 422737 Google検索の検索結果画面には、単に関連のあるウェブサイトのタイトルやURLが表示されるだけではなく、ウェブサイトの内容を説明するテキストなども表示され、ユーザーが適切なウェブサイトを発見するために役立てられています。そんなGoogle検索結果に表示されるコンテンツの内容について、ウェブサイトの運営者がより詳細にコントロールするための、新たな仕様が発表されました。 Official Google Webmaster Central Blog: More options to help websites preview their content on Google Search https://webmasters.googleblog.com/2019/09/more-controls-on-search.html Googleの検索結果にはコンテンツのテキストな
table内をテキスト検索して該当キーワードを持つ列を表示する
Result table内のすべてのテキストから検索し、該当箇所のある列を表示する、みたいなやつ ある程度の量を持つデータテーブルだけど超大量でもないから、重いスクリプトは使いたくない、みたいな中途半端な状況の時は少ないコードで済ませたいところですね vanillaなコードで動作します JavaScript(function(document) { 'use strict'; var LightTableFilter = (function(Arr) { var _input; function _onInputEvent(e) { _input = e.target; var tables = document.getElementsByClassName(_input.getAttribute('data-table')); Arr.forEach.call(tables, funct
Webデザイナー向けに役立ちそうなリソースをまとめている・「Neede Design Resources」
Neede Design ResourcesはWebデザイナーやUI、UXデザイナーなどデザイナー向けのリソースを大量にまとめているキュレーションサイトです。ブランディングやカラーツール、コミュニティ、インスピレーション、フォトストックやソフトウェア、タイポグラフィなどのカテゴリに分けられています。 よくあるキュレーションサイトですが、使ってみると1つだけ違う点がありました。 各リソースを自分用のお気に入りに Needeではログインもユーザー登録も不要で、各リソースアイテムをお気に入りに入れる事が出来ます。マウスホバーで♡マークが出るので押すだけ。 これでFavorites項目にアイテムが追加されます。ユーザーがさらに自分自身で情報をキュレートできるのが本サイトの特徴です。いちいち気になったリソースを確認せず、後でまとめて確認できるので情報収集も多少捗るかもしれませんね。 Neede De
Webディレクターも覚えておきたい！「正規表現」を紹介します | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、Webディレクターのともぞうです。 突然ですが、今回の記事は正規表現についてお話ししたいと思います。 正規表現とは もしかしたら「正規表現ってなに？」という方もいらっしゃるかもしれません。まずは辞書的な意味からご紹介しましょう。 正規表現 文字のパターンを表現する方法のひとつ。特定の文字（メタキャラクター）を使って、汎用的に文字列のパターンを表現し、文字列の置換、検索などに使用する。たとえば、「.」は任意の文字を表し、「*」は前の文字の繰り返し、「^」は行頭、「:」は行末を示す、などさまざまな表現方法がある。これらを使うことで、「数字ではじまり、ひらがなを含む行」や「行末が（。）で終わらない行」といった複雑な文字列のパターンを表現できる。文字検索の「grep」や置換の「sed」、高度なテキスト処理が可能な「AWK」や「Perl」など、正規表現はUNIX関連のテキスト処理コマンド
WordPress：タイトルを自在にカスタマイズする方法 - コムテブログ
TL;DR WordPress4.4 以降において title タグを自動出力するには、非推奨の wp_title()関数の代わりに、テーマの機能を設定する関数add_theme_support( 'title-tag' );を functions.php に記述します。functions.php の中に書くことで保守性もよくなります。 WordPress4.4 以降の title の記述方法 functions.php function mytheme_set() { add_theme_support( 'title-tag' ); } add_action( 'after_setup_theme', 'mytheme_set' ); after_setup_themeは全てのテーマが読み込まれた後にテーマの機能を設定するフックです。タイトルが重複するので header.php には
JavaScriptのArrayを知る。大きな目標への小さな一歩 〜Array.prototype.find編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
過去の記憶が断片的になってきたと感じる、脳筋フロントエンドエンジニアのザワです。地道な積み重ねでなんとかカバーしていきたいものです。 さて、よちよち進んでいますArrayシリーズ。今回は、Array.prototype.find編です。 find……って、これまた何をするのか名前から簡単に想像できそうですね。 はい、そうです。「見つける」です。 findメソッドを学んでいく中で何かしらを見つけて、未来への何かしらの糧になればと思っています。それでは元気に進めていきましょう！ ※ここからの説明は個人的に調べて解釈したざっくりとした説明になります。詳しく知りたい方はこちらへどうぞ。 Array.prototype.find()メソッドとは 配列の中から目的の要素を見つけるメソッドです。 要素が見つかれば要素の値を返し、見つからなければundefinedが返ってきます。 実装例文 さっそく例文で
jQueryスニペット：検索アイコンからローディングにアニメーション遷移 | かちびと.net
Result 検索アイコンから時計アイコン（ローディング）に遷移する、みたいなやつです JSというよりCSSがメインになってますが・・ jQuery$('.search').on('click touch', function(e) { var self = $(this); self.addClass('loading');//アイコンをクリックしたらladingクラスを付与 setTimeout(function() { self.removeClass('loading');//本サンプルでは便宜上時間で動作停止 }, 3000) });css.search { width: 20px; height: 20px; border: 2px solid #fff; border-radius: 50%; position: relative; margin: 1px 3px 3px 1
その名の通りのfilter()で絞り込み。（配列とかおれおれAdvent Calendar2018 – 12日目） | Ginpen.com
const users = [ { id: 101, name: 'Alice', active: true }, { id: 102, name: 'Bob', active: false }, { id: 103, name: 'Charlie', active: true }, ]; const activeUsers = users.filter((v) => v.active); console.log(activeUsers); 仕様 配列のこれ系のメソッドと同じです。 Array.prototype.filter() – JavaScript | MDN newArray = arr.filter(callback(element[, index[, array]])[, thisArg]) 引数 filter() は引数に、関数オブジェクト callback(element
配列の要素削除はsplice()で。（配列とかおれおれAdvent Calendar2018 – 06日目） | Ginpen.com
const arr = [11, 22, 33, 44, 55]; const index = 2; console.log(arr[index]); // => 33 arr.splice(index, 1); console.log(arr); // => [ 11, 22, 44, 55 ] 第2引数 1 を忘れるとごそっと消え去るので気を付けてください。 仕様 Array.prototype.splice() – JavaScript | MDN array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) 対象の配列は破壊的に変更されます。 引数 start … 削除開始する位置。先頭は 0 。負数の場合、後ろから数える deleteCount … 削除する数。初期値は array.length - start item1
配列から条件に合うものはfind()で見つけよう。（配列とかおれおれAdvent Calendar2018 – 04日目） | Ginpen.com
配列とかおれおれAdvent Calendar2018 – 04日目 その名の通り find() で見つける (find) ことができます。 オブジェクトの配列相手に使うのが普通。 基本的な使い方 引数に真偽値を返す関数を与えます。 const users = [ { id: '101', name: 'Alice' }, { id: '102', name: 'Bob' }, { id: '103', name: 'Charlie' }, ]; const id = '102'; const targetUser = users.find((v) => v.id === id); console.log(targetUser); // => { id: '102', name: 'Bob' } この例だと (v) => v.name === id の部分が find() の第1引数「真偽
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AI Programmer