Vue.jsで簡単にDate Time Pickerを実装！「Vue Datepicker」の使い方

Vue 3 に対応した日付選択コンポーネントです。 カレンダー形式で日付を選択でき、日本語を含む多言語に対応しています。 また、日付フォーマットや外観など多数のオプションがあり、キーボードナビゲーションや日付範囲指定などの機能もサポートしています。 簡単な実装方法と豊富な機能がある高品質な日付選択コンポーネントです。

テキストエリアのPOST値を直接Vueのdataに渡すとエラーになる

PHPでPOST送信した値をVue.jsのdataに直接設定しました。 textareaで改行したデータを使うと、エラーになることが判明しました。

PHPで作るTeamsへの通知Bot

PHPを使って、SlackみたいにTeamsにも通知を送れないかなぁと調べる事一年前。 その時点で通知を送る事ができると判明したものの、まだMicrosoftも手探りなのか、メンションの送信することができませんでした。 久々に調べてみたら、メンションも使えるようになってる！というわけで、記事にしてみました。

[Electron]wait-onでlocalhostを使うと待機状態が永遠に続く

wait-onでlocalohostを使うと待機状態が永遠に続いて、Electronが立ち上がらない

[EC-CUBE4系]受注一覧を注文日で並び替えする

受注一覧を注文日で並び替えします

【POST送信】print()を使用しながらSafariのバグにも対応する

Vue.js 3を使ってTableをカスタマイズしていく（フィルター）

Vue.js 3系を使ってテーブルを色々カスタマイズして行こうと思います。 前回に引き続き、前回に引き続き、条件分岐でテーブルに表示する項目をフィルターする機能を実装していきます。

Vue.js 3を使ってTableをカスタマイズしていく（transition-groupを設定する）

Vue.js 3系を使ってテーブルを色々カスタマイズして行こうと思います。 前回に引き続き、テーブルのデータを追加したり、削除した時に、<transition-group> を使って、アニメーション追加していきます。

Vue.js 3を使ってTableをカスタマイズしていく（データの追加・削除）

[Vue3対応]Vue.jsでドラッグ＆ドロップするなら「Vue.Draggable」がおすすめ

「vue-typical」でタイピング風に表示されるテキストを作る

vue-typical は、タイピング風にテキストを表示するアニメーションを実装するための軽量ライブラリです。 容易な実装が可能で、ライブラリも軽量な為、ちょっとサイトに動きを付けたいなと言う時に簡単に実装することが可能です。

WordPressの新規・編集の投稿でメールを送信する

新規・編集のどちらかを行った時に、通知メールを飛ばす機能を追加することにしました。

Vue.js 3を使ってTableをカスタマイズしていく（基本）

今回は、ベースとなるテーブルをVue.jで構築します。 単にHTMLを記述するのではなく、列と行をそれぞれデータとしてVueに持たせてDOMにレンダリングさせます。

Vue.js 3を使ってTableをカスタマイズしていく（まとめ）

Vue.js 3系を使ってテーブルを色々カスタマイズして行こうと思います。

CPIサーバーで「閲覧できません (Forbidden access)」と表示される

CPIサーバーでWordpressのプラグインを使ってWAFの除外ルールを設定する方法

「Vue Cookie Law」で2022年4月の改正個人情報保護法にむけて準備しよう

Vue Cookie Law は、EUのGDPRに対処するために作られたCookeの使用確認コンポーネントです。 あらかじめ用意されたコンポーネントを使用することで、HTMLやCSSを使った作成を行う必要がありません。 またユーザーからの承認や拒否の分岐処理も搭載されています。

TinyMCEの文字サイズのデフォル値を設定する方法

クライアントからTinyMCEの文字サイズの単位をemに変更して欲しいと、要望されて設定を行いました。 指定した文字サイズの単位を反映することはできたのですが、デフォルトの値が変わりませんでした。 今回は、文字サイズのデフォルト値の設定方法になります

[PHP]Google Authenticatorのワンタイム認証ログインを実装する

ビットコインなどの取引所で、ほぼ確実に用意されているワンタイムパスワード認証を実装したいと思います。

【EC-CUBE 4】管理画面の受注検索の時間入力を削除する

Google Map API の地図を地域対応する

Google Map APIの地図を「地政学的な感度に基づいて、表示する適切な境界線とラベル」に設定する方法

