tamakipedia

かまくらぴよぴよフロントエンジニア

【css】等間隔で左寄せしたい時は、擬似要素で残りを埋める!

wordpressの制作案件の時に多いのでメモ!! justify-content: space-between; を使う際に もし左寄せにしたい場合は擬似要素を使って残りの要素分を埋めてあげましょう! ちょうどこちらのcodepenの三番目のレイアウトになります。 3カラムの場合、余白をマ…

再帰についてのまとめ

再帰についての章を学習したので、 そのまとめ。 再帰について 再帰とは自身を関数として呼び出す処理のこと。 足し算がわかりやすい例です。 例えば 5 + 5 のような加算も 5 + 1 + 1 + 1 + 1 + 1 とすることで 「5に1を足す」を繰り返している処理だと気づ…

関数の抽象化

関数の抽象化 具体的な処理を一般化することをいいます。 関数の抽象化を行うと、現実に存在するような複雑な問題を 小さなステップに分解することで効率よく処理ができるようになります。 メソッドチェーン メソッドを実行して、その結果に対してさらにメソ…

day 5 問題

第1章の分野を終えたので まとめの問題のようなものに取り掛かりました。 At Coder でよく見かけるような競プロ問題なので、 問題と学んだ関数について記載していきます。 まずはこちら 文字列 s と数値 i を受け取り、i 番目に「_」を入れた文字列を返す、…

day 4 関数

