プリミティブ型 以下のような基本的なデータ型のこと boolean型 int型 str型 shar型 undefined https://developer.mozilla.org/ja/docs/Glossary/Primitive プログラミング言語によって扱うデータ型が違う 数値に使われるデータ型において、 C#は以下のデー…
フロントエンドエンジニアとしてスキルアップするべく コンピューターサイエンスの勉強を始めようと思います。 きっかけ きっかけは、csの学習方法で検索したときに recruision という学習支援サービス (progateのcs版？？)を見つけて試しに少しだけやってみ…
サーチコンソールに出たampのエラーを解決したのでログとして残しておきます。 今回は 「スクリプトタグに無効な JSON が含まれており、パースできません。」 について。 原因 構造化データの作成に用いるJSON+LDの部分でこけていました。 <script type="application/ld+json"> { "@context": "h…
記事内のimgタグをamp-imgタグに変換した際に起こったエラーについて。 今回行ったこと preg_replaceを用いて、 imgタグをamp-imgタグに置き換える。 //<img>を<amp-img>に差し替え $content = preg_replace('/<img (.*?)>/i', '<amp-img layout="responsive" $1></amp-img>', $content); $content = preg_replace('/<img (.*?) \/>/i', '<amp-img layout="responsive" $1></amp-img>',…</amp-img>
こんにちは！ ampなどに使われるwebworkerについて気になったのでまとめてみました。 webworkerとは javascriptをマルチスレッドで処理を行えるようにした、web api の一つです。 メインスレッドを止めることなくjavascriptを利用できるようになります。 オ…
今回は実際に構造化データを作成していきます。 構造化データとは okinawanpizza.hatenablog.com schema.org ・構造化データにおいて使用されるボキャブラリーの一つ。 ・グーグル、マイクロソフト、ヤフー、ヤンデックスが手を組んだ。 ・既存の情報をより…
amp化も残りは記事内の置換の部分と構造化データに関する部分となってきました。 ampのテストを行っていると、どうやら構造化データの追加も任意ではあるが必要になってくるとのことでした。 こちら構造化が完了した際の画像 いろいろ調べたことを追記します…
amp対応日記二日目 今日はamp用のテンプレートを実際に作成していきます。 前回の記事はこちらです。 okinawanpizza.hatenablog.com 今回も独断と偏見がすごいです。(笑) ampページのurlを作成 今回、テンプレートを切り分ける方法として記事のurlに「amp=1…
今日から仕事での開発の話もブログにしていこうと思います。 今回三つのAMP対応を任せてもらえることになりました！ かくいう私は一回もamp対応したことがなく、、 せっかくなので、ログを残していこうと思います。 AMP日記二日目 okinawanpizza.hatenablog.…
テキストの高さ中央揃え テキストの高さがそれぞれ違う場合はflexboxを使えばOK align-itemsで高さを中央に揃えることが可能です。意外と便利！ html <div class="demo">hello tamakipedia</div> css .demo { display: -webkit-flex; display: flex; -webkit-align-items: center; al…
js ファイルや jQuery ファイルの読み込みはLInkタグではなく functions.php に記述します。 function load_scripts { //jQの場合 wp_deregister_script('jquery'); //WPが持つjQueryを利用しない wp_enqueue_script( 'jquery',//読み込むJSを識別する名前（…
前回コメント欄の表示方法の出力方法について記事を更新しました。 okinawanpizza.hatenablog.com 今回はコメント欄に表示されるHTMLを変更していこうと思います。 というのも私自身、既存のテーマ「twentytwentyone」を上書きしなからテーマを作っていまし…
おはようございます！ 今日はコメント欄のカスタマイズ方法についてご紹介していこうと思います。 コメント欄のカスタマイズに関してもう少し踏み込んでみました。 okinawanpizza.hatenablog.com comments.php でできること ・ページネーション「前のコメン…
ゴールデンウィークはいかがお過ごしでしたか？ ひょんなことからブログの作成をお願いされたので 勉強がてら作成しました。 コメント関連は実装したことがなかったので、一度整理してみようと思います。 comments.php を呼び出す デフォルトのテーマでも co…
最近wordpressを書く機会が多くなってきました。 今回はループを使った処理について。 カスタムフィールどを使った並び替え meta_keyとmeta_valueを利用します。 $args = array( 'orderby' => 'meta_value' 'post_type' => array('post_type'), //投稿タイプ…
ampのドキュメントを読んでいた際に カノニカルというワードが出てきてチンプンカンプンでした。 その周辺知識をおさらいしようと思います。 カノニカルタグ 検索エンジンが重複しているページだと認識しないように正規化するためのタグのこと。 重複コンテ…
先週フロントでのバリデーションを作り直しました。 その時に使ったメソッドなどをメモしていきます。 フォームの内容についてはこっち↓ フロント側でフォームのバリデーションを追加したのでその忘備録 - Qiita フォーム関連で役立つjQuery 誰の役に立つの…
あけましておめでとうございます。 今年も一年張り切っていきたいと思います!! ctr + r ターミナルで過去のコマンド履歴を調べたい時は ctr + r が使えます。 実行すると、 ❯ bck-i-search: _ このような形になり、単語を入力すると過去履歴の一番直近のコマ…
FileReader 画像をプレビューする時には、web APIの一つである FileReader というものを扱います。 こちらを用いることで input で選択したファイルを非同期で読み取ることが可能です。 <input type="file" accept='image/*' multiple="multiple" onchange="preview(this);"> <div id="preview"></div> <script> function preview(obj){ for (i = 0; i < obj.files.length; i++) {…
inputで画像選択した後、 その画像をプレビューとして表示する方法についてまとめていきたいと思います。 FileReader を使ってプレビュー表示する 下記がプレビューを表示するコード <input type="file" accept='image/*' multiple="multiple" onchange="preview(this);"> <div id="preview"></div> <script> function preview(obj){ for (i = 0; i < obj.files.length; i++) { va…
こんにちはKOです。 今回は今まで続けてきたこの技術ブログを経て気づいたことを赤裸々に綴っていこうと思います。 2020年の1月からスタートして現在で約130記事、 3日に一回のペースで書き殴っているという風になります。 PV数は年間で4500PV、一記事あたり…
これはすごい小ネタになるのですが ボタンでオンオフを切り替えたい時、皆さんどの様にされていますでしょうか。 論理否定である！を使えば a = !a だけで ture → false → ture を繰り返すことが可能です。 <div onclick="init()"> スイッチ </div> <script> flag = "true"; function init(){ fla</script>…
こんにちは。 今日はcanvasについて、 arcという関数を使って円を描画する仕組みを説明していきます。 手順 ・html <body onload="init()"> <canvas id="canvas" width="600" height="400"></canvas> </body> ・js function init() { var canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); ctx.strokeStyle = "skyblue…
昨日どハマりした例です。 reactのフォーム用モジュール formikを使用しています。 textareaタグをスタイルコンポーネントで囲い その中でonchangeを読んでいます。 <TextareaWrapper> <textarea style={{ width: '100%', color: 'black' }} name="todo" onChange={formik.handleChange} rows="5" defaultValue={defaultTodo} > </textarea> </TextareaWrapper> 下記がtextareaWrapperのコンポーネン…
画面をクリックすると 「クリックしたよ！」という情報が 子要素から親要素に向かって順番に発生していくらしい。 See the Pen イベントの伝播 by たまき こう (@ulqvhvox) on CodePen. イベントの伝播を止めるには?? stopPropagationでバブリングを防ぐこと…
es6で利用されるアロー関数 function func() { } この書き方から const func = () => { } この書き方に変更されました。 addEventListerner時の書き方だと btn.addEventListener('mousedown', function() { this.classList.add('class'); }); ↓ btn.addEvent…
最近知ったchromeのディベロッパーツールの検索機能 ファイル内検索 「cmd + F 」 Elementでの「検索」コマンド ・cmd + F 画面の赤枠の位置に入力スペースが出現します。 さらに文字列を検索するだけでなく、 div.class#id のようなXPathと呼ばれる書き方で…
新しくmasterブランチをクローンしてきて、 別のブランチもcheckoutしてpullしたい時がありますよね そういう時は、このコード git checkout -b local_branch_name origin/remote_branch_name 通常のチェックアウトのコマンドに、 続けてリモートのブランチ…
クリック先の情報を取得する target プロパティーの使い方です。 同じイベントを呼び出すコードが複数あったときに、 一つの関数で条件に応じた処理ができるの便利です。 <body> <h1 id="title">イベントのtargetプロパティを使う</h1> <button id="button" type="button" data-new-Word="こんにちは">昼</button><br> <button id="button2" type="button" data-new-Word="こんばんは">夜</button> <script> var button = documen…</body>
スクロールで特定の要素にピタッと止まるスクロールありますよね 実はjsではなくcssで実現できるそうです。 scroll-snapというプロパティーを使って表現します。 100vhの要素が二つ重なっている状態を作って <div class="container"> <section class="area">1</section> <section class="area">2</section> </div> それぞれにcssscroll-snap-align: start;を…