[Vue.js]超簡単に分岐フォームが作れるライブラリ「vue-flow-form」

vue-flow-formは、分岐のあるフォームを簡単に実装できるコンポーネントライブラリです。 テキスト入力はもちろん、セレクト形式、日付、選択式などのバリエーションの入力項目が実装されています。 更に選択した内容によって、質問分岐させることも可能です。 予め用意されたテーマCSSを呼びだけせば、特にレイアウト調整をする必要もなくすぐにフォームを使用することができます。

[Vue.js]要素の表示・非表示を検出するライブラリ「vue-observe-visibility」

vue-observe-visibilityは、要素がウィンドウに表示・非表示されたことを検知できるライブラリです。

Vue.jsとjQueryでフィルター付きのMasonryレイアウトを実装する

高さ可変のMasonryを作る事になりました。 加えてカテゴリーでフィルターできるようにして欲しいとのことで、目ぼしいMasonryライブラリが見つからず、やむを得ず一部自作することにしました。

Vue.jsで通貨フィルターを実装する「vue-currency-filter」

【2021年2月】管理人のつぶやき

【2021年1月】Vue.jsライブラリ記事まとめ

毎日は見てられない人向けの2021年1月のVue.jsライブラリの紹介記事まとめです。

Vue.jsで画像リストに選択機能を実装する「vue-select-image」

vue-select-imageは、画像リストの画像をクリックして、選択した画像を取得できる機能が実装されるコンポーネントライブラリです。 単体の選択機能はもちろん、複数選択を行うこともできます。

Vue.jsでサークルや棒のプログレスバーを実装する「svg-progress-bar」

svg-progress-barは、サークルや棒のプログレスバーを実装できるコンポーネントライブラリです。

Vue.jsで動画も対応したライトボックスぽい機能を実装する「vue-silentbox」

vue-silentboxは、ライトボックスにインスパイアされて開発された、動画にも対応しているビューアコンポーネントライブラリです。 .mp4、.ogg、.webm、.mov、.flv、.wmv、.mkvの動画達に対応しています。 もちろんブラウザで使用できる画像はすべて対応しています。

Vue.jsで範囲スライダー付きのヒストグラムを実装する「vue-histogram-slider」

vue-histogram-sliderは、範囲をスライダーで指定することができるヒストグラムコンポーネントライブラリです。 グラフの色付けなどのカスタマイズはもちろん、キーボードによる操作やドラッグによる拡大表示をすることも可能です。

Vue Routerを使っていてURLのqueryを変更しても反映されない

URLのqueryを変更した時に、Viewが反映されない現象が発生しました。 実はそこまで気にする必要は無いのでは？と見てみぬふりをして開発をしていたのですが、クライアントから指摘が入り（気づくな！）対応することにしました。

Vagrantで仮想環境を起動時にDockerも自動で起動する方法

vagrant upで起動するのに合わせてdocker-composeも自動で起動して欲しいなってことで、今回の記事の内容を行いました。

docker-composeの-f付きupコマンドを使用した時に.envが適用されない時の対処法

vagrantなどで起動した時に、dockerも自動で起動したいなーと設定してみまたのですが、.envで設定されたデータが反映されずエラーが発生してしまいました。

Vue RouterでURLのqueryの更新が行われない時の対処法

queryをpushする時に、Vue RouterのisSameでqueryやparamsの変更がチェックされています。 以下のような使い方をしてしまうと、比較元と比較対象が完全に一致してしまう為、エラーが発生してしまいます。

Vue.jsで増減ボタン付き数値入力コンポーネントを実装する「vue-numeric-input」

【2020年12月】Vue.jsライブラリ記事まとめ

毎日は見てられない人向けの2020年12月のVue.jsライブラリの紹介記事まとめです。

【2021年1月】管理人のつぶやき

Vue RouterでURLのqueryの更新が行われない時の応急処置

Vue Routerで動的にURIが変更されるはずなのですが、queryの更新が行われない現象が起きました。その応急処置対応です。

Vue.jsでローディング付きのチェックボックスを実装する「vue-loading-checkbox」

vue-loading-checkboxは、チェックボックスの値が切り替わる時に、ローディングアニメーションを…

Vue.jsで電気のスイッチのようなコンポーネントを実装する「vue-rocker-switch」

vue-rocker-switchは、電気のスイッチのような見た目のスイッチボタンを実装できるコンポーネントラ…

