サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
買ってよかったもの
blog.capilano-fw.com
さてさて、前々回の「入門!Expressのインストールと基本のまとめ」でも少し書いたのですが、Node.jsのフレームワーク「Express」を本格的に使ってみた実感として、Laravelのようなデータベース周りの機能がなく、ちょっと残念な気持ちになっていました。 ところが、やはり世界中には天才プログラマーたちが多数いるもので、Node.jsに以下3つの機能を一気に提供してくれるパッケージがあることを知りました。 マイグレーション ・・・ DBテーブルの管理 Seed ・・・ テストデータの管理 モデル ・・・ データベース操作(LaravelのEloquentのようなもの) その名も「Sequelize」です。 ※ YouTubeを見る限り、「すぃーくぅらいず」と読むようです。英語でSQLを「すぃーくぅ(る)」と読むことに掛けてるのかと思います。 しかもこのパッケージには、Laravel
さてさて、前々回「Vue 3の新しい機能と変更点・全9件」という記事を紹介しましたが、この中でひとつ気になるところがありました。 それは、 Vue 3はTypeScriptをサポートしました という部分です。 個人的には、JavaScriptをビルドするというのはあまり好きではないのですが、TypeScriptの評判がいいのは日々実感していたので、「食わず嫌い」にならないよう体験してみることにしました。 そこで! 今回はLaravel MixでTypeScriptを使う方法をご紹介します。 ぜひ楽しみながらやってみましょう! 「最近マイクロソフトがマジ本気ですよね❗」 開発環境: Laravel 7.x、TypeScript 3.8.3 準備する TypeScriptをインストールする まずパソコンのどこからでもTypeScriptが実行できるようにします。 以下のコマンドを実行してくださ
さてさて、私がLaravelを使い始めたのはバージョン4.2が出てすぐだったのですが、現在はすでに最新バージョンが5.8になり、ちらほら5.9の話題もニュースとしてみかけるようになりました。 そして、前バージョンをよく使っていた開発者からすると「今は普通に使っているけど、すごく強力な機能」の便利さを再認識する場面が結構あったりします。 そして、その中のひとつが今回の話題「ミドルウェア」です。 ミドルウェアとは、ページにアクセスする直前に実行されるもので、条件によってリダイレクトしたり別のページを見せるといったことが簡単にできるようになっています。(例えば、ログインしたユーザーしか見られないページもミドルウェアのひとつですね) ということで、今回はこのミドルウェアの基本的な使い方と「こんなとき」に使えるサンプルを実例で紹介してみたいと思います。 ぜひ、皆さんのお役に立てると嬉しいです😊✨
さてさて、前回の記事「Node.jsにDBマイグレーション、Seed、モデルを用意する」では、「Sequelize」というパッケージを使ってデータベース周りの開発を楽にしてみました。 前回は、その「Sequelize」のインストールやコマンドの使い方をメインにしてご紹介したのですが、実はひとつ情報が多すぎてまとめていない部分があります。 それは・・・ モデルを使ってデータベース操作(取得/追加/更新/削除)する方法 です。 そこで! 今回は「Sequelize」モデルの使い方を実例でお届けしたいと思います。 ぜひ皆さんのお役に立てると嬉しいです😊✨ 開発環境: Node.js 8.10、Express 4.1、Sequelize 5.2 前提として 今回の記事は「sequelize」がインストールされていて、さらに、すでにモデルが作成されている必要があります。 もしまだ準備が整っていない
さてさて、前回「Bootstrap v5がどうなるのか調査してみた」という記事を公開しましたが、実は今後のリリースでもうひとつ気になるものがあります。 それは、JavaScript開発の強力な味方、 「Vue.js」の新バージョン(v3) です。 Vue 3については、以前からたびたび情報が出てましたがついにアルファ版が利用できるようになりました。(2020.3.26現在) そこで❗ 今回は、近い将来リリースされるであろう Vue 3の使い方をまとめてみることにしました。 ぜひ参考にしていただけると嬉しいです😊✨ 【追記:2020.09.20】2020年9月18日に正式リリースされ、変更点があったので、記事を加筆・修正しました。 【追記:2020.10.30】「refの使い方が変わった」を追加しました。 「ついに来ました Vue 3 🎉」 Vueインスタンスの作り方が変わった これまで
さてさて、前回記事 Laravel 7.xの新ルート機能 では、Laravelの新しいルート機能をご紹介しました。 そして、今回もこの流れで便利な「ある機能」をご紹介したいと思います。 その機能とは・・・ HTTPクライアント機能 です。 つまり、Laravel(PHP)からインターネットのウェブサイトにHTTPでアクセスする機能ですね。 ただ、もしかすると 「PHP で HTTPリクエストするならGuzzleがあるじゃん・・・」 と思われたかもしれません。 先に言っておきますと、今回の新しいHTTP機能は内部的に「Guzzle」を使っています。でも、どうやらよく使う部分はLaravel側で簡単に使えるようにしようということになったようです。(つまりラッパークラスですね) そこで! 今回はLaravel 7.xの新機能のHTTP Clientの使い方を実例でご紹介したいと思います。 ぜひ皆
さてさて、Laravelのバージョン7.xがついに公開されるということで一足先にどのような機能が追加になったかをチェックしてみました。 いくつかLaravel 7.xには新しい機能が追加になっていますが、その中でもひときわ興味を引かれたのが、 Bladeの新コンポーネント機能 です。 正確に言うと、以前からBladeにはコンポーネント機能が存在していたのですが、今回はその機能が大幅に拡張され、いろいろと便利に使えるようになっていますので、今回の記事でまとめてみることにしました。 ぜひ皆さんのお役に立てると嬉しいです😊✨ 【追記:2020.3.14】Laravel 7.1.2未満のバージョンにBlade Component由来のXSS(クロスサイトスクリプティング)の脆弱性が報告されています。できるだけ早くアップデートすることをおすすめします。 開発環境: Larave 7.x 何が一番変
さてさて、すでにインターネットがマルチメディア化してから相当時間が経ち、当時はまだ珍しかった(また、視聴にストレスが高かった😅)動画の存在はなくてはならないものとなりました。 そして、動画はいまや誰でも持っているスマートフォン付属のカメラでいつでも撮影ができるため、撮影したものを個別にアップロードするウェブサービスも珍しいものではなくなっています。 ちなみにLaravelで最もシンプルに動画を配信する方法は?というと、publicフォルダに動画を設置し直接ウェブサーバーを通してアクセスすれば問題ありません。 ただし、ここである機能を追加するとなると1手間必要になってきます。それが、 許可されたユーザーだけに動画を公開する というものです。 つまり、先ほど書いたpublicフォルダに入れてしまうと誰でも見ることができますが、そうではなく例えばアップロードしたユーザーだけが見ることができるよ
さてさて、全89項目!Moment.js日付の操作&比較・実例の記事ではMoment.jsを使って時間を進めたり、過去・未来のものであるかをチェックする方法を紹介しました。 そして今回はMoment.jsの第3回として、年、月、日、時、分、秒など各日付データの取得と設定(つまりSetterとGetter)をする実例集をお届けします。 ぜひ効率的なコード構築のために役立ててください。 実行環境 Moment.js: バージョン 2.22.2(日本語対応コードも読み込んでいるものとします) 各日付データの取得 year()で年を取得する 例えば、「2018年1月1日」の年データ(Number型)を取得する場合です。 moment('2018-01-01').year(); // 2018 years()も同じ結果になります。 month()で月を取得する 例えば、「2018年11月22日」の月
さて、前回は記事内容が20,000文字を越える長編記事「Laravel・データベースからデータ取得する全実例」をお届けしましたが、今回はその続編として「DBのデータの追加/編集/削除」に焦点を当ててまとめてみました。 ※実を言うとこの2つは元々ひとつの記事にするつもりでしたがあまりにも膨大になりすぎることがわかったので、急遽分割することにしました。 では、早速ひとつずつ見ていきましょう。 【環境】 Laravel 5.6 MySQL 5.7 DBにデータを追加する insert()を使ってデータ追加する データベースにデータを追加するにはinsert()を使います。 実際の例を見てみましょう。 \DB::table('items')->insert([ 'name' => '名前' ]); まず、\DB::table()でどのテーブルを使うかを指定し、そしてアロー演算子「->」を使ってin
さてさて、その昔Ubuntu(リナックス)といえば、安定しないOSというイメージが強かったですが、現在は開発者の努力によって不安定さはほぼなくなり、開発者として使うメインのOSとして十分過ぎるほどのパフォーマンスを見せてくれています。 特に、最近ウィンドウズ10は保存してあったファイルが勝手に削除されてしまバグがあったりと不安定さを増していたり、iMacが開発者でも人気になったりと、すでにOSといえばWindowsという状況ではなくなってきた感もあります。 ただ、そうはいってもUbuntuも完璧ではなく、ところどころうまくいかなくなる部分があったりするのも事実です。私の環境ではメインPCに外部モニターをつないでデュアルディスプレイにしていますが、急にこのモニターの解像度が1980x1080(16:9)なのに、この解像度だけが選択肢の中から消えてしまうという現象に遭遇しました。 ということで
さてさて、この間 PhpSpreadsheetでExcelを操作する全26実例!という記事を公開しましたが、意外にもこの記事へのアクセスが多かったので「やっぱりPHPでExcelを操作する需要って多いんだな😊」と考えていました。 ちなみに、私はプログラム開発に都合がいいことが多いためメインのOSにはLinuxを使っています。そのため、ExcelはVirtualBox内のWindowsで実行するようにしていますが、正直いちいち起動するのはめんどうだったりもします。 そこで重宝するのが「Google版Excel」という位置づけの「Google スプレッドシート」です。なぜならGoogleが開発しているだけあってブラウザ上で完結させることができるからです。(しかも、設定によってオフラインでの編集もできるようです) そして、以前 Laravel で注文データをGoogleスプレッドシートに追加す
さてさて、このブログでは過去に反射神経ゲームやタイピングゲームなど、Vueを使ったちょっとしたゲームの作り方を公開してきました。 そして、最近Google Analyticsを見てみると、これらゲーム記事の滞在時間は他と比べると長めになっているのでより皆さんに喜んでいただけているようです。^^ ただ、そうはいってもゲーム開発となると見た目はシンプルでもプログラム的にはコードが複雑だったりするので、主にVueビギナーの方々へ記事をお届けしたい私からするとどのような記事がいいか少し悩ましかったりもします。 そこで! 今回は、シンプルだけど比較的簡単にプログラムをつくれるであろう「○×ゲーム」をVueでつくる記事をお届けすることにしました。 ぜひ学習に役立ててくださいね。 (最後に教材ソースコードをダウンロードできます) ※ 開発環境: Vue 2.5 やりたいこと 子供の頃よく友達と遊んだ次の
さてさて、先日Laravelのバージョン6.xがリリースされたので前回記事では(実装方法が変更になっていた)ログイン機能の使い方をご紹介しました。 そして、新バージョンのLaravelには変更だけでなく追加機能もいくつか用意されていて中でも開発者が「ゲーム・チェンジャー」と呼ぶ機能があります。 それが、 Lazy Collection(れいじーこれくしょん) です。 これは、これまでのLaravelでも人気が高いCollectionの機能を拡張するもので、使い方によってはコードの実行を省力化することができる機能になっています。 ということで、今回はLaravel 6.xの新機能の中からLazy Collectionを紹介します。ぜひ皆さんのお役に立てると嬉しいです😊✨ 開発環境: Laravel 6.1 Lazy Collectionとは まず、Lazy Collectionがどんなもの
さてさて、このところVueやLaravelでも少し応用的な内容が多かったのですが、やはり基本は大事なので、定期的にそういった部分にも気を配っておくべきだと感じています。 そして、Vue(JavaScript)で基本的な内容は何かと考えたときに外せない機能。それは・・・・・・ イベントです! おそらくJavaScriptでコンテンツを作る時にクリックなどのイベントを全く使わない場合というのは珍しいのではないでしょうか。 ということで、今回はVueでJavaScriptの主要なイベントを実行する実例をまとめることにしました。 ぜひチートシート的な使い方をしてくださいね。 (最後に今回もソースコードをダウンロードできます。) ※ 実行環境: Vue 2.5 イベントの実行方法 今回はcdnでVueを読み込み、「on + イベント名」という名前のメソッドを作り、実行していきます。(例: onCli
さてさて、ウェブ開発の分野は特に変化のスピードが速い業界ですので、少し前まで使っていた技術がたった2、3年で古くなってしまうことも結構ザラにあったりします。 そのため普段から新しい情報は常にチェックするようにしていますが、それでも全てをカバーすることは難しいですよね。 そして、今回紹介する「PhpSpreadsheet」もそのひとつで、このパッケージは少し前まではPhpExcelという名前で公開されていました。しかし、どうやらPhpExcelは2017年に非推奨となり、現在はPhpSpreadsheetとしてリニューアルされています。(公式のGitHubによると2015年にリリースされて2017年に非推奨になっています。たった2年だったんですね・・・😅) ということで、今回はPHPでExcelを作成や読み込みなどができるPhpSpreadsheetの使い方を紹介したいと思います。 最後に
さてさて、前々回に全217件!Carbonで時間操作する実例という記事を書いたのですが、思いのほかそれまで知らなかった便利なメソッドや記述方法があることがわかりました。 そこで、時間・日付つながりということで今回はクライアントサイド(つまり、JavaScript)の時間管理パッケージ「Moment.js」についてまとめることにしました。 あまり長くなってもいけませんので、まずは「日付フォーマット」です。今後もMoment.jsのGetterやSetterなどその他の便利な記述についても記事を公開していきますのでお楽しみに。 実行環境について Moment.js: バージョン 2.22.2(日本語対応コードも読み込んでいるものとします) CDNを使ってMoment.jsを使う場合は以下のようになります。 <script src="https://cdnjs.cloudflare.com/aj
さてさて、このところPHPやJavaScriptの記事ばかりになってしまったので、たまにはもっとネイティブな環境のものもやってみようという気になっていました。 そして、できるなら自分の開発環境にプラスになるものを知識として仕入れておきたいということで今回は前々から気になっていた、 xdotool(えっくす・どぅ・つーる) の全コマンド・まとめをお届けします。 xdotool というのは、コマンドからウィンドウを操作することができるプログラムで、例えば、以下のような操作をすることができます。 Google Chromeで新しいウィンドウを開く アドレスバーに移動する http://yahoo.co.jpとタイプする エンターキーを押してヤフーを表示する さらに、このそれぞれのコマンドをシェルスクリプトに書いておけば、そのファイルを実行するだけで1〜4までの動きを全自動で実行させることができる
さてさて、ウェブサイト開発でページ表示の速度を向上させるためによく「キャッシュ」を利用することがあります。 キャッシュとは、時間がかかる計算結果を一時的に保管しておいて、一定時間は重たい処理を省略するテクニックですが、Laravelではこの「キャッシュ」がとても簡単に利用できるようなっています。(キャッシュのもっと詳しい説明はこちら) ただし、Laravelには多くのキャッシュ機能があるため、少し頭が複雑に感じることもあったりするのも事実です。 そこで、今回はキャッシュ機能についてまとめた「大全」的な記事を公開することにしました。 ぜひ開発の参考にしてください。 ※ 実行環境は、Laravel 5.7です。 お急ぎの人向け(キャッシュの保存&取得) Laravelでシンプルにキャッシュを扱いたい場合はヘルパー関数cache()を使うと便利です。 // 10分間、キャッシュ保存 cache(
さてさて、Laravelはすでに多くの便利な機能を揃えていて、何か特定の機能がほしい場合、ほぼどんなものでもその解決に役立つものが見つかるというのが現状です。 ただ、そうはいってもたった1つの機能で全てをカバーできるわけではなく、クライアントさんのご希望にできるだけ添えるようにするには、複数の機能を連携させて(もしくは足りない部品は自分でつくって)様々なシステムを開発していくのが通常ではないでしょうか。 しかし、そうなってくるとより必要性を増してくるのが「デバッグ」です。 ある部分を変更すると、全く違う部分にも影響が出てくるということもしばしばあることなので、しっかりしたデバッグ・ツールをもっているというのは開発者にとって大きなアドバンテージになります。 そこで! 今回はそんなデバッグができるLaravel公式のデバッグ・パッケージ「Laravel Telescope」の使い方をまとめみま
さてさて、この間「Laravel+Vueでリアルタイム・チャットをつくる」というテキストのチャットを実現する記事を公開しました。(実はこの記事のソースコードはブログ内でダウンロード人気TOP3だったりします。ありがとうございます😊✨) そして、この機能を実現するために利用したのが Pusher というサービスで、Laravelの公式ドキュメントでもLaravel EchoとPusherを連携させる例が紹介されていたりします。 ただ、Pusherでできることは(テキストの)チャットシステムだけでなく、なんとビデオチャットも開発することだってできるんですね。 そこで! 今回はLaravel + Vueでビデオチャット・サービスを実装してみたいと思います。 ぜひ皆さんのお役に立てると嬉しいです! 最後にソースコード一式をダウンロードすることができます。 開発環境:Laravel 5.8、Vue
いろいろとやることが多くてついブログをサボってしまいました(汗) 現在の開発で PDFが必要になったので、Laravel開発ではデファクトスタンダードの「laravel-dompdf」を使うことにしました。 何度もこのパッケージは使っているんですけど、実は日本語を使うとなると composer のルールを破ったりキャッシュを自分で作ったりと少し使いにくいものでした。 ※実際にはlaravel-dompdfではなく、元となってるdompdfが原因です。 なので、今回もまた同じ作業が必要かと思っていたら、さすが日進月歩のウェブの世界。 新しいlaravel-dompdfではめんどうな作業をショートカットできるようになってました。 そこで!その感動を原動力にlaravel-dompdfで日本語を使う方法をまとめてみたいと思います。 開発環境: Laravel 7.x、laravel-dompdf
さてさて、Laravelの機能は時間を追うごとにどんどん増えていっているわけですが、さすが世界中の優秀なプログラマーたちが新しい便利な機能をプルリクエストしているだけあってそのスピードは目を見張るものがあります。 ただそうなってくると、「今は必要ないけどいつかは試してみたい機能」が増えてしまって、まさに「積ん読(つんどく)」状態になってしまったりします。 実は私自身もいくつか試してみたい機能があるんですが、今日はそんな中から「Laravel Echo」を取り上げて記事を書くことにしました。 Larael Echoは「ブロードキャスティング」と呼ばれるリアルタイムでブラウザにイベント通知(受信)ができる機能で、今回はこれを利用してリアルタイムチャットをつくってみます。 ぜひ、みなさんもやってみてくださいね。 やりたいこと(ゴール) 例えばブラウザでタブを2つ開いて、片方のページから「ハロー!
現在、データをグラフ化する開発でchart.jsというJavaScriptパッケージを使っています。 このchart.js、MITライセンで配布されてるにもかかわらずとても使い勝手がいいんで、JavaScriptをで、グラフを描くといえばもはやデファクトスタンダードといってもいいんじゃないかと思うほどの出来栄えです。 しかし、ホントにいい時代になりました。 過去にも同様の開発は行ったことがあるんですけど、今のように JavaScript 全盛の時代じゃなかったんで、PHPのGDを使っているグラフを作っていたのを思い出しました(笑) ちなみにChart.jsが初見の方は下のリンクからサンプルを見ることができますよ! 線グラフ 棒グラフ 円(ドーナツ) ※他にもいろんなタイプのグラフに対応してます。一覧はこちら さて、ここから本題です。 まず、chart.jsでは数字データを設定し、それがグラ
さてさて、ウェブ開発をしているとよく必要になる機能のひとつにお問い合わせフォームがあります。 もちろんクライアントさんだけが利用するタイプのサイトなら不要ですが、それ以外はだいたいどのようなサイトでもユーザーが運営者に連絡ができるようお問い合わせフォームを開設しています。 そこで、今回は比較的ご要望が多いお問い合わせフォームを Larave + Vueで作ってみます。 いつもの内容より基本的な内容が多くなっているので、ぜひ参考にしてくださいね。(最後に今回のプログラムコード一式をダウンロードできます!) 開発環境: Laravel 5.7 やりたいこと 今回開発する内容は以下のようなお問い合わせフォームです。 問い合わせ内容をメールで送信 バリデーション(入力チェック)をする Ajax通信で送信(ページの移動はなし) では実際に開発していきましょう! お問い合わせの入力ページをつくる(デザ
さてさて、前回の記事、完全な手順!VueJSで自動ページ送りする方法では、ES6を使ってページ送り機能を実装してみましたが、その際ふと疑問に思ったことがありました。 それは、 インターネットエクスプローラー11(IE 11)だと、どんなES6の記述ができるんだろう?? というものです。 IEといえば、当のマイクロソフトでさえedgeへの移行をすすめている、もはやレガシーなブラウザですが、未だに一定数以上のシェアを持っていることから、どうしても古いJavaScriptの書き方をせざるを得ないのが現状です。(BableとかはIEへの対応という意味合いが大きいですね) そこで!今回は、実際にIE11でES6の主要な書き方を実行し、うまくいくかどうかをひとつずつ検証してみます。(そして、せっかくなのでedgeでも検証してみました。) ぜひ開発の参考にしてみてください。 「ひさびさにVirtualB
さてさて、このところElectronのプログラムが面白くなってきて個人的にもいろいろと開発する意欲が湧いてきています。 そして、そんな中で自然と試したいことが頭に浮かんできました。 それは・・・・・・ 他の言語とのコラボレーション です。 つまり、ElectronはNodeJS(JavaScript)を使っていますが、これ単体だけではなく、例えば、Pythonやコマンドラインなども実行してみたくなったんですね。 ということで、今回は以前試してみた(といっても移転前のブログですが)Python + dlibの顔認証コードを使ってモザイク処理をするElectronアプリをつくってみます。 ぜひ学習の参考にしてみてくださいね。 ※ 開発環境: Electron 2.0、Python 2.7 やりたいこと せっかくElectronを使うので、単純に検出された全ての顔にモザイクをかけるというアプリで
さてさて、毎回言ってますけどLaravelには最初から強力な機能がたくさん備わっていて、開発効率が飛躍的に向上すること間違いなしだと思っています。 ただ、そんな中にあってもデフォルトではついていない機能もあって、「権限つきのログイン」もそのひとつです。 権限つきログインとは? 「権限つきログイン」というのは、ログイン機能にユーザータイプが分かる情報を追加したもので、 管理者だけが閲覧できるページ お客さんには見せたくないページ 通常ユーザーだけに表示するイベント情報 といった、ユーザータイプでいろいろな切り替えができるようになります。 ということで、今回は練習として以下2つでログインができるようにしてみましょう。 owner ・・・ お店のオーナー customer ・・・ お客さん 目指す機能 ゴールは、 お店のオーナーだけ表示できるページ ログインしていれば誰でも表示できるページ をつ
さてさて、たまに聞かれることがあるのですが我々プログラマーからするとウェブデザインというのはどちらかというと別ジャンルなので、あまり得意ではない人って結構多かったりします。(私だけ??) とは、いってもクライアントさんからは、やはり「コストはできるだけ少なくしたい。なんとかなりませんか?」というお話になったりもします。 そんな場合に活用するのが、フリーで管理者ページデザイン一式が利用できるAdminLTEです。 もちろん、プロのデザイナーさんに要望を踏まえてつくってもらったデザインには到底かないませんが、フリーでこのクオリティというのはあまり他のものではなかったりします。(ただし、いろいろなサードパーティのパッケージが含まれているので、ライセンスには最新の注意を払う必要があります) ということで、今回はこのAdminLTEのデザインとLaravelを使って次の機能をもったサイトをつくってい
次のページ
このページを最初にブックマークしてみませんか?
『console dot log』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く