はてなブックマーク

さてさて、この間Twitterをぼんやり眺めていると、どんぶラッコさんのツイートが目に入り、衝撃を受けることになりました。 それは・・・・・・ Moment.js はすでに非推奨です😭 という事実です。 実際 Moment.js 公式のアナウンス でもこのことが言及されていて、以下のように言っています。 （超要約） Moment.js は古い時代の JavaScript だから、新プロジェクトからは代替パッケージを使ったほうがいいかもね。 そして、その「代替パッケージ」として一番最初に登場するのが正式な後継パッケージ Luxon（「らくそん」と読むようです） でした。（2021.04.29 現在） そこで❗ 今回はこのLuxonで日時を操作するため「実例記事」を書いてみることにします。 ぜひ皆さんのお役に立てましたら嬉しいです😊✨ 「読み方が分からないパッケージは、 YouTubeでチ

さてさて、私の開発メインはPHP（Laravel）+ JavaScript（Vue.js）で、もしこれらに不向きな部分があればPythonを使うという形になっています。 実際この３つがあれば（私の）業務的に困ることはほぼないのですが、根っからのプログラム好きですので、「別のテクノロジーもかじっておきたい」欲があったりします。 そこで注目したのが、 Rust言語 です。 なぜ「Rust言語」かというと、ブラウザのJavaScriptを高速化することができる「WebAssembly」をつくることができるからなんですね。 ※ WebAssemblyについては、過去記事がありますのでぜひご覧ください。（前回はC言語を使いました） 📝 参考ページ： 入門！WebAssemblyを試してみた つまり、Rust言語はウェブ開発に関連させることもできるわけです。 そこで❗ 今回はRust言語でWebAs

さてさて、Vue 3がリリースされてから少し経ちましたが、これまで、私の場合、npmを使ってLaravel 8.xと連携をしてきませんでした。 というのも、「いちいちビルドすると開発のテンポが悪くなり、保守もしたくなくなるから」というのが一番の理由なんですが、実際はそれ以外にも連携できない理由がありました。 それが・・・・・・ Laravel Mix が Vue 3 に完全対応してなかった からです。 私はLaravelとVueの大ファンなので、バージョン3が出てすぐにnpmで連携させようとしましたが、なんと「.vue」ファイルをうまくコンパイルすることができないことが分かりました。 いろいろ調べた結果、Laravel Mixの作者が「それは、次期バージョン6で対応するよ👍」と書いていたので、現在まで待ちに待っていました。 そして、数日前ついにLaravel Mixが新バージョン6になっ

さてさて、私事ですが高速処理に向いているNode.jsのフレームワーク「Express」の開発をはじめてから少し時間が経ち、徐々に慣れてきた感じがしています（やはり高速レスポンスの噂はホントでした😊） そして、他の開発でもやっていた複雑な内容も少しずつ取り入れている最中なのですが、やはりと言うかサイト開発をすすめる上で、避けては通れない機能に遭遇しました。 それが・・・ 画像の操作 です。 PHPで言うと有名パッケージの「Intervention」があり、以前「完全網羅！Intervention Image（PHP）で画像を編集する全実例」でご紹介しましたが、実はNode.jsにも同じような画像編集パッケージがあったりします。 その名も「sharp」です。 ということで、今回はこの「sharp」の使い方を実例を使って紹介していきたいと思います。 ぜひ皆さんのお役に立てると嬉しいです😊✨

さてさて、前回記事では「自由研究」的な記事を公開させてもらったので、今回は通常通りの流れに戻してLaravelの話題をお届けします。 なお、今回の話題は数カ月ほど前に思いついたものですが、実は「ある間を騒がせた」ある決済系サービスのニュースが元になっていたので、皆さんに「ははーん、あのニュースの影響を受けたね😂」って思われたくなかったので、少しばかり寝かせてました（笑） で、その内容とはズバリ、 ２段階認証 です。 毎日ニュースがたくさん出てくるので、あまり覚えてない方も多いかもしれませんが、この機能を作っていなかったために、勝手に他人に自分のお金を使われてしまったという事件がありました。杜撰なシステムだったのは間違いないですが、やはりセキュリティって１つ間違うととんでもない結果を引き起こすということを再認識した出来事でした。 そこで！ 今回はLaravelでメールを使った２段階認証シス

