ナム山

家最高 今年一年でサックスが吹けるようになるか観測中

npm入門 - 記事を読むvol.2(2/100)

習慣化の壁 今年は勉強を頑張りたいと思って書いた記事からしっかり1ヶ月が経ってしまい、早速怠惰を実感している。 この記事は「今年は有用な記事を100本は読んでまとめてみよう」という一連のシリーズにあたる。 習慣ほど強いものはないし、ただの決意ほど…

「PATHを通す」って何かまとめる - 記事を読むvol.1(1/100)

新しいことを始める 2021年はしっかりと怠惰な1年を過ごしてしまい、たったの3記事しか書いていなかった。 記事のエディタが変わったのに今気付いたくらいだ。記事数の推移を見るとお見事すぎる尻すぼみである。 ▶ 2021 (3) ▶ 2020 (4) ▶ 2019 (20) ▶ 2018 (…

bxsliderで3個表示のリストを作る、スライドの数に応じてオプションを変える

bxsliderで全幅じゃないスライドを作るときのメモ。 いつも忘れてしまうので備忘録。 slideWidth、minSlides、maxSlides、moveSlidesが揃わないとちゃんと動かない。こちら参考にさせてもらいました。 bxSliderの使い方と「オプション」によるカスタマイズあ…

Worpdress・PHPで文字抽出する(記事詳細の文字列の丸め)

PHPで文字数省略(文字列の丸め)したい時に使うmb_sbstr mb_substr( string $string, int $start, ?int $length = null, ?string $encoding = null ): string 抜き出すのにWordpressの関数を使わずいつも >|php|echo mb_sbstr($test, 0 10, 'UTF-8');|| と…

Nodeのバージョンを変更したいがインストール可能な一覧にない(nodenv)

普段は $ nodenv install --listでお目当てのバージョンがあれば $ nodenv install {versionNum}でいける。今回はなかったので調べたところ、node-buildをアップデートすれば良いとわかった。 しかしhomebrewを入れていないので、参照したコードだとエラーが…

(GULP) browser-syncでUnhandled 'error' eventが出る

同じく古い環境のGULPをinstallしなおして起動した時に起きたエラーについて。 The following tasks did not complete: default, watch Did you forget to signal async completion? と出てうまく起動しない。GULPが3系から4系になったせいで、記述が悪さを…

GULPでSyntaxErrorが出て立ち上がらなかった

久しぶりに古い開発環境で修正作業があった。 npm installした後にnpx gulpコマンドで立ち上げようとするとgulp-autoprefixerでエラーが出て中断してしまった。 (async () => { ^ SyntaxError: Unexpected token ( つまり' ( 'てなんぞや、とのエラー。 原因…

テンプレートのテキストを一部差し替えて使いまわす - ページ遷移のポップアップテキストを作成する

先日、外部リンクをクリックした際ポップアップにテキストを表示する、という案件を対応した。 遷移先は別ドメインである旨を表示して、遷移する or 留まるリンクをクリックさせるというものだ。 免責事項の表示や、離脱防止などによく使われている。 すでに…

経過観測6〜2019年を振り返って〜

振り返りと変化 2020年になった。今年もよろしくお願いします。成長記録として始めたブログなので目標の振り返りを。 今回は2019年の総振り返り。 昨年の目標はこういったものだった。 英語 - 簡単な日常会話ができるようになる + 観たい映画を字幕なしで鑑…

HTMLとCSSでボックスが重なった表現をする

先日変わったデザインのテキストボックスを作る機会があったのでメモ。 概要 ・背景が透過したボックスがふたつ重なった形状 ・文章量は可変 デモコード HTML <div class="c-boxs"> <div class="c-boxs__item">テキストテキスト</div> <div class="c-boxs__item">テキストテキスト</div> <div class="c-boxs__item">テキストテキスト</div> </div> CSS body{ background: #92CAB8; } .c-bo…

.detach()メソッドについて

先日ライブラリのjsファイルを覗いていた際に見慣れないメソッドを見つけたので調べてみた。 機能 .remove()と似ているが、削除したDOM要素を保持することができる。 js.studio-kingdom.com「detachの場合は関連付けられているjQueryの情報を削除後も保持し…

bxsliderでリンクが効かない - 失敗1 -

うまくいった記事はあるけど調査中に失敗したことや、間違った対処法を書いた記事ってあまり見ないなと最近思い、デバッグの最中に陥った問題も書くことにしようと思った。 堂々巡りしている人の助けになれば幸い。 概要 スライダーとモーダルを組み合わせた…

hoverした時に説明文が出てくるタイルパターンをCSSのみで実装する

よくあるタイル型レイアウトで、hoverした時に説明文が出てくるCSSとHTML。 コーポレートサイトのトップページなどでよく見る。 ■HTML <div class="container"> <div class="items"> 1 <span class="items__info">説明文</span> </div> <div class="items"> 2 <span class="items__info">説明文</span> </div> <div class="items"> 3 <span class="items__info">説明文</span> </div> </div>

グリッドレイアウトの基礎 - display: grid; 触ってみた -

グリッドレイアウトのLP案件を担当したのでこれを機に手を出してみた。 グリッドレイアウトの基本 大まかな流れ 親にdisplay: grid;を設定 親に縦横の比率、grid間のスペースを設定する 子要素で、最小単位より大きくしたいときは追加で設定する 具体的な設…

firefoxで動画が再生されない - 変数の巻き上げと処理順序 -

症状 Firefoxでのみ、JavaScriptからprependしているvideoタグが自動再生されない。 原因 videoタグ自体の不具合でなく、自動再生の関数内で変数がundefinedになる。 自動再生処理がload終了後にちゃんと走っていなかった。 処理順序は以下 ready内でvideoタ…

経過観測5〜マイナーチェンジ〜

振り返りと変化 このブログは自分用のメモと成長記録が主目的なので、定期的に目標の振り返りをしている。 2019年の目標はこちら。 英語 - 簡単な日常会話ができるようになる + 観たい映画を字幕なしで鑑賞できるようになる プログラミング - jQueryを極める…

PHPの配列に値を追加する(resister_post_typeのオプションをフックしてまとめて追加する)

前回、Wordpressでresister_post_typeを設定する内容を扱った。 カスタム投稿の一覧表示を作る - ナム山この方法ならば、追加したい固定ページの登録内容がずらっと並ぶわけだが、似たようなオプションを書き連ねるのがスマートでないと感じた場合はオプショ…

カスタム投稿の一覧表示を作る

Wordpressでカスタム投稿をよく利用するが、久しぶりに触った時にアーカイブ作成するのに手間取ったので備忘録。いい機会なのでリファレンスを再確認した。 具体的にはアーカイブを有効にして、アイキャッチを投稿できるようにしたい。参考:https://wpdocs.…

git cherry-pickを使う

背景 先日、運用更新が行われているサイトのスポット作業中、ブランチで一括置換したファイルが更新案件と大量に被ってしまった。 ステージングサーバーは一つなので、全ての作業を取り込んだ状態でクライアントに確認してもらいたい。 ちょうど良い機会だっ…

JavaScriptのオブジェクトをimportして表示する

アプリケーションで生成された画像を、別ページでギャラリーのように表示するシステムの組み込みをした。 以前REST APIで生成されるJSONを取得するコードを書いたのでたかをくくっていたが、いざ組み込もうとしたらES6で表記されていて困ったのでメモ。 REST…

プログラミングを勉強していてよかったこと1

自分は器用じゃない。 物事を保留して先に進めないので、100個問題があったら1から解いていく。 複雑な原因で物事が進行しないときは手が止まってしまう。 他にも効率からは程遠い行動を選びがちで、よく言えば欲求に素直だが、悪く言えば目移りしがちな人間…

経過観測4〜ブラッシュアップ〜

振り返りと変化 自分の非力さと決別したいと思い、成長記録のためにブログを始めて1年ほど経った。 年始に立てた目標は以下。 英語 - 簡単な日常会話ができるようになる + 観たい映画を字幕なしで鑑賞できるようになる プログラミング - jQueryを極める + 他…

良記事やサイトの備忘録

log

集合知最高! みなさんのおかげで便利に生きていけています。 時々増える予定。 ただのリンク集だとつまらないので動機やその時の思考とかも併記する。2019/9/11 あまり関係ないがちょうど海外製品の直販について調べていた。よく知らない国へ旅行する前や海…

オブジェクトの取得方法

前回REST APIを使い、Wordpressの投稿内容をJSONPで取得する方法について書いた。 オブジェクトで値にアクセスする際、無意識に記述を使い分けていたが、 今回も初めに手こずったので改めてメモすることにした。 オブジェクトのプロパティ取得方法 そもそも…

REST APIでWordpressの更新情報を別ドメインから取得する(JSONPを使用)

REST APIについては見聞きしていたが初めて触るので、とりあえず最新10件取得でもしてみるかと書いてみる。 _embedオプションでサムネ画像も含んだjsonを返してくれる。 参考:https://webtatan.com/blog/wordpress/wp-rest-api-v2-json 最初のコード $(funct…

経過観測3 〜学習がはかどる仕組み〜

守れない締め切りと守れる締め切りの違い 人生で何度も「まあいいか」を発動してきた俺は自分の予定遂行能力を全く信用していない。 バッファ取りまくり、余裕持ちまくり。 なのに結局デッドラインギリギリ。 手をつけるのも手を動かすのも遅いくせにやり始…

経過観測2 〜壁1:習慣化の可不可〜

何をやっているか 口だけの人間を脱出したいので、経過観測しながら今年一年いろんなことを頑張ろうと決意した。(小学生)前回短期でPDCAを回せそうなプランを立ててみた。 ざっくり説明すると 10日毎で簡単な目標設定をする かつ簡単な基礎学習を毎日できる…

経過観測1

log

2018年の8月からブログを始めて5ヶ月、当初スライムを自認していたけどスライムベスくらいにはなったかもしれない。 抽象的なので具体的に成果を並べる。 Wordpressの案件は4件こなした CMSがわかる→ループ処理と関数のこと勉強し直した ベス…? わかったこ…

Wordpressでインポートするデータをいじったらどうなるのか

Wordpressの引越しやリニューアルなどで投稿のカテゴリを一気に見直す機会があった。 その際にエクスポートやインポートでDBの挙動がどういったものになるのか不安だったので実験したメモ。やることは至ってシンプル。 実験用に同じテーマを読み込んだダミー…

Wordpressを移行した時のメモ

構築はある程度できるようになったので、次にパーマリンクを自由自在にできるように勉強することにした。 自前のサーバーなので、DBぶっ壊し放題だしいざとなったらマダンテかませばよいので気楽に実験する。 そこでまずは試しに作ったWordpressのサイトを、…