今からでも遅くないconsoleを使いこなそう - Qiita
はじめに この記事では、consoleメソッドについて紹介を行っていきます。consoleメソッドには例えばconsole.log()などが挙げられます。web開発においてconsole.log()を使用する方は多いかもしれません。しかしconsoleにはconsole.log()以外にも様々なメソッドがあるので、状況に合わせて使い分けることで少しでも快適なデバック、開発ライフを目指しましょう。 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 consoleについて consoleオブジェクトを用いることで変数の値などをコンソール上に出力することができます。主に出力の確認であったり不具合の原因特定などのデバックするために
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を
実はこんなこともできる！MW WP Formの便利なカスタマイズを紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。バックエンドエンジニアのまうみです。 今回はWordpressでお問い合わせフォームを実装する際の定番プラグイン、MW WP Formの知っておくと便利なカスタマイズを紹介します。 MW WP Formはシンプルなショートコードを生成し、簡単に確認画面付きのフォームを作成できることが特徴です。しかもカスマイズの幅もとてつもなく広く、応用次第で様々な案件に対応できるポテンシャルを持ったプラグインです。 今回は機能別に、「えっ、そんなこともできるの？」というようなMW WP Formのカスタマイズ技をご紹介します！ 出力されるタグのhtml構造を変更したい 例えばデフォルトのタグのDOMの構造を変更して、独自のclassを追加したい……そんなときのためのカスタマイズです。 プラグイン内で管理されているテンプレートパーツを、WordPressのthemeディレクトリにコピーすることで
Google純正の構成図作成ツールが登場したので早速使ってみた
クラウドサービスでは大量の機能が多種多様に提供されており、簡単なアプリでも複数のサービスを組み合わせて利用することも珍しくありません。そうしたバックグラウンドのサービスを設計する際に役立つのがサービス間の構造を図に落とし込んだ「アーキテクチャ図」です。これまでもサードパーティーからさまざまなアーキテクチャ図作成ツールが提供されてきましたが、2022年2月17日にGoogleが自社クラウド向けの公式アーキテクチャ図作成ツールをリリースしたので、早速使い勝手を試してみました。 Google Cloud Developer Cheat Sheet https://googlecloudcheatsheet.withgoogle.com/architecture Introducing a Google Cloud architecture diagramming tool | Google Cl
WordPressで日付の範囲指定をして記事を表示する方法 | それからデザイン スタッフブログ
WordPressでブログ投稿を一覧ページに表示する際、○月○日から○月○日までといった具合に、日付の範囲指定して表示させたいことなどありませんか？ 例えば、○月○日から○月○日までのイベントに関する記事を表示させたいなどが考えられると思います。 そのような場合、「date_query」を上手に使うと、日付の範囲指定をして記事を表示することができるので、とても便利です。 今回は、「date_query」の使い方やパラメーターの種類について、幾通りかの日付の範囲指定を例に、少しご紹介をさせていただきたいと思います。 WP_Queryクラスで「date_query」を利用する 投稿日を指定する場合（例 2015/7/21 ） year、month、dayに取得したい日付をそれぞれセットします。 $args = array( 'date_query' => array( array( 'year
WordPressのバージョン5.5.0から追加されたXMLサイトマップ自動出力機能を紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
WordPress5.5.0から追加された新しい機能についてご紹介します。 この記事を執筆中のWordPressの最新バージョンは5.8.2なので、なんで今更と思われてしまうかもしれませんが、少し驚いた機能だったのでこうして記事にしてしまいました。 WordPressはXMLサイトマップを標準で出力する？ しない？ これまでWordPressではXMLサイトマップはそのままでは出力されませんでしたので、プラグインを利用したり、または自前で用意したりといったかたちで対応をしてきたと思います。あるとき、WordPressをいじっているとまだ準備していないはずのXMLサイトマップが出力されていることに気づきました。 WordPress5.5からはデフォルトでXMLサイトマップが出力されるようになっていたのです。それがどのような機能なのかを簡単に見ていきたいと思います。 XMLサイトマップには、設
outputで出力結果（知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 21日目） | Ginpen.com
知名度が低いウェブ標準ひとり Advent Calendar 2021 – 21 日目 今日は <output> です。<input> の逆です。 <output>: 出力要素 – HTML: HyperText Markup Language | MDN デモ：https://codepen.io/ginpei/pen/poWwZeK 基本的な使い方 <input> と異なり終了タグが必須です。 また JavaScript 側では <input> と同様 value プロパティを持ちます。 for 属性 計算に係る情報を提供する要素の ID を与え関連性を for 属性で明示することができます。複数ある場合は空白区切り。 明示できるだけでそれ以上の効能は仕様では示されていません。なんか実装でうまいこと扱ってるやつあるのかな。 必須ではないです。 type プロパティ そういえば valu
QUERY関数の基本と簡単な応用例！意外と気づかない2つの注意点も紹介【Googleスプレッドシート】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
LIGのtetsuこと手塚です。情報システム室の室長をしています。 LIGでは主にGoogleのサービスを利用していることが多く、社内共有の利便性からGoogleの「スプレッドシート」を使う機会が多くあります。特に業務の中では、表計算やデータの集計などで多く使い、あらゆる関数を駆使して必要なシートを作成していきます。 今回はその関数の中でQUERY関数について、少し紹介していきます。QUERY関数はVLOOKUP関数より複雑な条件で出力したり、出力結果の並びを自由に変更できる関数です。 QUERY関数とは QUERY関数の説明でGoogleでは Google Visualization API のクエリ言語を使用して、データ全体に対するクエリを実行します。 参照元：Google とあります。 これはGoogleが提供するスプレッドシート内のデータに対する処理を、指定の書式で構成した命令文を
BlackHole - オーディオの入出力を繋ぎ混む仮想オーディオデバイス MOONGIFT
コンピュータから出力される音声を取り込みたいと思うことがよくありますが、実は標準の機能にはありません。これは出力と入力を連結させる必要があり、そのためのソフトウェアが幾つかあります。 今回紹介するBlackHoleもそんなソフトウェアの一つです。設定が簡単で使いやすそうです。 BlackHoleの使い方 利用する際には音声の出力先としてBlackHoleを指定します。 後は音声を使う側のソフトウェアで、入力ソースをBlackHoleとするだけです。macOS用のソフトウェアとしてはSoundflowerが知られていますが、BlackHoleはより手軽そうな印象を受けました。 BlackHoleはC製のオープンソース・ソフトウェア（GPL v3）です。 ExistentialAudio/BlackHole: BlackHole is a modern macOS virtual audio
Web上でアニメーションを表示するなら「Lottie」がおすすめ！特徴や使い方など | Web Design Trends
Web上でアニメーションを表示するなら「Lottie」がおすすめ！特徴と使い方など Webサイト上でアニメーションを実装する場合、簡易なアニメーションはCSSやJavaScriptで手軽に作ることができますが、リッチなアニメーションを作ろうと思ったらコード量も結構なボリュームになってしまいます。 そんな時におすすめなのが「Lottie」です。LottieはAfter Effectsで作成したアニメーションを簡単にWebやアプリで表示することができ、パフォーマンスにも優れています。 今回は、Lottieの特徴や使用するメリット、使い方などをご紹介したいと思います。 Lottieとは LottieはAirbnbが公開しているアニメーションを表示するためのライブラリです。スマホなどのネイティブアプリがメインのようですが、Webサイト上でも高クオリティのアニメーションを簡単に表示することができ、非
console.log()だけじゃない、覚えておくとデバッグ効率の向上に繋がるConsole API - NxWorld
JavaScriptのデバッグ時などにconsole.log()を利用する人は多いと思いますが、Console APIには他にも呼び出された回数カウントや経過時間確認などといった便利なものが複数用意されています。 覚えておくとデータの中身を把握しやすくなったりデバッグ効率の向上に繋がると思うので、普段からJavaScriptを触ってはいるけど使ったことがないという人は試してみてください。 ログレベルについて記載していないものは、Chromeが「info」に、FirefoxとSafariが「ログ」に出力されます。 console.assert()以降で紹介している出力イメージはChromeのものになります。 また、ブラウザによっては使用できなかったり出力内容が紹介しているものとは異なっている場合があります。 console.log()
lessコマンドで特定の文字列をフィルタリングする方法
lessコマンドで特定の文字列をフィルタリングする方法を紹介します。 １．問題点 あるシステムで出力されるログを、"less +F"で動的に出力しているのですが、閲覧不要なログが大量に出力され、本当に見たい内容のログが見れません。 下記のようにすると、ログが動的に出力されなくなります。 % grep -v 除外文字列 | less +F ということで、lessコマンドで特定の文字列をフィルタリングする方法を紹介します。 ２．lessコマンドで特定の文字列をフィルタリングする lessコマンドで特定の文字列をフィルタリングするには、まずlessコマンドでログを表示します。 このとき、"+F"オプションは付与せずに表示させてください。 次に"&"を押下。これで下記のように"&/"が表示されます。 さらに"!"を押下すると"Non-match &/"という表示になります。 除外したい文字を設定。
画像のURLから、その画像のIDを取得する
画像のURLからその画像のアタッチメントIDを取得するコード。カスタムフィールドに格納した、どこにも紐付いてない画像の他のサイズのパスを取得する際にどうしても必要になった時に探してもなかなか方法が見つかりませんでしたので同じ内容で困ってる方用に。
PHPで「Cannot modify header information - headers already sent by」というエラーになる場合の対処
PHPで「Cannot modify header information - headers already sent by」というエラーになる場合の対処について紹介します。 １．問題点 次のようなPHPを作成しました。 <?php echo("test"); header('Content-Type: application/json; charset=utf-8'); …後略… ?> このPHPを実行したところ、「Cannot modify header information - headers already sent by (output started at /.../index.php:xx) in /.../index.php on line xx」というエラーが発生しました。 ２．原因 原因はheader()関数の前にecho文があるためです。 header()はHTT
StyleStats - スタイルシートの状態をチェック
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プログラミングの場においてはカバレッジであったり、メソッド単位の行数であったり、日ごとにおけるコード量の増加など可視化が進んでいます。見える化によって様々な情報が得られるようになり、改善ができるようになります。 スタイルシートにおいてもそれは同様です。可視化によって様々な情報が得られます。それを実現するのがStyleStatsです。 StyleStatsの使い方 手元のスタイルシートで試してみた結果。サイズや使われているセレクタなどが分かります。 URL指定でも使えます。こちらはBootstrapを試したところ。 どの状態がベストであるかはデザイナーによって異なると思いますが、これを日々記録しておくことができればスタイルシートの状態がどう変化しているのかが分かるようになるでしょう。
カスタム投稿タイプのカレンダーを表示する[WordPress]
Kotoriはマルファン症候群という難病を患っています！ 今後は、マルファン症候群に関するトピックも扱っていきます！ KOTORI Blogの公式キャラクター「パンD」です。 まえがき カスタム投稿タイプのカレンダーを表示したかったので「get_calendar()」を元に関数を作りました。とはいっても本当にちょっと手を加えただけですが。 カレンダーを表示したい場合は基本的に「投稿」を使った方が丸く収まりますがカスタム投稿タイプを使わなければいけない場合もあるかと思います。 そんな時に参考にしてもらえればと思います。 今回紹介する方法は、functions.phpにコードを書き足すタイプの方法です。 プラグインもあるのですが、ウィジェット形式にしか対応してなかったりするのでKoToRiはfunctions.phpにコード書いた方が自由がきくかな～と思います。 カスタム投稿タイプのカレンダー
![カスタム投稿タイプのカレンダーを表示する[WordPress]](https://cdn-ak-scissors.b.st-hatena.com/image/square/cf35252198fa49d645fc19e6f8d8119e35b78e35/height=288;version=1;width=512/https%3A%2F%2Fkotori-blog.com%2Fwordpress%2Fwp-content%2Fuploads%2Fthumb3.gif)
WordPressでリスト型カレンダー表示機能を追加してみた｜くろひつじのメモ帳
子どもの夜泣きで慢性的睡眠不足なひつじさんです。 以前WordPressで作ったダメ系ライブカレンダーの要望に「カレンダー表示機能を付けて欲しい！」とあり、設置してみました。その設置方法のメモです。 かなり強引なやり方だと思いますが、私の知識ではこのやり方でしか実装できませんでした。もっと勉強したいものです。 その点ご留意のうえご覧ください。 １年以上前の記事です。情報が古くなっている可能性があります。 やりたいこと・仕様 ・カスタムフィールドで追加してある日付を元にカレンダー表示にしたい ・祝祭日も表示したい ・WordPressのdata.phpは使わない ・同じ日にイベントが表示されることもある 投稿日時は投稿日時で使う場合もあるので、data.phpは使用しないやりかたにしました。 カレンダーの表示は固定ページを一つ設けて、そこで大きく表示させます。 コードサンプル 以下のようなや
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to change the default HTML output of a Gutenberg block in WordPress?
零弐壱蜂
正在安全检测...
