サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
アメリカ大統領選
www.terakoya.work
クロスドメイントラッキングをGoogleAnalytics4（GA4）で設定したい 2020年10月にGoogleアナリティクス4（GA4）がリリースされたわけで、現在設定しているGoogleAnalytics（無印と呼ぶようにします）とは全然違うものになりました。ネットショップの案件を行うことが多いのですが外部のカートシステムを使用しているとカート以降のドメインが変わるケースが出てきます。そこでGA4におけるクロスドメイントラッキングの設定方法をメモ。 GA4の管理画面設定 データストリーム まずはGA4の管理画面を開いて、プロパティにあるデータストリームを選択します。 ウェブストリームの詳細画面 選択するとウェブの場合、ウェブストリームの詳細画面が表示されますので、一番下の「タグ付けの詳細設定」を選択します。 タグ付けの詳細設定 タグ付けの詳細設定の画面で「Configure your
PHP8にバージョンアップしたらエラーLaravelのバージョンは8.9.0でPHPを7→8にバージョンアップしたときに出たエラーの解消方法をメモ。 以下のようなエラーが出ました。 Error Unknown named parameter $kind 該当行は vendor/laravel/framework/src/Illuminate/Routing/Controller.php:54でController.phpのcallActionメソッドで発生している模様。 /** * Execute an action on the controller. * * @param string $method * @param array $parameters * @return \Symfony\Component\HttpFoundation\Response */ public fun
2つの日付の間が何ヶ月あるか求めたい 決められた過去の日付から現在の日付までの月の差分を計算して年月でリストをJavaScriptで動的に作成したかったので実装したときのメモ。 月の差分を計算する関数を作りました。 /** * Calculate the month difference of a period. * @param {Date} d1 - Difference start date. * @param {Date} d2 - Difference end date. * @return {number} diff - diff month. */ const diffMonth = (d1, d2) => { let d1Month, d2Month; d1Month = d1.getFullYear() * 12 + d1.getMonth(); d2Month = d2
トレイリングスラッシュ(Trailing Slash) ありに設定 URLの末尾のスラッシュのことをトレイリングスラッシュ（Trailing Slash）というそうで、これを統一したい。Googleさんが言うには、トレイリングスラッシュがあってもなくてもページの評価はかわらないそうで。 トレイリングスラッシュなし ‐ https://www.terakoya.work トレイリングスラッシュあり ‐ https://www.terakoya.work/ ただ、GoogleAnalyticsでは別々のURLとしてカウントされてしまうようで、これはよくないと思い統一することにしました。 スラッシュなしの時にリダイレクト RewriteCondで条件を追加します。ポイントは5行目で、末尾にスラッシュがなかった場合7行目のスラッシュ付きに301リダイレクトをするように設定。 # BEGIN Wor
ゼロパディング（ゼロ埋め）をJavaScriptで実装するには？ かなり今更感があるのですが、ちょっと目からウロコだったのでメモ。今まで、ゼロパディングといえば、以下のような処理方法で実装していました。例は、日付の前にゼロを埋める処理について。 jQuery(function($) { "use strict"; $(function() { let date = new Date(); /** * Zero Padding * * @param num Number * @param len Number */ function zeroPadding(num, len) { return (Array(len).join("0") + num).slice(-len); } $("#date").val(zeroPadding(date.getFullYear(), 4) + "-"
Windows10にMAMPをセットアップ Windows10にWordPressの環境をセットアップしたくて、MAMP（2019/1/1時点の最新version4.1）をインストールした際にMySQLのログにWarningが出ているのに気づいたので、そのエラーを解消する方法を調べたのでそのメモ。 MySQLのエラーログは、Windowsの場合、インストールしたフォルダの以下の場所で確認できます。（私はC:\MAMPにインストールしました） C:\MAMP\logs\mysql_error_log.err TIMESTAMPのWarningエラー確認 MySQLのエラーログファイルを開いてみると以下のようなエラーを出力していました。（横に長いので改行をいれています） [Warning] TIMESTAMP with implicit DEFAULT value is deprecated.
HTMLメール用のソースコード生成を自動化したい ECサイト制作をやっていると、販促用のメールマガジンを作ることがよくあります。HTMLメール自体はテンプレート化されていて、変更するのは商品情報だけ。その場合、毎回ソースコードを変更するのは大変だし、何よりHTMLがわからないと変更できないのもメンテナンス性悪いなと思ってスプレッドシートの値を変更するだけで、HTMLメールを生成して指定したディレクトリにドキュメントとして保存するようにしようと思ってまとめました。 スプレッドシートの準備 以下のようなデータを準備しました。 このデータをHTMLテンプレートに流し込む処理を書いていきます。 HTMLテンプレートの準備 「ツール」→「スクリプトエディタ」からスクリプトエディタを起動して、「ファイル」→「新規作成」からHTMLファイルを選択して名前をつけます。「index.html」とつけました。
Basic認証とは？ 今更ながらBasic認証についてまとめておきます。教える時に間違った情報を教えないように頭の整理もかねて。まずはBasic認証とは？以下Wikipedia引用。 Basic認証（ベーシックにんしょう、Basic Authentication）とは、HTTPで定義される認証方式の一つ。基本認証と呼ばれることも。 Basic認証では、ユーザ名とパスワードの組みをコロン “:” でつなぎ、Base64でエンコードして送信する。このため、盗聴や改竄が簡単であるという欠点を持つが、ほぼ全てのWebサーバおよびブラウザで対応しているため、広く使われている。 公開前のWebサイトを閲覧できないようにBasic認証をかけることがよくあります。また特定のファイルやディレクトリに対してもBasic認証をかけることもあったりとするので、忘れないようにメモしておきます。 .htpasswdフ
ビンゴゲームデモページ まずは何はともあれ完成品を見てみましょう。ルーレットを回す際に音が出ますのでご注意を。 >> JavaScriptでビンゴゲーム ソースコードは、記事最後にGitHubのURLが貼っていますのでそちらを参照してください。それでは解説。 ビンゴゲームの数字をランダムに表示するプログラム プログラム教室のJavaScriptの授業で、何か課題を出したいなと思い、せっかくプログラムを習っているので実用的なものをと考えイベントなどで使えるようにビンゴゲームを作成することにしました。jQueryを使ってなるべくシンプルに作成しようと思います。まずは完成イメージは以下のような感じで。 スタートボタンを押すと、一番上のボックスに数字がドラムロールっぽく動作して、もう一度ボタン（ストップにテキスト変更）を押すとランダムな数字が選択されて、下に並んでいるその数字の背景色と文字色が変わ
エディタの入力方法のデフォルト値を変更したい 投稿や固定ページの入力をする際に、エディタのデフォルトが「ビジュアル」になります。僕は基本的に「テキスト」で入力するのですが、うっかり「ビジュアル」をクリックすると、例えばspan要素が消えてしまったりします。これを回避したいので、初期値の設定方法をまとめました。 フィルターフック：wp_default_editor この機能を実現するのにwp_default_editorフィルターフックを使用します。functions.phpに以下の記述をします。 /** * Change editor default input. * * @param string $editor * @return string $editor */ function change_editor_default( $editor ) { $editor = 'html'
パンくずリストの表示を変えたい パンくずリストを表示するプラグインを使ってパンくずを表示しているときに、ふと404ページの表示を見て「あら？」っと思いました。 サイトのタイトルが404ページのタイトルの後ろにハイフンつなぎで表示されている！ まぁ、当たり前といえば当たり前なのですが、このパンくずリストのプラグインは、例えば投稿ページだったらページのタイトルでなく投稿のタイトルが設定されます。404ページは、 wp_get_document_title関数で取得した値を表示しているので、ページのタイトルをそのまま設定しています。このサイトのタイトルを除外したい。 document_title_partsフィルターフック wp_get_document_title関数の中身を見てみました。wp-includesフォルダ内にあるgeneral-template.phpで定義されており、タイトルに
Laravel5.6系で試しましたまずはLaravelのバージョンの確認。 $ php artisan -V Laravel Framework 5.6.29 ユーザー認証機能の作成 まっさらなLaravelプロジェクトを作って実装してみます。まずはユーザー認証機能を作成します。 $ php artisan make:auth Authentication scaffolding generated successfully. コマンドが成功するとファイルが追加されたり追記されたりします。 ルート情報への追記 /routes/web.phpファイルに以下のコードが追加されました。 Auth::routes(); これは、ログインやログアウトなどのユーザー認証関連のルート情報をまとめたもののようです。/vendor/laravel/framework/src/Illuminate/Routi
フォルダを階層化して一気に作成したい プロジェクトごとにドキュメントの管理をする上で、フォルダごとに設計資料や営業関係の資料、マニュアルなどなどフォルダ分けてして管理すると思います。これをプロジェクトが発足するたびに作るの面倒なだなーと思ってスクリプトでのやり方を調査。 Google Apps Scriptの Drive Service Google Apps ScriptのリファレンスにDrive ServiceというClassがあったのでこれを使います。 ルートディレクトリにフォルダの作成 早速、フォルダの作成をしてみます。以下のような階層のフォルダ構成を作成してみます。 テストプロジェクト ┣営業関係 ┣設計関係 ┗運用関係 ┣運用マニュアル ┗顧客情報 単純に自分のルートディレクトリにフォルダの作成をするには以下のように記述します。 var folder = DriveApp.cr
video要素でmp4ファイルを再生 動画配信のコンテンツを作成していて、Youtubeなどの動画配信コンテンツでアップロードしたものを埋め込むのではなく、video要素を用いて動画再生をしようと思い。Youtubeのロゴとかが出るのが嫌だなーと思ったので、AmazonS3に動画ファイルを置いて、そのファイルをストリーミング配信する方法をとりました。 そこで、折角だからどれぐらい再生ボタンをクリックして見てくれるか計測しようと思って、Googleタグマネージャーで設定を入れることにしました。 まずは、HTMLソースコードに以下のようにコーディング。 <video id="movie" controls muted playsinline preload="auto" poster="/images/xxxx.png"> <source type="video/mp4" src="https
変数の中身をvar_dumpで出力できない とあるWordPressのプラグインを触っていて、どうしてもvar_dump関数で値を見れない状態に陥りました。フォームなんですけど、送信した時に画面遷移してしまうというのもあって、その前に$_POSTや$_FILESの情報を見かったから調べてみたらあった。 出力バッファを保存 PHPには、出力制御関数というのがあって、それを使ってファイルへの保存が実現できそう。 以下のようなコードを書きました。 ob_start(); var_dump( '保存したい内容' ); $dump = ob_get_contents(); ob_end_clean(); file_put_contents( ABSPATH . 'wp-content/uploads/logfile.txt', $dump );ob_start関数で、出力のバッファリングを有効にしま
タグマネージャーでソースコードをスクレイピングしたい タグマネージャーでECサイトのコンバージョンタグの設定をしていると、購入完了画面で取得したい情報があります。自社管理のサイトなら自分でカスタマイズしてその情報を出力すればよいのですが、他社のECパッケージだったり、別の会社さんが構築している場合だと、カスタマイズの依頼をするなり、JavaScriptの変数に入っているのであればそれを再利用したりと考えなければいけません。 それすらできない場合どうしようというのが、今回の問題。Webサイトのソースコード上には情報が出ているのに、変数にも入っていないしタグで囲まれているけど余計な情報も含まれているし……となった時に正規表現でその余計な部分を排除して必要な情報を取得すれば！と思ったのでやってみる。 GoogleAnalyticsのeコマースタグをスクレイピング GoogleAnalyticsの
ログイン画面のカスタマイズ 企業のWebサイトなんかをWordPressで制作することはよくあるのですが、管理画面（特にログイン画面）でWordPressで作りましたよ感が出まくっています。見る人が見ればどういうシステムで構築されているかなんて一目瞭然なのですが、実際に運営する人達に少しでも「自分達のWebサイトだ！」と愛着を持ってもらうためにログイン画面のアイコンやコーポレートカラーを使ってあげたい。 ということでログイン画面のスタイルカスタマイズあれこれをメモしておきます。とりあえず以下の箇所を変更したい。 ロゴ画像を変更したいロゴ画像のリンク先を変更したいロゴ画像のa要素に設定しているtitle属性を変更したいログインボタンの色（スタイル）を変更したいトップページに戻るリンクテキストを削除（非表示）にしたい この5点を変更したいと思います。 1.ロゴ画像の変更方法 実はWordPre
線を引くようなアニメーション よくグローバルメニューなどにマウスオーバーするとその要素に下線がアニメーション表示されるのを見かけます。ちょっとしたアニメーションがあるだけで、気持ちおしゃれに見えるから不思議。ということで、HTMLとCSSでの下線アニメーションをまとめておきます。 HTMLの以下のコードを使用して、CSSの設定を行います。 <ul> <li><a href="">MENU01</a></li> <li><a href="">MENU02</a></li> <li><a href="">MENU03</a></li> <li><a href="">MENU04</a></li> <li><a href="">MENU05</a></li> </ul> 下線が左から右に引かれるアニメーション 左から右へのアニメーションは以下のように設定します。 ul { display: fl
ハンバーガーメニューの反応が悪い iPhoneユーザーから「ハンバーガーメニューの反応が悪い」と言われ、ちょっと調査した内容をメモ。最初にjQueryで以下のように設定していました。 $("#button").on("click", function(){ // clickイベントの処理 }); #buttonはimg要素で、クリックイベントを実装しています。パソコンのブラウザでは特に問題なかったのですが、発売されたばかりのiPhoneXのSafariで動作確認したらやたら反応が悪い。しかもクリックできないわけでもなく、タップしまくったら反応したりと1か0でない感じがプログラマー泣かせだなと思います。Androidは大丈夫。 修正方法 とりあえず試してみたのは以下の方法。 その1：cursorプロパティのpointer値設定 まず試したのが、CSSでその要素のcursor設定にpointe
フォームのレイアウトにdl要素を使うかtable要素を使うか問題 以下のようフォームがあるとします。 これはtable要素でレイアウトしています。HTMLとCSSは以下の通り。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" href="sample.css"> </head> <body> <table> <tr> <th>お名前</th> <td><input type="text"></td> </tr> <tr> <th>電話番号</th> <td><input type="tel"
コンテンツの高さが可変の要素を高さを揃えて並べる ECサイトのコーディングをやっているとよく商品の写真のサイズがバラバラで要素の高さが変わってしまうことがあります。これを揃えるのに、display: flex;を使うのはよく聞きます。ちょっとサンプルを下に。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="sample.css"> </head> <body> <ul> <li> <div>上のコンテンツ上のコンテンツ上のコンテンツ上のコンテンツ</div> <div>下のコンテンツ</div> </li> <li> <div>上のコンテンツ上のコンテンツ</div> <div>下のコンテンツ</div> </li> <li> <div>上のコンテンツ上の
レスポンシブサイトのコーディング時のbr要素 ちょっと目からウロコだったのでメモ。 あがってきたデザインがパソコン用のサイトの方は改行があるのに、スマフォ用は改行がない。うーん、改行するまとまり箇所をspan要素で囲って、CSSでblock要素化するかなーとも考えたんですけど、美しくない。 そこで、ハッとなった。スマフォのサイズになった時にbr要素を無効にすれば良いんだと。そしたらできた。 @media screen and (max-width: 1000px) { br { display: none; } } なんとたったこれだけ。media screenで○○px以下は無効にしてしまいます。特定の箇所だけであれば、その箇所をclass属性でもつけて無効にしてしまえば良い。逆にパソコンサイズの方を改行させないのであれば、パソコン用サイトに改行がなくて、スマフォ用サイトに改行がある場合
アニメーションに必要なメソッドの追加 前回、前々回の続き。最後にアニメーションを追加します。path要素に設定を行います。 // Path Setting pieElement.append("path") .style("fill", function(d, i) { return colorSet(i); }) .transition() .duration(settings.duration) .delay(function(d, i){ return settings.delay * i; }) .attr("d", arc); transitionメソッド 6行目のpath要素の属性値（attr）の設定後に動作させます。要はtransitionメソッドを境に、transitionメソッドの前の設定値が初期値で、その後に設定した値がアニメーションの最終値ということになります。まずは
HTMLを準備 D3.jsを使用して円グラフを作成します（v4：バージョン4）。jQueryでプラグイン化することを前提に作成したいので、jQueryもCDNで読み込みます。まずは基本のHTMLコードを以下のように書きます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Pie Chart</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://d3js.org/d3.v4.min.js"></script> <script src="d3.pie-chart.js"></script> </head> <body> <
配列キー値の存在チェック 配列・連想配列のキーが存在するかのチェック方法のまとめ。 通常配列のキー存在チェック チェック方法は、単純にif文に直接条件として設定すればよいです。 var foo = []; foo.push("bar"); foo.push("baz"); if (foo[0]) { console.log(foo[0]); } 連想配列のキー存在チェック 連想配列もチェック方法は同じで、if文に直接条件設定。 var foo = []; foo["bar"] = "barbar"; foo["baz"] = "bazbaz"; if (foo["bar"]) { console.log(foo["bar"]); } ドット記法であっても同じ。 var foo = []; foo["bar"] = "barbar"; foo["baz"] = "bazbaz"; if (f
gtag トラッキングコード いつの間にかGoogleAnalyticsのトラッキングコードにgtagが設定できるようになっていました。（2017/10/05確認） <!-- Global Site Tag (gtag) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxxx-x"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-xxxxxxxx-x'); </script> しかし、まだタグマネージャー
head要素内に自動で出力される情報を削除したい WordPressでテーマを作成するとhead要素内に自動で出力される情報があります。もちろん必要な情報もありますが、場合によっては出力されなくても良い情報もあります。これらはテーマ関数ファイルのfunctions.phpに削除処理を記述することで、出力しないようにできるのでそれをまとめておきます。 meta name="generator"の削除 meta情報のname属性の値「generator」は、文書の作成に使用したソフトウェアが何かということと、そのバージョンをcontent属性に設定しています。これって今だに何の役に立つのか不明で単なる宣伝か制作者側のバージョン管理？などと思っているのですが、要するに必要ないと思っているので削除。 <meta name="generator" content="WordPress 4.8.2"
現在表示中の固定ページの子ページを取得したい サイト構築をしていて、固定ページの中にその固定ページの子ページの一覧を表示したく調べてみた。WordPressには、get_childrenという関数が準備されているので、これを使用して一覧が出力できそう。さっそく固定ページ内に次のように記述。 if ( have_posts() ) : while ( have_posts() ) : the_post(); $args = array( 'post_parent' => get_the_ID(), 'post_status' => 'publish', 'post_type' => 'page' ); $children_array = get_children( $args ); if ( count( $children_array ) > 0 ) { echo '<ul>'; fore
APIをGETでコールして配列を取得したい ちょっとしたプロジェクトで、他社サービスのAPIを利用する必要があったのでメモ。PHPからAPIをGETでコールして戻ってくるJSONデータ（文字列）をPHP用に配列にパースして戻す処理を書きたかったので書いた。 /** * GET Request send. * * @param string $url * @param array $params * @return array|boolean $data */ public function getJson( $url, $params = array() ) { if ( count( $params ) > 0 ) { $query = '?' . http_build_query( $params ); } else { $query = ''; } $url .= $query; $
次のページ
このページを最初にブックマークしてみませんか？
『てらこや.work - WordPressのテーマやプラグイン開発・JavaScriptなどのナレッジブ...』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
