Warning: You're using a string directly inside <Link>. This usage has been deprecated. Please add an <a> tag as child of <Link> の対応法
何度も起きていることだが、下書きフォルダに入れっぱなし案件。
定期的に下書きフォルダ見ていくと、大抵公開忘れのポストがいくつか新たに塩漬けになっている気がする。。
ただ、これは書き捨てて的な文章なので、公開していなかっただけかもしれない。
以下、個人的な備忘録。
Next.jsを使ってアプリを書いていたときに、 Warning: You're using a string directly inside <Link>. This usage has been deprecated. Please add an <a> tag as child of <Link> というwarningが出た。
読んで字の如しな、warningなので、下記のような修正を施すと消える。
<Link href="/foo"> {bar} </Link>
<Link> のなかに <a>も挿入してやる必要がある。
<Link href="/foo"> <a>{bar}</a> </Link>
以上。
Next.jsアプリをNetlifyにデプロイしたとき、想定したURLでアクセスができなくて対応したときのメモ(動的パスでの扱い)
入力されたパスに応じて、クライアント側でデータを読み込むような処理が書かれたNext.jsアプリをNetlifyにデプロイした際、 実際の挙動が開発時(ローカル)と本番(Netlify)で異なっていたのを対応したので、備忘録として残しておく。
ここで扱っている内容自体は下記のポストを見て解決できた。
また、起きている問題がどういうものか？ということについても、下記のポストに書かれている内容と同じため、もし似たような問題で困っている方がいたら、下記を参照することをおすすめする。
以下、備忘録。
下記のようなURLでアクセスしたい。
http://example.com/123456
そのためNext.jsプロジェクトのファイル配置は下記のようになる。
Pages/[id].tsx
だが、本番上で上記URLにアクセスすると404になる。
下記ではアクセスできる。
([id]という文字列を入力する)
http://example.com/[id]
上記のようになる原因としては、deployコマンド後、下記の内容でアウトプットされているためかと思われる
out/[id].html
Netlifyの _redirects に下記の１行を加えてリリースすることで、意図したアクセスが可能となった。
/:id /[id] 200
Gatsbyで作ったサイトをGoogle Search Consoleに登録する方法(Google Analyticsのタグを用いて認証させる)
Gatsbyでサイトを作った際、Google Search Consoleに登録をしようとしたら、所有権を証明できませんでした というエラーが出てしまった。
Google Analytics自体は既に gatsby-plugin-google-analytics を用いて設定済みの状態。
Gatsbyを用いている場合、うまくいかないのか...？と思い、少し調べてみたら、下記のような記事を見つけた。
どうやら、Google Search Consoleに登録させる場合はオプションを設定する必要があるようだ。
{ resolve: `gatsby-plugin-google-analytics`, options: { trackingId: `<Google Analytics用のトラッキングID>`, head: true // ← これを追加する } }
上の修正を加えて反映を行い、再度Google Search Consoleから登録を試してみると、今度は正常に登録できた。
CSSフレームワーク、BULMAのmodalサンプルコード
少し前にBULMAを触っていると、日記に書いた。
ちなみにこの日記に書いている８月引きこもり宣言については、問題なく達成できた。
まだセミは鳴いているので外に出ることはまだないが、蝉の声も小さくなってきたので、外に出れる日もそう遠くはないだろう。
さて、CSSフレームワークのBULMAだが、これがなかなか便利で、今でも機会を見てちょいちょい触っている。
ただ、ドキュメントがいささか簡素、というか、ドキュメントどおりに書いただけでは再現できない箇所がいくつかある。
Webの画面を作っている人なら特に問題ないレベルだが、まあ思考停止状態でコード書いているとき(コピペ脳状態)だと、サラッと実装したいときに一度立ち止まって実装について考える必要が出てくるのがすこし嫌だった。
数年前にcodepenにアカウントを作っていたと思い、ためしにBULMAのmodalのサンプルをこちらで書いてみた。
https://codepen.io/shinshin86/pen/gOrGwNmcodepen.io
あ、ちなみにBULMAを使う場合は、こちらのHTMLジェネレータを使うと、サクッと書き始められます(宣伝)。
必要なメタデータを入力して、コード生成欄をクリックすればクリップボードにHTMLにコピーされますので、よろしければ試してみてください。
今月GitHubに作成したpublicリポジトリを振り返る(2020年8月)
一月の成果として振り返ることで来月も頑張れる気がしたので、振り返ります。
確認については下記のシェルコマンドを叩きました。
curl https://api.github.com/users/shinshin86/repos?sort=created | jq -r '.[] | { full_name: .full_name, created_at: .created_at, url: .html_url}'
別に full_name じゃなくて name でもいいのだけど、まあ、あまりこだわりなく打ってしまいました。
それほど数も多くなかったので、上のコマンド打って created_at が今月のやつだけ抜粋しています。
あと、forkしているRepositoryは除外しています。
なお、このコマンドを今日(8/31)に打って、集計するという、再現性がまったくない方法で集計しておりますので、ご了承ください。
以下、新しい順から
あと、ここから文章を です。ます調 から変更します。なんとなく気分が変わったので。
3-random-colors-cli
Node.js製のCLIツール。
CLIツールを作るとき、文字に色を付けたい時がある。
で、その色を複数用意したいときに、どういう色の組み合わせでいこうか、いちいち考えなくて済むようにランダムな3種類の色を生成するツールを作った。
色自体はトライアド配色で出力するようにしている。
triad-colors-js
GitHub - shinshin86/triad-colors-js: Get 3 color code list of Triad color scheme palette.
TypeScriptで書いたライブラリ。
上に書いた 3-random-colors-cli 内でも利用している、トライアドの色相を実際に出力する部分の処理はこちらで書いている。
といっても、ライブラリがあったので、それを利用しているだけで別に難しい処理は書いていない。
CLIで書く場合、別の場面でも使えそうな処理は単体のライブラリとして出しておいたほうが今後役に立ちそうだなと思ったので、予め分けた。
go-discogs-random-music-album
GitHub - shinshin86/go-discogs-random-music-album
Discogs API経由でランダムなアルバム情報を取得するだけのGo製のCLIツール。
音楽をdigするツールとして作った。
そういえば作ったはいいが、使っていなかったので今使おう笑。
で、出てきたのが、これ。
※実行ログ
go-discogs-random-music-album # ↓結果 Fetch release url: https://api.discogs.com/releases/3095470 status: 200 OK Album Title: The Sea Artist Name: Melanie C Discogs ID: 3095470 Discogs Resource URL: https://api.discogs.com/releases/3095470
マジで全く知らないアーティストが出てきたが、おかげでまた知らない音楽を知ることが出来た。
これCLI製だと使える人が限られてしまうので、web版も作ろう。普通に便利ツールじゃないか(自画自賛)
Melanie C いい感じでした。
imgur-anonymous-web-uploader
GitHub - shinshin86/imgur-anonymous-web-uploader: Imgur anonymous web uploader
imgurに画像を匿名アップロードするためのwebツール。
そういえば作りかけのままだった。。タイミングが来たら、取り掛かろう。
metatag-gen
GitHub - shinshin86/metatag-gen: CLI tool of meta tag generator
Web作成に必要なmetaタグを生成するためのGo製のCLIツール。
Web開発で使うツールなのに、CLIで使わなくてもいいじゃん！というツッコミが入りそうだが、今月はGoを勉強していたということもあり、色々やってみたかったのだ。
HTMLタグを生成するためのツールは、Web上にも作っているので、手っ取り早く必要なHTMLタグを生成したいという方はこちらをご利用ください。
BULMAやBootstrapを始め、有名なCSSフレームワークにも対応している。
自分自身が頻繁に個人でもWeb開発を行っているので、そちらでの作業を効率化するために作成した。
機能要望とかあればツイッターまでご連絡ください。
add-setting-prettier-for-package-json
めっちゃ作りかけだった。。。
JSプロダクトを作るとき、いつもやるprettierの設定を簡単にしたいという自身の要望から生まれる予定のCLIツール。
dependabot-config-generator
GitHub - shinshin86/dependabot-config-generator: CLI tool for Dependabot config generate.
Dependabot に関する設定ファイルを簡単に作るためのNode.js製のCLIツール。
簡単に作れるぶん、細かな設定はできないが、個人的には これぐらいシンプルでいいんだよ〜 と言った感じ。
最近はもうこのツールを作ってDepenedabotに関する設定ファイルは生成している。
ちなみにこのDependabotの設定ファイルは色々と細く設定ができるのだが、そちらは adavanced オプションとして利用できるようにする予定。
だが、進捗はいまいち遅め。。。
html-selector-checker
GitHub - shinshin86/html-selector-checker: CLI tool of html selector checker implementation with Go.
スクレイピング時の調査用のGo製CLIツール。 スクレイピングしたいページのHTMLファイルをとりあえず落としてきて、ちょっと調査してみるか的なノリで使うためのツール。
yjn-topics
GitHub - shinshin86/yjn-topics: CLI tool of fetch Yahoo Japan News Topics.
Yahoo Japan NewsをCLI上で読むためのツール。
開発の合間にニュースの概要だけ読みたいってときに、割と使える。
こんな感じで使える。
振り返り
publicリポジトリだけでも意外と作っていたな、という気持ち。
自分は頭がバカなので、とりあえず手を動かさなければ、覚えられないタチ。
スマートとは真逆のタイプだが、自分の性格を悲観してもしょうがないので、とりあえずやる。
Goはずっと苦手意識があったけど、とりあえず書いていたら、少しは慣れてきた気がする。
ここには書いていないが、goroutineを使った処理にもチャレンジできたので、来月はもう少し幅を広げて頑張りたいところ。
(下に少し書いています)
あとはGitHubでスターをもらえるようにも頑張りたいところ。
自分が作ったものに対して、人からもイイネ！されたい欲求ありまくりです★★★
macOSをCatalinaにしたらZsh環境が壊れたので対応した備忘録 (zsh:1: url-quote-magic: function definition file not found)
ケツイがみなぎったので、macをようやくCatalinaに上げたら、zsh環境がエラーになり、キー入力すらできなくなってしまった。ターミナルのメニューからGUIでコマンド打てることに気づいたので、bashで起動させて無事に問題解決できた。 pic.twitter.com/ZnvDvxIvWz
— Yuki Shindo (@shinshin86) August 29, 2020
macOSをCatalinaにした際の対応に関する備忘録。
といっても、色々調べていた割に、いざ解決方法が見つかると、大したことでもなかったので、まあブログに書くほどでもないかもしれないと感じるのだが、それでも書く。
まずCatalinaにあげてシェルを立ち上げたら下記のようなエラーが出て、キー入力すらできなくなってしまった。
(キーを入力すると、このエラーが発生して何も出来ない状態)
zsh:1: url-quote-magic: function definition file not found
上に貼ったツイッターのとおりにbashを立ち上げて問題解決を行った。
原因としては下記のissueで話されているような要因かと思われる。
(英語読み違えていたらすんません)
oh-my-zshを入れている場合、.zshrc 内にいろいろな記述が追加されていると思うが、この.zshrc内のfpathという変数に下記のような記述がある。
/Users/〇〇/.oh-my-zsh/functions
ここで参照しているはずのfunctions というディレクトリが実際には存在しておらず、これでエラーになっているようだった。
このzshの functions というディレクトリはmac環境であれば、だいたい以下のようなディレクトリにあると思う。
(インストールしているバージョンによってパスは異なると思うので、そこは適宜読み替えてください)
/usr/local/Cellar/zsh/5.5.1/share/zsh/functions
で、ここにあるfunctions というディレクトリを .oh-my-zsh 以下にコピーしたら、動いた。
これ以上原因を追うことはしなかったのでこれは憶測だが、アップデートした際に本来あるはずのディレクトリコピー処理などがうまく動かなかったりしたのだろうか？
ts-loader(webpack)を用いてのTypeScript開発の際、Node.js実行のためのshebangでTypeScriptのコンパイルエラーが起きたときの対応メモ
なんだかタイトルが長ったらしくなってしまった。
Node.js製のCLIツールを作っていた。 npmにてリリースして、globalインストールして使う予定だ。
そちらのツールに関する内容は本題ではないので、一旦そちらは脇にどけておく。
(たぶん、またどこかでそれについても書くと思う。ってか、このあと、話題に関係する形でコミット内容をしれっと貼らせていただきます。だけども、まだ開発段階です。)
そのようなツールを作る場合、Node.jsではファイルの先頭に shebang を記述して、実行環境のnodeを参照するようにする必要がある。
#! /usr/bin/env node
今回このような形式のNode.jsのCLIツールをTypeScriptで書いていた。
ビルド環境はwebpack。ts-loader を用いてビルドしている。
ところがこの shebang を書いた状態でビルドすると、下記のようなエラーになってしまった。
Module parse failed: Unexpected character '#' (1:0)
shebang が認識されていないようだ。
下記のStack overflowの回答を元に対応した。
解決方法
shebang-loader をインストールする。
npm install --save shebang-loader
webpack側に設定する。
なお shebang-loader 自体はコンパイル時に shebang を消しているだけで、コンパイル後のソースに持っていってくれたりはしない。
shebang-loader/index.js at master · JavascriptIsMagic/shebang-loader · GitHub
そのためwebpack側で直接 shebang をコンパイル後のソースにも追加するという、割と泥臭い対応を行う必要がある。
( shebang-loader 側では仕組み的にそこまで行うことは出来なそう？)
実際に書き換えたDiffが下記となる。
iff --git a/webpack.config.js b/webpack.config.js index 3cbcad0..7978c19 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,3 +1,4 @@ +const webpack = require('webpack'); const isProduction = process.env.NODE_ENV === "production"; module.exports = { @@ -8,7 +9,7 @@ module.exports = { rules: [ { test: /\.ts$/, - use: ["ts-loader"], + use: ["ts-loader", "shebang-loader"], exclude: /node_modules/ } ] @@ -18,5 +19,8 @@ module.exports = { }, output: { filename: "index.js" - } + }, + plugins: [ + new webpack.BannerPlugin({ banner: "#!/usr/bin/env node", raw: true }), +] };
これでビルドエラーがなくなり、コンパイル後のソースにも shebang が追加されたため、実行も問題なくできるようになった。
実際に対応した際のコミットはこちらになる。
(以前もこちらのブログに書いたかもしれないが、JUGEM XMLをMarkdownに変換するためのツールとなります。)