さてさて、このブログを始めてから後２ヵ月ほどで早２年が過ぎようとしています。移転前のブログも含めると2013年から開始しているのでプログラムとピアノ以外は何も続かない私としてはロングランといっていいでしょう😊✨ ちなみに、ここまでブログが続いている理由のひとつとしてはやはり「手軽さ」が挙げられます。昔はいちいちHTMLタグを駆使してアップロードして〜なんて作業をやらざるを得ませんでしたが、今は記事だけならwordpressでちょちょいのちょいですOKです。 ただ、以前からこの手軽なwordpressにも不満がひとつだけありました。 それは・・・ プラグインやテーマのアップデートが面倒 というものです。 皆さんも見たことがあると思うのですが、プラグインやテーマをアップデートしたり新規インストールする場合には以下のようなダイアログが表示されてFTP情報を入力する必要があります。 しかも、私の

さてさて、前々回、意外と簡単！音を感知して録画する監視カメラをつくるでは、Pythonで大きな音を感知して録画するという機能をつくってみました。 ちなみになぜPythonで作ったかと言うと、記事の中でも書いたとおりJavaScriptで音量をチェックする方法が見つからなかったので仕方なく、、といった部分があったからでした。（もしご存知の方がいらっしゃったら、ぜひ教えてくださいm_ _m） そして、この件の調査で知ることになったのですが、なんと、 ブラウザだけで録音をし、さらにそれをファイルとしてダウンロードすることができる ようなので、今回はこの機能をご紹介したいと思います。 ぜひ皆さんのお役に立てると嬉しいです😊✨ 開発環境： Vue 2.6 前提として 今回の機能を実装するためには、マイクにアクセスする必要があります。そして、Google Chromeからマイクにアクセスするためには

さてさて、前回を除くと最近公開した記事がほぼLaravelの話題がばかりになっていることに気がつきました。Laravelの話題ってホントに尽きないですね😊✨ 常々思っているのですが、私の開発環境は現在ドップリLaravel化してしまい、正直なところネイティブなPHPコードの開発は過去１年間でたった一回だけ（しかも古いサイトの移転のお手伝い）だったので、たまにはPHP全般の話題も、といろいろ考えていました。 すると、まっさきに思い浮かんだのが日本語に関連する話題です。 というのもLaravelももちろん多言語にいろいろと対応はしていますが、さすがに単一国家だけで話されている日本語のみに対応するというのはあまりないはずだと考えたからです。 そして、そんな影響で今回お届けするのは、 PHPで「似ているデータ」を見つけ出す方法 です。 しかも、今回は誰でもシンプルに実行できるように難解な公式や機

さてさて、Vue 3が登場してから少し時間が経ちました。基本的には前回バージョンと同じ構成になっているので、移行はそれほど手間取ることはないと思います。 ※ ただし、Laravel + npmでVue 3を使おうとするとシングル・ファイル・コンポーネントがうまく処理できないので個人的にはガンガン使ってません💧これは、Laravel Mix 6で対応するとのことです。 そして、そんなVueで今回作ってみるのが、 入力候補から選択できる機能 です。 例えば、次のようなカンジですね。 というのも、「めんどうな入力をできるだけ省略したい」というのは誰でも要望が高いでしょうし、特に毎日の業務で使う場合は「またおんなじ入力かよ・・・」とうんざりするはずだからです。 そして、そんなときに思い出したのがHTML 5の<datalist></datalist>です。（これ、すっかり忘れてました😂） 入力

さてさて、先日レッスンをさせていただいている生徒さんから「重複するコードを共通化する」テクニックが勉強したいという貴重な意見をいただきました。 確かに、ドキュメントではコードの書き方自体は説明していますが、「より効率的な（スリムな）」書き方ととなると、それほど多くはない印象です。 かく言う私も、（まだまだ未熟ですが）思い起こせばいろんな天才プログラマーさんたちのコードからテクニックをパクってきた歴史があるので、この意見は確かに的を射ているなと感じました。 ※このあたりは、問題が出たときに自分でフレームワークの中身までチェックしたり、英語版ですが、やはりstack overflowは勉強になりますよ👍 そこで❗ 今回は、私がメインで使っている「Laravel（PHP）」「Vue」の中から、「こういう共通化ができますよ」というサンプルをまとめてみたいと思います。 ぜひ学習者さんたちのお役に立

さてさて、皆さんもよくご存知のとおりですが、LaraveだけでなくPHP自体もアップデートを繰り返していて、常に新しい機能が加わったりしています。 そして、来たる「2020.11.26」に次期バージョンのPHP 8がリリースされることになってます（私がPHPを使い始めたのがバージョン4でしたので、何か説明のできない興奮があります😂） PHP 8の目玉機能としては、やはり「JITコンパイラ」による超高速化ですが、プログラミング的にもいくつか「おっ！」と思うものがありました。 そこで❗ 今回は、その気になるPHP 8の新機能をLaravelで使ってみることにしました。 ぜひ皆さんのお役に立てましたら嬉しいです😊✨ 「プレステも、もう5になるんですね」 開発環境： Laravel 8.x 関数に渡すパラメータの順番が自由になる これまでのPHPでは、関数に渡す引数（パラメータ）は必ず順番を守

