いつからか、Reactの公式ドキュメントからインストール方法としてcreate-react-appコマンドを使ってのインストール方法が消えていたので、何でかなぁと思っていた。
で、改めてドキュメントを見ていたら、下の方に「フレームワークなしでReactを使うことはできますか？」というFAQ的なコンテンツが追加されていて、この中で言及されていました。
曰く、既存ページにReactを追加するのはかまわないが（実際この方法はドキュメントにも記載がある）、新たにプロジェクトを作成する場合はNext.jsやRemixなどのフレームワークを使った方が良いとのこと。
今、ルーティングやデータ取得が必要ないとしても、将来的に必要になってくる可能性が高いので、それらを使った方が良いし、どうしてもそれが嫌ならViteやPercel等を使って、自分でビルド環境を構築した方が良いよ
とのこと。ということで、create-react-appの役割は終わっていたようでした。なるほどー。
All-in-One-WP-Migrationでバックアップを取得すると、拡張子が「.wpress」という独自の拡張子のファイルが生成されます。
同じWP-Migrationで復元するのなら、このままのファイル形式で良いのですが、この中から一部のファイルだけを取り出したいといった場合、これを展開する必要があります。
便利なツールが、npmに公開されていました。
使い方は、ターミナルで次のように「npx」を使って実行します。
npx wpress-extract migration.wpress初めて実行する場合は、インストールされて実行されます。展開されると、フォルダとして操作ができるようになります。これで、一部のファイルを取り出したりできるようになりました。
※ このエントリーは、安全性を自信で確認できたアプリの実行であることが前提です。マルウェアなどに感染する恐れがあるため、むやみに実行しないようにしましょう。
ターミナル用のアプリで、ダウンロードして実行しようとするとmacOSに「開発元を検証できないため開けません」と言われることがあります。
この時、macOS向けのGUIアプリの場合は「システム設定」から回避する場合や、Finderから実行するときに「強制的に実行」ができるのですが、ターミナルでのコマンド実行ではこれらの方法が使えません。
この場合、ターミナルコマンドであってもFinderからそのコマンドの実行ファイルを探し出し、右クリックして「開く」をクリックすると、一般的なアプリと同様に強制的に開くことができます。また、一度開くことを許可すると、ターミナルから実行することもできるようになりました。
マルウェアなどではないことが自身で確認できるコマンドにのみ、利用しましょう。
URLを生成する際、.htaccessの「RewriteRule」で正規表現などを使って、転送ルールを作ることがあります。
この時、正規表現が正しいかとかRewirteRuleの書き方が合っているかを、実際のサーバーでテストするのはなかなか骨が折れます。そんなときに便利なツールが「htaccess tester」です。
アクセスすると、次のような画面が表示されます。
ここに、テストしたいURLと.htaccessの内容を入力しましょう。「Test」ボタンをクリックすると、テスト結果が表示されます。
エラーがある場合は、その旨表示されます。
英語のサービスなので、苦手な方は翻訳などしながらご利用くださいませ。
筆者はずっとPHP（WordPress）の開発が主だったため、これまで開発環境としてJetbrain社のPhpStormを愛用してきました。
しかし最近、Astroで開発する機会も多くなってきて、PhpStormでJavaScriptの開発をするのは違う気がして、WebStormを別途購入した方が良いのかしら等と悩みつつ、Visual Studio Codeを利用していました。
が、やっぱりJetbrain製品を使いたく、そもそもPhpStormとWebStormは何が違うのだろうかと調べてみたら、次のように記載がありました。
PhpStorm = WebStorm + PHP + DB/SQL
https://www.jetbrains.com/ja-jp/phpstorm/
All the features in WebStorm are included into PhpStorm, with full-fledged support for PHP and Databases/SQL support added on top.
要は、PhpStormにはWebStormのすべての機能が含まれており、そこにPHPとDB、SQLの機能を加えたものがPhpStormであると。つまり、PhpStormを持っていれば、WebStormは不要なようです。
であれば、そもそもフル機能のInteliJ IDEAを持っていれば、RubyMimeやそのほかの専門ソフトは全部いらないのか？ と思ったら、その通りのようです。
IntelliJ IDEAはプラグインをインストールすることでPHP、Ruby、Python、Goの言語・フレームワークサポートが追加されます。
https://support.samuraism.com/jetbrains/ide/intellij-idea-capability
そうなのかー！ ということで、安心してPhpStormを使い続けることができます。ありがたし。
PrettierをVisual Studio Codeにインストールして利用すると、1行が長いときにやけに変なところで折り返されてしまいます。
なぜ、タグの閉じかっこだけ次の行に送られてしまうのか分かりませんが、こんな時はprettier.config.jsで設定をしましょう。
まずは、使っているプロジェクトのトップフォルダにprettier.config.jsという名前のファイルを作成します。Prettierの設定ファイルになります。
そしたら、次の内容を入力しましょう。
module.exports = {
printWidth: 1024,
};数字部分は好きな文字数に書き換えて良いでしょう。ここで設定した文字数までは、改行は強制的に入りません。
一度崩れてしまったものは、手作業で直さなければなりませんが、それ以降フォーマットをしても折り返されることがなくなりました。
Visual Studio for Macが開発を終了するというアナウンスが、Microsoftからありました。
このニュースで、一部の方から「Visual Studio Codeが使えなくなるの？」という声がありましたが、Visual StudioとVisual Studio Code（VSCode）は名前は似ていますが、全く別のソフトです。VSCodeは、今後も変わらず元気に提供されていくのでご安心ください。
Visual Studioは、MicrosoftがWindows向けに古くから開発している「統合IDE」と呼ばれる開発ソフトで、Windows用のアプリの開発や.NET開発と呼ばれる、Azure上で動作するWebのシステム開発などに利用されています。
Visual Studio Codeは、特にこのVisual Studioの機能を一部切り出したというわけでもなく、全く新規に開発されたクロスプラットフォーム開発エディターであり、単に名前を寄せただけの存在で全く関係がありません。
今後も、VSCodeの開発には一切影響を与えません。
先の、Microsoftのアナウンスを見ると、Visual Studio for Macの提供終了後は、VSCodeに、.NETの拡張機能をインストールして開発することをおすすめしています。
これを見ても、VSCodeの開発には影響がなさそうなことが分かります。安心しましょう。
Kinstaというホスティングサービスのブログサイトを見ていたら、記事の途中に次のような一文がありました。
「クリックでつぶやく」というリンクがあったので、何気なくクリックしたらTwitterの画面に移動して、今表示されていた文言がそのまま入っています。
これは面白い仕掛け。よくあるシェアボタンは、記事の前後にボタンとして配置されていて、クリックしても見出しがシェアされる程度。
しかしこの仕掛けなら、まるで記事内で役立ったことを自分でつぶやいたような文言でシェアができます。あざといかもしれませんが、面白い仕掛けではあります。
macOS Yosemite以降と、iOS 8以降には「Handoff」という機能が搭載されています。これを有効にすると、同じWi-Fi下で同じApple IDでログインしているAppleデバイス間でマウス・キーボードやクリップボードを共有することができるようになります。
例えば、Handoffが有効になっていると別のデバイスで起動したアプリが、Dockの右下部分に表示されます。これをクリックすると、自分のデバイスで同じアプリが起動するようになるので、作業の続きを切り替えたりすることができます。
また、各デバイスで文字列などをコピーすると、もう一方のデバイスに「ペースト中」などというボックスが表示され、クリップボードの内容が転送されます。
Mac同士、MacとiPad等のデバイスの場合、画面の端にカーソルを移動すると、そのまま別のMac/iPadに移動して、操作を続けることもできます。若干、遅延や誤作動もあるため、本格的な作業は難しいですが、ちょっとしたクリック操作などを一時的に行いたいときは便利です。
詳しい設定方法や使い方は、以下のドキュメントを参照。
Webサイトを開いたときに、タブの左側に表示されるアイコン。通常は、ドキュメントルートディレクトリに「favicon.ico」という形式のアイコン画像形式のファイルを設置すると表示されます。
しかしこれを、SVG画像で置き換えることができます。やり方は、HTMLの<head>タグ内に次のように書き込むだけ。
<link rel="icon" href="/favicon.svg" type="image/svg+xml">後は、ドキュメントルートにSVG画像を保存すれば完了です。便利。
preタグに、プログラムコードなどを記述すると折り返されずに、画面からはみ出てしまうことがあります。
といって、word-break: break-all;というCSSを使っても、やはり折り返されません。こんな時は、white-space: pre-wrap;を使います。
pre {
white-space: pre-wrap;
}これで、preタグでも折り返されるようになります。
WordPressで構築するWebサイトは、アドレスのルールを「パーマリンク設定」というところで決めることができます。
しかし、ここで定められるルールには制限があり、カテゴリページやカスタム投稿タイプのページなどは、決められたアドレスになってしまいます。
そこで、WordPressには「add_rewrite_rule」というファンクションがあり、これで自由にアドレスを定義できるようになっています。テーマのfunctions.phpに追記するか、独自のプラグインを作成しましょう。次のように記述します。
add_action( 'init', function() {
add_rewrite_rule('^leaf/([0-9]+)/?', 'index.php?page_id=$matches[1]', 'top');
});これで、leaf/(投稿ID)というアドレスで各投稿にアクセスできるようになります。書式は次の通りです。
add_rewrite_rule(マッチする正規表現, 実際のURL, topまたはbottom);1つめのパラメーターには、正規表現を利用できます。正規表現にマッチした値は、2つめのパラメーター内で$matches[]の記述でパラメーターとして利用できます。
3つめのパラメーターは、優先度でtopの場合は、他のルールよりも優先してマッチさせ、bottomの場合は一般のパーマリンク設定などが優先されます。
add_rewrite_ruleは記述して保存してもすぐには有効になりません。「リライトルールデータベース」の内容を更新しなければならないので、設定画面の「設定→パーマリンク設定」で「設定を保存」ボタンをクリックしましょう。これで有効になります。
フロントエンド開発でサイトを作ると、最後に困るのがお問い合わせフォーム。こればっかりは、サーバーサイドの処理が必要になるため、多くの場合はGoogle Formsなどのサービスを利用し、インラインフレームで「埋め込む」という形で対応しているかと思います。
とはいえ、やはり問い合わせフォームは独自のデザインでフォームを作りたい。そんなときに便利なのが「Formspree」です。
このサービス、アカウントを作成して「フォーム」を作成すると、専用のアドレスが発行されます。これを、自作フォームのaction属性にするだけ。
後は、フォーム内に必要な入力欄を準備して、送信するだけ。これだけであっという間にメールフォームができあがります。必要な作業は本当にこれだけで、Formspree側では項目などを作る必要すらありません。来た項目を全部受け入れているようです。
さらにすごいのは、届いたフォームはFormspree側でも保存されていて、一覧などで表示したり、エクスポートなども行えます。Slackなどへ通知を送信するのも可能。
開発自体は無料で行えますが、実際の運用をする場合は月額$8からの各プランへの契約が必要になります。
個人情報ががっつり保管されてしまうので、セキュリティ面は若干不安ですが、2段階認証なども設定できるので、ある程度リスクを許容できる個人サイトなどであれば、十分活用可能なサービスかなと思います。
動画編集ソフトのDavinci Resolveには、字幕を制作する機能が備わっています。
特に、18.5以降には自動字幕生成機能が搭載され、これが特に優秀で愛用しているのですが、現状のDavinci Resolve（18.5現在）では、書き出した字幕データの時間がちょっとズレるという問題が発生しています。
これでは使い物にならないため、ChatGPTのCode Interpreterで解決してみました。
ChatGPTの有料版に、新しい機能としてCode Interpreterが搭載されました。
インタープリターとは、通訳者といった意味の英語ですが、プログラミングの世界ではよく利用される言葉で、その場でプログラムを実行するしくみのことを指します。
私は、ChatGPTについては一時期課金をしていたのですが、その後課金を停止していました。が、ここで再び課金を開始しました。なぜ、このような経緯に至ったかについて、ChatGPTの期待と失望の合わせて紹介しましょう。
Code Interpreter以前から、メディアをはじめとして話題となっていたChatGPT。しかし、私自身は実はそこまで感動をしていませんでした。
というのは、ChatGPTは嘘ばっかりつくため。といっても、それは当たり前でChatGPTは発言が、事実かどうかの裏どりをしているわけではなく、受け取った言葉に対する返答として、それまでの学習の中から最も適したもの、それらしいものを繋いで返答をしているだけで、ありがちは返答はするものの、それが正しいかどうかは誰も保証できないというものでした。
壊滅的なのが、計算式に対する答えで、当然内部で計算をして返答をしているわけではないため、全く正しくない解答を返すということも度々でした。
もちろん私は、そういったこと自体に失望をして課金をやめたわけではなく、そのような信頼性の低い回答だと使い所がないなということで、Google検索などの方が早くて確実だったので、そちらを選んだという感じでした。
Code Interpreterが登場し、試しにもう一回課金をして使ってみました。すると、ChatGPTへの評価が180度代わり、一気に信頼性を増しました。というのは、Code Interpreterは背後でPythonのプログラムが動作できるようになったのですが、その返答の際に実際に生成して動作させたプログラムコードを提示してくれるのです。
例えば、計算式を与えた場合も、答えが返ってくるだけだと、どのような計算によってそれが得られたのかがわからず、正しいのかどうかは結局自分でも計算をしてみるしか方法がありませんでした。しかし、Code Interpreterの場合はどのようなソースコードが生成されたのかがわかるため、プログラムが多少読めるようであれば、そのソースコードにバグが含まれていないかをチェックすることができます。これによって、信頼性を自分自身で確認できるのです。
これは、プログラムを知っている人ほど、自分で作る手間がない上に、信頼できるかをチェックすることができ、非常に役立つツールに生まれ変わりました。
Code Interpreterでは、Pythonで作ることができるプログラムの内容であれば、大抵のものは動作させることができます。またいくつかのライブラリなども組み込まれているため、例えば画像を生成するとか、画像を加工するとか、Powerpointデータを生成するといったことも可能です。
実際、Twitterやメディアサイトでも、さまざまな事例が紹介されています。筆者も、CSVデータを渡して円グラフを作成してもらったり、言葉で説明して計算をしてもらったりなど、いくつかのパターンを試しましたが、いずれも正しい結果を得ることができました。
まだ、実用で使う場面はありませんが、これなら信頼して使うことができそうです。
さて、このようにAIがプログラムを動作させることができるようになると、いわゆる「プロンプトエンジニア」と呼ばれる、生成AIを操作するエンジニアにもプログラミング力が必要になってくるでしょう。Pythonのプログラムを読み解く力が必要なのはもちろん、どのような言葉を投げかければ、どのようなコードが生成されるのかを予測しながら、言葉を組み立てなければなりません。
これは本来、プログラマーに対して開発の指示を与えるSEとかの仕事でした。SEの相手が人間のプログラマーではなく、AIに変わっていくということを意味します。
ただし、難しいのが従来はSEはプログラマーを経て、プログラミングの知識を設計の知識などを身につけてなる職種でした。しかし、その前提となるプログラマーをAIが担ってしまうと、SEになるための基礎を学ぶ場がなくなってしまいます。
その中でプログラミングの力を身につけて、SE的な知識を身につけるというのはなかなか大変そうです。
キーボードにはテンキーがついたものと、ついていないものがありますが、おすすめはテンキーレスのコンパクトキーボード。私は今は、MX Mechanical Mini for Macを愛用しています。
なぜ、テンキーレスが良いのでしょう？
テンキーがあると、キーボードの右側が出っ張ります。ここに、マウスの端が当たって邪魔になります。
マウスの邪魔にならないように、左に寄せて使おうとすると、タッチタイピングの時に真ん中が体の正面にこなくなり、打ちにくかったり、肩こりの原因になります。
テンキーにある各キーは、テンキー以外の箇所でも賄うことができます。
デスクトップの時にテンキーに慣れてしまっていると、ノートPCの場合にほとんどの場合はテンキーがないので、困ります。
といった理由から、テンキーレスを選んでいます。
ただ、唯一テンキーを重宝する作業があります。それが、大量の数字を打ち込む経理作業の時。
キーボードの最上段にも数字キーはありますが、やはり数字はテンキーが圧倒的に速い。そこで、私は外付けのテンキーを利用しています。
このキーボードはBluetoothで繋いでいれば、不要な時は勝手にスリープしてくれ、なにかキーを打てば接続してくれる（その上、打ち込んだキーも入力されます）ので、使い始めだけ待ち時間がありますが、それからは快適に利用できます。
経理作業の時や、数字を大量に打ち込みたい時だけ、これを取り出して使っています。