Vue.jsでコンポーネントベースのLazy Loadを実装する「vue-clazy-load」

vue-clazy-loadは、コンポーネントベースで実装する画像のLazy Loadライブラリです。 読み込…

Vue.jsでマークダウンを使って閲覧中のセクションが分かるサイドバーを実装する「vue-markdown-it-toc」

vue-markdown-it-tocは、マークダウンで設定したテキストを表示し、ウィンドウのサイドに、今閲覧…

Vue.jsで画像にshadowをかけるコンポーネントを実装する「vue-image-shadow」

vue-image-shadowは、画像にshaddowのスタイルを適用してくれるコンポーネントライブラリです…

Vue.jsでテーブルの列移動を実装する

いつもの如くクライアントからデータ用テーブルの列を並び替えしたいとの要望がありました。 遥か昔の記憶で、Vue…

【2020年11月】管理人のつぶやき

今回からVue.jsのまとめに下に書いていた前月へのつぶやきを別途記事にすることにしました。   2…

【2020年11月】Vue.jsライブラリ記事まとめ

毎日は見てられない人向けの2020年11月のVue.jsライブラリの紹介記事まとめです。

Vue.jsで折りたたみテキストを実装する「vue-truncate-collapsed」

vue-truncate-collapsedは、特定の文字数で折りたたみテキストを実装するコンポーネントライブ…

Vue.jsでトーナメント表を実装する「vue-tournament-bracket」

vue-tournament-bracketは、トーナメント表を実装することができるVue.js用コンポーネン…

【11月30日まで40％オフ】Bootstrapの有料テンプレートが公式ネットショップで割引キャンペーン中！！

Bootsrapの有料テーマが、BLACK FRIDAYセールで、11月30日まで40％割引クーポンが提供され…

Pythonでダウンロードした画像が壊れているのはgzipのせいかも

Pythonでスクレイピングをして、画像ダウンロードのテストをしていました。 その中で、特定のサイトの画像から…

Vue.jsで本をめくるよな画像Viewerを実装する「flipbook-vue」

flipbook-vueは、まるで本をめくるように画像を切替えることができるViewerコンポーネントライブラ…

【jQuery】スクロールでdisabledを解除するイベントの実装方法

今回のサンプルは、規約を一番下までスクロールするとチェックができるようになります。 またチェックをした後に、チ…

Vue.jpで楽しくスクラッチできるコンポーネントを実装する「vue-scratchable」

vue-scratchableは、コンポーネントを楽しくスクラッチできるようにするライブラリです。 実装が簡単…

【2020年10月】Vue.jsライブラリ記事まとめ

毎日は見てられない人向けの2020年10月のVue.jsライブラリの紹介記事まとめです。

【Moment.js】Safariでdiffを使ったら値がNaNになる

MacのSafariでdiffを使うと値がNaNになってしまう現象が起きていました。 今回は、この原因と解決方…

Vue.jsでオートコンプリートを実装する「vueto-complete」

vueto-completeは、オートコンプリートを実装できるコンポーネントライブラリです。 主だった特徴とし…

JavaScriptで期間内の日数を取得する

クライアントから創業から〇〇年△△日のような表記を設定して欲しい言われました。 安易に「おかのした！」と回答し…

とても簡単で痛い？ドラッグアンドドロップをVue.jsで実装する「vue-dragula」

vue-dragulaは、ドラッグアンドドロップを実装するコンポーネントライブラリです。

Vue.jsでボトムアップ形式のmarqueeを実装する「vue-list-marquee」

vue-list-marqueeは、ボトムアップ形式のmarqueeを実装できるコンポーネントライブラリです。…

【AFFINGER】AMPエラー”属性「loading」はタグ「amp-img」で使用できません。”の対処法

Google Search ConsoleにAMPエラーが表示された   定期的にGoogle Se…

Vue.jsでanimate.cssのtransitionsを実装する「vue2-transitions」

vue-sticky-bubbleは、マウスでドラッグして移動させることができるフロートスティッキーコンポーネ…

Vue.jsでなめらかなアコーディオンを実装する「vue-collapse-transition」

vue-collapse-transitionは、Vueトラジッションを使用して垂直・水平の向きに展開するなめ…

【2020年9月】Vue.jsライブラリ記事まとめ

毎日は見てられない人向けの2020年9月のVue.jsライブラリの紹介記事まとめです。