さてさて、このブログでは【Laravel + Google vision API】ウェブカメラで名刺を読みとって会員データ入力という記事を公開しています。 これはGoogle Vision APIを使って画像から文字を取得するという内容なのですが、実はこのサービスは有料になっています。（ただし、実行回数が少なければ無料でいけますし、基本的に料金は安いです） 正直なところ、精度を問われると間違いなくこういったクラウドのサービスを使うべきだと思いますが、もしかすると「精度は落ちてもいいので無料でやりたい」という需要があるのかなとも思いましたので、今回PHPを使って画像からテキストを読み取る（OCR）を無料でできる方法を紹介することにしました。 というのも、これも以前公開したネットカフェ向けにコミックをどこまで読んだか記録するLINEボットをつくったという記事でつくったBotは、基本的にバーコー

さてさて、Laravel 8.xがリリースされてしばらく経ちましたが、やはり驚きとともに迎えられたのがログインパッケージJetstreamではないでしょうか。 というのも、Jetstreamはインストールするだけでスマホのアプリと連携した２段階認証を実装していたりと、とても多機能だからですね。 そして、今回の記事はこのJetstreamにある機能をつけてみたくなったことが始まりでした。 それは・・・・・・・ マルチ認証 です。 ここで言うマルチ認証とは、一般的なusersテーブルにroleデータもたせたものではなく、全く別のモデルをいくつか使った「本格的な」マルチ認証です。 この方式のメリットとしては、各モデルで保持するデータが別でもOKという点です。（例えば、芸人ユーザーなら「師匠の名前」、ミュージシャンなら「担当パート」という具合に専用のデータを持たせていいということになります） そこ

さてさて、このところLaravelの新バージョンがリリースされたこともあってほぼLaravel記事ばかりでしたが、やはり開発者として「気になること」もたまにはやってみたいということで、今回は「ある驚く機能」をブラウザで実装してみたいと思います。 その機能とは・・・・・ OCR（画像から文字を読み取る） 機能です。 実は、OCRは次の記事で紹介をしたことがあります。 📝 無料でできる！PHPで画像からテキストを読み取る方法 しかし、これはPHPからコマンドを実行する方法なので、サーバーが必須でした。 しかし、この間すごいパッケージを発見してしまったんです。 その名も、「tesseract.js」です。 なんと、このパッケージは純粋にブラウザのJavaScriptだけでOCRを実現するというスグレモノなんです。 そこで❗ 開発者とし��、どうしてもやってみたくなったので、今回は需要は度外視して

さてさて、2020年の3月に7.xがリリースされたLaravelですが、約半年の期間を経て、この9月8日に「バージョン8.x」が公開されることになりました。🎉✨ そして、Laravelが大好きな開発者として、時期バージョンが気になってしょうがないので、ちょっとフライングしてリリースノートに書かれている内容をシンプルにまとめてみることにしました。（8.xのページがすでに存在していました） ぜひ皆さんの今後の参考になれば嬉しいです。 ※なお、8.xのリリース前に書いた記事ですので内容が変更になることも考えられます。そのあたりはご了承ください。また、まだ実際に動かしていない部分もありますので、今後変更する可能性もあります。 では、ひとつずつ見ていきましょう❗ 【追記：2020.09.08】オートインクリメントについての新機能を追加しました 【追記：2020.09.24】ルート設定の変更点を追加

さてさて、Laravelだけに限らずですが「フレームワーク」の人気のひとつには、 ログイン機能を簡単にインストールできる というものがあると思います。 もし「フレームワークをまったく使わずにログイン機能を実装してね👍」と言われたら、「CookieやSession、パスワードの暗号化・・・・うーん、やりたくない・・・・💦」となってしまいます。（ホントにありがたい限りですね😊✨） ただ、そんな便利なログインですが、「全く別のドメインで運営している２つのサイト間でログインを共通化する」という機能はSession IDの制約があるためため直接の実装はできません。（チカラ技でできるようですが好ましくないようです） ただ、このご要望は過去からちらほら聞いていたので、ここいらで何か対策を考えてみることにしました。 そこで❗ 今回はLaravelで「別ドメインのログインを共通化」する方法をご紹介しま