ライブラリ 関数は一つにつき一つのタスクを実行するものであり、 汎用性が高いファイルがまとめられたものをライブラリという。 例) Mathライブラリ ... 数学の関数を一括でまとめている図書館のようなイメージ (pythonやJava は import する必要があるみた…

day3 関数

本日は関数について 関数の生成方法 プログラミングでは関数は以下のような構図になっている。 ヘッダー(データ型、関数名、パラメーター) 本体(処理内容) ステートメント 命令や宣言内の実行されるコードのまとまりのこと return 〇〇; や let squaredX = x…

演算子、変数

演算子の優先順位と結合性 演算子の優先順位 一連のルールに従ってどの演算子を実行するかを決定すること ()が一番優先順位高い 演算子の結合性 二つの演算子が同じ優先順位をもっている 時にどの演算子を優先的に実行するか決定すること。 リテラル ソース…

プリミティブ値

プリミティブ型 以下のような基本的なデータ型のこと boolean型 int型 str型 shar型 undefined https://developer.mozilla.org/ja/docs/Glossary/Primitive プログラミング言語によって扱うデータ型が違う 数値に使われるデータ型において、 C#は以下のデー…

コンピューターサイエンスの学習について

フロントエンドエンジニアとしてスキルアップするべく コンピューターサイエンスの勉強を始めようと思います。 きっかけ きっかけは、csの学習方法で検索したときに recruision という学習支援サービス (progateのcs版??)を見つけて試しに少しだけやってみ…

【amp】スクリプトタグに無効な JSON が含まれており、パースできません。

サーチコンソールに出たampのエラーを解決したのでログとして残しておきます。 今回は 「スクリプトタグに無効な JSON が含まれており、パースできません。」 について。 原因 構造化データの作成に用いるJSON+LDの部分でこけていました。 <script type="application/ld+json"> { "@context": "h…

【amp】AMP HTML タグの属性で指定されたレイアウトが無効です。

記事内の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>

【javascript】webworkerについて

こんにちは! ampなどに使われるwebworkerについて気になったのでまとめてみました。 webworkerとは javascriptをマルチスレッドで処理を行えるようにした、web api の一つです。 メインスレッドを止めることなくjavascriptを利用できるようになります。 オ…

【amp】amp研究日記④ 〜schema.orgで構造化データを記述〜

今回は実際に構造化データを作成していきます。 構造化データとは okinawanpizza.hatenablog.com schema.org ・構造化データにおいて使用されるボキャブラリーの一つ。 ・グーグル、マイクロソフト、ヤフー、ヤンデックスが手を組んだ。 ・既存の情報をより…

【amp】amp研究日記③ 〜構造化データとは〜

amp化も残りは記事内の置換の部分と構造化データに関する部分となってきました。 ampのテストを行っていると、どうやら構造化データの追加も任意ではあるが必要になってくるとのことでした。 こちら構造化が完了した際の画像 いろいろ調べたことを追記します…

【amp】amp研究日記② 〜wordpressコーディングの全体の流れ〜

amp対応日記二日目 今日はamp用のテンプレートを実際に作成していきます。 前回の記事はこちらです。 okinawanpizza.hatenablog.com 今回も独断と偏見がすごいです。(笑) ampページのurlを作成 今回、テンプレートを切り分ける方法として記事のurlに「amp=1…

【amp】amp研究日記① 〜AMPとは〜

今日から仕事での開発の話もブログにしていこうと思います。 今回三つのAMP対応を任せてもらえることになりました! かくいう私は一回もamp対応したことがなく、、 せっかくなので、ログを残していこうと思います。 AMP日記二日目 okinawanpizza.hatenablog.…

【css】テキストの高さ中央揃え

テキストの高さ中央揃え テキストの高さがそれぞれ違う場合はflexboxを使えばOK align-itemsで高さを中央に揃えることが可能です。意外と便利! html <div class="demo">hello tamakipedia</div> css .demo { display: -webkit-flex; display: flex; -webkit-align-items: center; al…

【wordpress】jsファイル jQueryファイルを読み込む方法

js ファイルや jQuery ファイルの読み込みはLInkタグではなく functions.php に記述します。 function load_scripts { //jQの場合 wp_deregister_script('jquery'); //WPが持つjQueryを利用しない wp_enqueue_script( 'jquery',//読み込むJSを識別する名前(…

【wordpress】コメント表示の際に出力されるHTMLを変更する

前回コメント欄の表示方法の出力方法について記事を更新しました。 okinawanpizza.hatenablog.com 今回はコメント欄に表示されるHTMLを変更していこうと思います。 というのも私自身、既存のテーマ「twentytwentyone」を上書きしなからテーマを作っていまし…

【wordpress】コメント欄のカスタマイズ方法

おはようございます! 今日はコメント欄のカスタマイズ方法についてご紹介していこうと思います。 コメント欄のカスタマイズに関してもう少し踏み込んでみました。 okinawanpizza.hatenablog.com comments.php でできること ・ページネーション「前のコメン…

【wordpress】コメント欄の基本的な作り方

ゴールデンウィークはいかがお過ごしでしたか? ひょんなことからブログの作成をお願いされたので 勉強がてら作成しました。 コメント関連は実装したことがなかったので、一度整理してみようと思います。 comments.php を呼び出す デフォルトのテーマでも co…

【wordpress】ループでのスタムフィールドを使った並び替え

最近wordpressを書く機会が多くなってきました。 今回はループを使った処理について。 カスタムフィールどを使った並び替え meta_keyとmeta_valueを利用します。 $args = array( 'orderby' => 'meta_value' 'post_type' => array('post_type'), //投稿タイプ…

カノニカルタグとは

ampのドキュメントを読んでいた際に カノニカルというワードが出てきてチンプンカンプンでした。 その周辺知識をおさらいしようと思います。 カノニカルタグ 検索エンジンが重複しているページだと認識しないように正規化するためのタグのこと。 重複コンテ…

【jQuary】フォーム作成で学んだメソッドや記法について

先週フロントでのバリデーションを作り直しました。 その時に使ったメソッドなどをメモしていきます。 フォームの内容についてはこっち↓ フロント側でフォームのバリデーションを追加したのでその忘備録 - Qiita フォーム関連で役立つjQuery 誰の役に立つの…

【ターミナル】 コマンドの過去検索

あけましておめでとうございます。 今年も一年張り切っていきたいと思います!! ctr + r ターミナルで過去のコマンド履歴を調べたい時は ctr + r が使えます。 実行すると、 ❯ bck-i-search: _ このような形になり、単語を入力すると過去履歴の一番直近のコマ…

【javascript】FileReaderを使って画像をプレビューする

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++) {…

【javascript】JavaScriptでFileReaderを使った画像プレビュー

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、一記事あたり…

【javascript】論理否定を代入することでture → false → true → false 繰り返す

これはすごい小ネタになるのですが ボタンでオンオフを切り替えたい時、皆さんどの様にされていますでしょうか。 論理否定である!を使えば a = !a だけで ture → false → ture を繰り返すことが可能です。 <div onclick="init()"> スイッチ </div> <script> flag = "true"; function init(){ fla</script>…

【canvas】ctx.arc()を使って円を描画する

こんにちは。 今日は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…