Vue.jsでHighchartsを実装する「vue-highcharts」

vue-highchartsは、SVGベースのチャートが実装できるコンポーネントライブラリです。 データはJS…

Vue.jsでTwitterのいいねボタンのようなアニメーション付きボタンを実装する「VueStar」

VueStarは、FontAwesomeや画像などをTwitterのいいねボタンのようなアニメーション付きボタ…

Vue.jsでドラッグして移動できるフロートスティッキーコンポーネントを実装する「vue-sticky-bubble」

vue-sticky-bubbleは、マウスでドラッグして移動させることができるフロートスティッキーコンポーネ…

Vue.jsでガントチャートを実装する「gantt-elastic」

gantt-elasticは、ガントチャートを実装できるコンポーネントライブラリです。 折りたたんだり、アロー…

Vue.jsでYouTubeのようなローディングバーを実装する「vue2-loading-bar」

vue2-loading-barは、YouTubeのようなローディングバーを実装するコンポーネントライブラリで…

Vue.jsでマルチセレクトリストボックスを実装する「vue-multi-select-listbox」

vue-multi-select-listboxは、2つのセレクトリストボックスの中身をそれぞれのボックスに入…

【2020年8月】Vue.jsライブラリ記事まとめ

毎日は見てられない人向けの2020年8月のVue.jsライブラリの紹介記事まとめです。

Vue.jsで国際電話の入力補助する「vue-tel-input」

vue-tel-inputは、国際電話の入力補助するコンポーネントライブラリです。

Vue.jsで配置図を実装する「vue-dag」

vue-dagは、Vue.jsを使って配置図を実装するコンポーネントライブラリです。

Vue.jsでCookieを操作する「vue-cookies」

vue-pgnは、チェスゲームを閲覧するためコンポーネントライブラリです。 chess.jsを内部で機能させて…

Vue.jsで@メンション、#ハッシュ、URLにハイライト表示をする「vue-highlights」

vue-highlightsは、入力したテキストの＠メンション、＃ハッシュ、URLにハイライトさせるライブラリ…

Vue.jsでチェスゲームを閲覧するためのライブラリを実装する「vue-pgn」

vue-pgnは、チェスゲームを閲覧するためコンポーネントライブラリです。 chess.jsを内部で機能させて…

Marqueeタグのようなスクロールアニメーションを実装する「vue-marquee-text-component」

vue-marquee-text-componentは、Marqueeタグのようなスクロールアニメーションを実…

Vue.jsでスクロールしてもついてくるスティッキー要素を設定する「vue-sticky」

vue-stickyは、画面をスクロールした際に、指定した箇所に要素が固定されてついてくるdirectiveラ…

Vue.jsでTwitterのような文字数カウントサークルを実装する「vue-twitter-counter」

vue-twitter-counterは、Twitterのような文字数をカウントして更新する円状のプログレスバ…

【8月7日まで最大40％オフ】Bootstrapの有料テンプレートが公式ネットショップで割引キャンペーン中！！

便利だけどダサいと言われるBootstrapですが、公式が提供している有料テンプレートはメチャクチャかっこいい…

Vue.jsでスクロールの進行状況プログレスバーを実装する「vue-read-progress」

vue-read-progressは、ページのスクロールの進行状況をプログレスバーで表示できるコンポーネントラ…

【2020年7月】Vue.jsライブラリ記事まとめ

毎日は見てられない人向けの2020年6月のVue.jsライブラリの紹介記事まとめです。

MAMP PRO でMySQLが起動できない時の対処法

MAMP PRO のMySQLの起動時に「Please read "Security" section of …

Vue.jsでカスタムViewPortを定義する「vue-viewports」

vue-viewportsは、カスタムViewPortを定義するライブラリです。 viewportの幅をmat…

Vue.jsでシンプルなオートコンプリートドロップダウンを実装する「vue-simple-search-dropdown」

vue-simple-search-dropdownは、検索機能が付いたオートコンプリートドロップダウンのコン…

Vue.jsでTwitterのような投票システムを実装する「vue-poll」

vue-pollは、Twitterのような投票システムコンポーネントライブラリです。 投票をしなくても結果を確…

Vue.jsで軽量、シンプルなスムーススクロール実装する「vue2-smooth-scroll」

vue2-smooth-scrollは、vue-smooth-scrollから拡張された軽量、シンプルなスムー…