さてさて、いつものごとくLaravel Newsで情報収集をしていたところ、以下の記事を発見しました。 ■Laravel Newsの記事 RestQL Data Resolution Package for Laravel これは、RestQLという新しいパッケージを紹介している記事なんですが、なかなか気になる内容だったのでこのブログでも紹介することにしました。 なぜ気になったかというと・・・・ Ajaxで一気にDBからデータ取得できる からです。 この機能は「Laravel + Vue + GraphQLでデータ取得」という記事で紹介したGraphQLにインスパイアされた機能で、よりシンプルに実装することができます。 そこで❗ 今回は「Laravelの気になるパッケージ」としてRestQLをご紹介したいと思います。 作者のGregori Piñeresさんありがとうございます！ 「JSO

さてさて、この間 wordpressみたいなドラッグ・アンド・ドロップをVueで実装という記事を公開しました。この記事の目的はユーザビリティだったのですが、ドラッグ＆ドロップ機能の先では画像のアップロードを想定していました。 最近のウェブサイトでは画像をサーバーへ保存するというのは珍しいことではないでしょうが、実はアップロードする側の状況が変化してきたことである問題が発生するようになってきました。 それが・・・ スマホ・カメラの高解像度化のせいで画像アップロードに時間がかかってしまう というものです。 つまり、サイズが大きなファイルをアップロードするのに時間がかかってしまうということですね。 特にまだ日本のウェブサイトは、以下のように確認ページを挟む場合も多く存在していますので、その場合（バリデーションを厳密にするなら）画像サイズが大きい場合は１番と２番で画像をアップロードする必要がでてき

さてさて、このところビデオチャットやQRコードなどウェブカメラ関連の記事を続けて公開したので、この流れで何か他にも「リアルとウェブとの融合」がテーマの記事が書けないかなと考えていました。 そして、私は日頃から「これは試してみたい！」という内容はGoogle Keepに保存しているので、何気なく昔書いたメモをチェックしてみると・・・・・ 発見しました😊✨ そのうち試してみたいと思っていた機能を。 ズバリそれは、 JavaScriptを使った顔認識システム です。 この間公開した記事「Python（OpenCV） 顔が上を向くように写真から切り出す方法」では、Pythonを使いましたが、同じことが（ブラウザの）JavaScriptでも実行できるという噂を聞いていたんです。 ということで、今回はJavaScriptを使って以下の機能を実装してみたいと思います。 顔の抽出 顔パーツ（目とか鼻とか

さてさて、この間「Laravel 5.6のartisanコマンドまとめ」という記事を公開しましたが、Laravelは開発のスピードが早いので、気がつくと「え、こんな便利なものが！？」となることも珍しくなかったりします。 そこで！ 今回はそんな「知らないけど便利な」テクニックを習得しておくために、Laravelが提供する「ヘルパー関数」をまとめてみることにしました。 中にはPHPの標準関数として採用してほしいぐらい便利なものもあるので、ぜひみなさんも参考にしてくださいね。 ではひとつずつ見ていきましょう❗ 【追記：2019/04/10】Laravel 5.8以降では、ヘルパー関数の書き方が変更になっていますのでご注意ください。 // 古い書き方 array_add(); Str::random(); // 新しい書き方 use Illuminate\Support\Arr; Arr::add

さてさて、以前このブログで「DBデータをCSV・Excelでエクスポートする」という記事を公開しました。 タイトルのとおりデータベースから必要なデータをエクスポートする機能なのですが、今回はこの機能に前からつけてみたかった「便利機能」を開発してみます。 それは・・・・ 選択したカラムのデータだけをExcelでダウンロードする という機能です。 例えばこんなことってないでしょうか。 DMを郵送したいから、会員ユーザーの「名前」と「住所」だけダウンロードしたい📮 もちろん、全データをダウンロードできれば後で編集できますが、必要な部分だけに絞り込むことができればとっても便利です。 そこで！ 今回はLaravelを使って選択したカラムだけExcelでダウンロードする機能を作ってみます。 ぜひ楽しみながらやっていきましょう❗ 「今調べたら、excelは英語で 『優れている』っていう意味なんですね

さてさて、先日300記事を突破したので過去の内容をチェックしてみることにしました。 すると、「あれ、記事にしてなかったっけ❓❓」というものがありました。 それは・・・ Laravelでファイルをアップロードする機能 です。 過去にファイルアップロードを効率化する独自パッケージ「ClampBolt」を公開しているので、てっきり記事として公開しているものと勘違いしていました😂 そこで❗ 今回はLaravelで顧客データを保存＆プロフィール画像も一緒にアップロードできる機能を作ってみたいと思います。 ぜひ楽しみながらやってみましょう❗ （なお、根本を理解していただきたいので、今回ClampBoltパッケージは使いませんm_ _） 「できるだけ他でも使いやすい形にします👍」 開発環境： Laravel 7.x モデル＆マイグレーションをつくる まずはDB関連からやっていきます。 モデル、マイグ

さてさて、前回記事「Trello風のタスク管理をつくる」ではVueを使ってドラッグ・アンド・ドロップを実装してみました。 そして、今回はユーザビリティに関連する機能をご紹介したいと思います。 それは・・・・ ページ移動しても検索パラメータをキープする 機能です。 というのも、通常ブラウザページで入力した内容はページ移動したり、リロードするとまた最初から入力しなおす必要があります（コレめんどうですよね・・・😫） 実は以前「ページ移動してもVueの状態を保持する方法」という記事で同じ機能を紹介したのですが、これはURLの#以降にデータを埋め込むというものでした。 もちろんこの方法でもできなくはないのですが、検索パラメータが多い場合はやはりURL以外の場所にデータを格納しておくべきです。 そこで！ 今回は、sessionStorageでこの機能を実装してみます。 ぜひ楽しみながらやってみましょ

さてさて、これは開発者がたまに遭遇する「あるある」な話かもしれませんが、DBからGROUP BYでデータ取得するとき以下のようなエラーが発生したことはないでしょうか。 Syntax error or access violation: 1055 Expression #（数字） of SELECT list is not in GROUP BY clause and contains nonaggregated column ‘（フィールド名）’ which is not functionally dependent on columns in GROUP BY clause; this is incompatible with sql_mode=only_full_group_by (SQL: select （フィールド名）, id from （テーブル名） group by （グループ

さてさて、この前「axios不要！fetch()でAjax通信する方法」という記事で新しいAjax送信の方法をご紹介しました。 この記事で少し書いたのですが、私の場合$.ajax()を使っていたのが結構前のことなのでとても懐かったです。 そして、その瞬間ふとやってみたいことが頭に浮かんできました。 それは・・・ Ajax送信の移り変わりを見たい❗ です。 正直なところ、古い書き方を紹介して何になるんだというご意見もあるでしょうが、ぜひ今回の記事を読んで年配のエンジニアさんに聞いてみてください。 あなた「いやー、昔のAjaxって書き方めんどうだったんですよね❓❓」 と。 きっと、「おっ、知ってるのか！？」と人間関係がスムーズになる（かもしれません😂） また、過去を知ることで現在、そして未来を知ることに繋がると思います。 ぜひ予備知識として楽しんでください。 「私が存在を知った 逆順で紹介し

さてさて、以前このブログでは記事を公開するとき、以下のツイッターでお知らせしていました。 【お知らせをしていたツイッター】 実は当時、あるサービスで自動投稿していたのですが、Twitterの仕様が変更になった影響で残念ながら利用できなくなってしまいました…。 そして、長らくTwitterとの連携はしてなかったのですが、せっかく記事を書くからには多くの人に読んでもらいたと思いこの度、再開することにしました。 そのため、wordpressのプラグインを試したのですが、なぜか上手くいかなかったので、もうこの際、自動ツイート機能を自前で作ることにしました。 そこで❗ 今回はプラグインなしでwordpressからTwitterに自動投稿する機能の作り方をご紹介します。 ぜひ皆さんのお役に立てると嬉しいです😊✨ 【追記：2023.9.20】 イーロン・マスクさんがTwitterをXに変更するなど大き

さてさて、前回記事「入門！Expressのインストールと基本のまとめ」では初めて本格的にNode.jsを使った記事をお届けしました。 そして、この記事の中でも書いたのですがNode.jsの最大の欠点は開発者にとっては致命的といってもいい内容でした。 その内容とは・・・そう、 エラーが発生すると、もれなくサーバーが落ちる ことです。 これは、例えば「宣言していない変数を呼び出した」だけでもサーバーが落ち、インターネットからアクセスできなくなる、というものです😅 さすがにこれでは怖くてとても本番環境にはNode.jsを使えないよね・・・と考えていました。 ところが、少し調査してみると、このNode.jsの最大の欠点を解決する方法が存在していることがわかったので、今回はその方法をご紹介したいと思います。 ぜひ皆さんのお役に立てると嬉しいです😊✨ 開発環境： Express 4.1、Ubunt