この記事では、JavaScriptの.nextElementSiblingを使って、ユーザーがクリックしたアイテムの直後に位置する要素を操作することで、スムーズな開閉アニメーションと画像のロードを実現します。 簡潔なコー ...
DUB DESiGNはデザインをテーマにしたメディアです。 デザインのHow-to、メソッドなどデザインの基本にまつわるお話や、仕事術の話を中心に、デザインと仕事を楽しむすべての方を対象に記事を配信しています。
JavaScriptのDate().toLocaleString()で現在時刻を取得して要素に追加
JavaScriptの .addEventListener のクリックトリガーと、Date().toLocaleString() の日時取得をして、最後に指定したブロックに要素を追加します。 スニペット自体は単独で使うこ ...
Node.jsのExpress+Socket.IOを使ってチャットアプリを作る
今回は、Node.jsにExpressのフレームワークとSocket.IOのライブラリをインストールして「チャットアプリ」を作ってみます。 かなり自分への備忘録的な内容が多い記事内容ですが、是非最後までお付き合いいただけ ...
ConoHa VPSにNode.js公式チュートリアルで作ったフォルダ・ファイルでHello Worldしてみる
前回、Node.jsの公式チュートリアルで作った「Hello World」を表示させるファイル・フォルダを、ローカルではなく、ConoHa VPSにデプロイして「Hello World」と表示させてみます。 ConoHa ...
Conoha VPSにVSCodeのプラグイン「Remote – SSH」でSSH接続
今回は、ConoHa VPSにVSCodeでSSH接続して、フォルダやファイルをいじれるよう設定します。 実際設定してみてすごく便利になったので、ConoHa VPSを使っているなら是非設定しておきましょう。 目次Rem ...
Conoha VPSにVSCodeのプラグイン「Remote – SSH」でSSH接続
今回は、ConoHa VPSにVSCodeでSSH接続して、フォルダやファイルをいじれるよう設定します。 実際設定してみてすごく便利になったので、ConoHa VPSを使っているなら是非設定しておきましょう。 目次Rem ...
前回で、ローカルのNode.js環境構築ができたので、今回はNode.js公式チュートリアルを見ながら「Webサーバーの構築」をやってみます。 前回の記事同様、周辺の知識も学びながら記事にしていった為、全体的に備忘録的な ...
JavaScriptの.classList.add()でクリックすると表示が変わる申込ボタン
そんなに難しい処理をJavaScriptでさせるのではなく、クリックでclassを付け替えで表示を変えるだけの簡単な処理内容です。 是非参考にしてみてください。 目次.classList.add()クリックすると表示が変 ...
JavaScriptの.hasAttribute()でalt属性のない画像にalt属性を追記
alt属性は、アクセシビリティを考慮して画像が表示されない場合に代替テキストとして表示されたり、Googleの画像検索に登録する為に必要だったりと、重要な属性です。 この記事では、JavaScriptの .hasAttr ...
JavaScriptの.innerHTMLでaタグをクリックで画像をダウンロード
今回は、複数の要素にHTMLの download属性をJavaScriptで追加をして、クリックしたら画像をダウンロードできるボタンを作ってみます。 要素同士の距離が近い場合には、この記事のようなコードを書く必要はないと ...
Node.jsのローカル環境構築で使うターミナルのコマンドまとめ
ターミナルに不慣れな私が、macのターミナルに色々入力していき、Node.jsの環境を構築します。 周辺の知識も学びながら記事にしていった為、全体的に前置きも長く、結果備忘録的な内容なのはご容赦ください。 目次Node. ...
JavaScriptのライブラリQRious.jsで任意の文字列をQRコードで出力 [canvasとpngファイルを出力]
QRコードをWebで生成して何かに使うことはあまりありませんが、jQuery不要のネイティブなJavaScriptで簡単にQRコードを作れるライブラリがあるので、そのご紹介です。 ライブラリを中心として、カスタマイズも容 ...
ConoHa VPSでインスタンス構築 〜第5章:ポートの設定とイメージ保存編〜
今回は、デフォルトでは「全て許可」のポートを指定ポートに変更し、最後に設定したサーバーの内容をまるっと保存する「イメージ保存」をします。 ConoHa VPSのスタートアップガイドの設定は、あともう少しで完了です。 目次 ...
ConoHa VPSでインスタンス構築 〜第4章:一般ユーザーを追加して公開鍵認証でSSHログイン編〜
ここでは、新たなユーザーを作成し、そのユーザーがrootユーザーとしてログインできる設定を行います。迂回する形でrootユーザーとしてログインして、管理者権限の乗っ取り・サーバー乗っ取りのリスクを下げます。 公開鍵の認証 ...
ConoHa VPSでインスタンス構築 〜第3章:macのターミナルでSSH接続編〜
今更感がありますが、macで標準で使える「ターミナル」を使ってVPSサーバーにSSH接続します。 ターミナルで、この時点で自分が使いたいNode.jsのフレームワーク「Express」をサーバーにインストールしたり、いろ ...
ConoHa VPSでインスタンス構築 〜第2章:公開鍵認証を設定してセキュリティ対策編〜
VPSサーバーの申し込みが完了したら、パスワードによるログインから、セキュリティの鍵によるログインに変更します。 以下、ConoHa VPSのスタートアップガイドの「サーバーの基本操作と、サーバーの初期設定」の中で、「公 ...
ConoHa VPSでインスタンス構築 〜第1章:サーバーの申し込みと初期設定編〜
唐突ですが、バックエンドやLinuxの知識が皆無の私が、ふと「Node.js」をいじってみようと思い、VPSサーバーを使ってみます。 ちょっと無謀な感じもしますが「ググればなんとかなる」精神で、今回はVPSサーバーの C ...
JavaScriptのfor文のループとcheckedでチェックボックスの全選択・全解除
設定画面やアンケートフォームなどで見かける「チェックボックス」。さまざまな用途で使うことができ、HTMLのみでも大枠できてしまうので、便利です。 今回はそんなチェックボックスで、「チェックボックスの全選択・全解除」をJa ...
JavaScriptの.scrollYで背景のパララックスエフェクト
パララックスエフェクトを実装する時、JavaScriptのライブラリを使えば複雑なものも簡単に実装が可能です。 が、シンプルなものならJavaScriptのコードだけで実装が可能なので、今回はシンプルな「背景のパララック ...
JavaScriptの.scrollHeightでコンテンツをもっと見る・閉じるで開閉
以前作った「ボタンをクリックしてコンテンツを展開」するスニペットでは、展開した後に任意で閉じることはできない使用でしたが、この記事ではもっと見る・閉じるを任意でできるようにしてみます。 是非、参考にしてみてください。 目 ...
JavaScriptのライブラリVanta.jsでインタラクションな背景アニメーション
JavaScriptのライブラリ「Vanta.js」は、少し違った背景アニメーションを使う場合にピッタリです。 実装も簡単なので、是非最後までご覧いただけると嬉しいです。 目次Vanta.js使用方法Vanta.jsを使 ...
JavaScriptのdocument.cookieでフォントサイズを変更してページ遷移しても状態を保持
アクセシビリティ対策で、フォントサイズの変更をネイティブなJavaScriptで実装してみます。 アクセシビリティ対策のフォントサイズを変更する機能は、WordPressならプラグインがあったりしますが、プラグインを使い ...
JavaScriptのライブラリsimplePARALLAX.jsでパララックスのスクロールエフェクト
パララックス、いいですよね。 少し平面的なデザイン・レイアウトに、パララックス効果を入れることで、「動き」と「奥行き」を出せるので、そんなことも考慮しつつ使ってみるのもオススメです。 そんな時JavaScriptのライブ ...
JavaScriptのライブラリsimplePARALLAX.jsでパララックスのスクロールエフェクト
パララックス、いいですよね。 少し平面的なデザイン・レイアウトに、パララックス効果を入れることで、「動き」と「奥行き」を出せるので、そんなことも考慮しつつ使ってみるのもオススメです。 そんな時JavaScriptのライブ ...
JavaScriptのwindow.innerHeightで右下にトップに戻るボタンを追従させて表示
JavaScriptなしでも作れるオブジェクトですが、JavaScriptの window.innerHeight を使って、少しスクロールした時に表示される「トップに戻る」ボタンを作ります。 是非、最後までご覧いただけ ...
JavaScriptのYouTube Player APIとSwiperでYouTube動画のスライダー
YouTube Player API・・。簡単にプレイヤーの設定が可能で、カスタマイズもしやすく本当便利ですよね。 今回は、そんなYouTube APIとスライダー・カルーセルUIを絡めたスニペットです。 是非、最後まで ...
JavaScriptの.indexOf()でURLを部分一致で検索して一致する場合にモーダルを表示
今回は、JavaScriptの .indexOf() の検索を使ってモーダルを表示させてみます。 比較的カスタマイズしやすく、応用させやすいメソッドなので是非最後までご覧いただけると嬉しいです。 目次.indexOf() ...
JavaScriptの.prependでページ遷移時に丸い背景が縮小していくオーバーレイを表示
ページ遷移時に、フルスクリーンで出すオーバーレイを少し丸くしてみます。 丸くするだけで、比較的大人しく、親しみやすい雰囲気を出すには向いている印象になります。 今回は、ページ遷移時に丸い背景が縮小していくオーバーレイを表 ...
「ブログリーダー」を活用して、かかかずさんをフォローしませんか?
この記事では、JavaScriptの.nextElementSiblingを使って、ユーザーがクリックしたアイテムの直後に位置する要素を操作することで、スムーズな開閉アニメーションと画像のロードを実現します。 簡潔なコー ...
フリーランスデザイナーの自由な働き方の魅力と同時に、経費管理も必要です。 この記事では、フリーランスWebデザイナーが押さえておくべき経費の基礎知識を解説します。 目次経費管理の基本必要な経費の種類確定申告と経費の関係確 ...
フリーランスのデザイナーとして成功するには、質の高い仕事を迅速に提供することが重要です。しかし、多くの駆け出しデザイナーは、制作に時間がかかりすぎて時給が低下してしまうという課題に直面します。 この記事では、自分の実体験 ...
この記事では、JavaScriptのfor (let i =) のループを使って、10問の質問の回答でスコアを出してリダイレクトをかける方法について解説しています。 比較的診断系のコンテンツで使えそうなスニペットなので、 ...
JavaScriptの .addEventListener() を使ってボタンクリックで画像を切り替えするのと同時に、JavaScriptのループを使って「どのボタンが現在アクティブなのか?」を視覚的に切り替えます。 応 ...
JavaScriptのFileReader APIを利用して、CSVファイルを読み込み、その内容をHTMLテーブルとして表示する方法について解説します。 特に FileReader.readAsText() メソッドの使 ...
WordPressのようなエディタで、ヘッダータグ(h1〜h6)とその中の要素をグループ化しようと思うと、HTMLタグで書く必要があったりと、なかなか不便なケースがあります。 この記事では、そんなヘッダー間の要素を自動的 ...
この記事では、ラジオ・チェックボックスの選択することで、動的に価格が更新される見積もりフォームの作成について解説しています。 HTMLでフォームのレイアウトを作り、JavaScriptでユーザーの選択に応じて価格を算出、 ...
LPのようなウェブサイトの最適化を図るための一つの手法で、A/Bテストがあります。 今回は、JavaScriptのsessionStorageを活用して、ランディングページのABテストを実装する方法を紹介します。 特に、 ...
ニュースティッカーは、短いテキスト情報をスクロール表示するUI要素です。 ウェブページやテレビ画面などでよく見られ、ニュースの見出しや重要な情報を短いテキストで表示し、一定の時間間隔で順次切り替えて表示します。 今回は、 ...
今回は、JavaScriptの.offsetHeight プロパティを使って、ページ最下部に到達した時にモーダルを表示させてみます。 カスタマイズもしやすく、コード自体も簡単な内容なので、是非チェックしてみてください。 ...
今回は、JavaScriptの.getAttribute() でYouTube動画をモーダルで再生させます。 比較的、HTMLは簡素でメンテしやすい形で作っているので、最後までご覧いただけると嬉しいです。 目次.getA ...
今回は、.clipboard.writeText() メソッドを使って、指定タグをクリックでURLをコピーするコードについて解説します。 目次.clipboard.writeText()指定タグをクリックでURLをコピー ...
この記事では、ターミナルからMySQLにログインして「データベースを見る」ための基本的なコマンドについて紹介します。 MySQLを見るまでの、ログイン方法・データベースの一覧表示・テーブルの内容表示・ログアウトのコマンド ...
ファイルを選択 PDFに変換 変換したPDFをダウンロード
今回は、BtoBの申し込みフォーム・資料ダウンロードフォームでよく見る「離脱防止」で表示されるモーダルをJavaScriptで作ってみます。 関連記事 モーダルの基本的な使い方とデザイン モーダルは、強制力が強くユーザー ...
「外部からWordPressにアクセスすることができる」WP REST APIを使って、この記事では検索を作ってみます。 デフォルトで使える「WordPressの代替え」にも使えるので、最後までご覧いただけると嬉しいです ...
シナリオ型のチャットボットは、ユーザーの選んだ質問の選択肢に対して、あらかじめ決められた回答を返してくれるボットで、よくECサイトで見かけます。 今回の記事では、そんなシナリオ型のチャットボットの作り方とコピペ用コードに ...
シナリオ型のチャットボットは、ユーザーの選んだ質問の選択肢に対して、あらかじめ決められた回答を返してくれるボットで、よくECサイトで見かけます。 今回の記事では、そんなシナリオ型のチャットボットの作り方とコピペ用コードに ...
簡単にWordPressへチャットボットを導入できる「Chatbot with IBM Watson」のようなプラグインがあります。今回の記事では、そんなプラグインを使わずに、WordPressへ「チャットボット」を導入 ...
ファイルを選択 PDFに変換 変換したPDFをダウンロード
今回は、BtoBの申し込みフォーム・資料ダウンロードフォームでよく見る「離脱防止」で表示されるモーダルをJavaScriptで作ってみます。 関連記事 モーダルの基本的な使い方とデザイン モーダルは、強制力が強くユーザー ...
「外部からWordPressにアクセスすることができる」WP REST APIを使って、この記事では検索を作ってみます。 デフォルトで使える「WordPressの代替え」にも使えるので、最後までご覧いただけると嬉しいです ...
シナリオ型のチャットボットは、ユーザーの選んだ質問の選択肢に対して、あらかじめ決められた回答を返してくれるボットで、よくECサイトで見かけます。 今回の記事では、そんなシナリオ型のチャットボットの作り方とコピペ用コードに ...
シナリオ型のチャットボットは、ユーザーの選んだ質問の選択肢に対して、あらかじめ決められた回答を返してくれるボットで、よくECサイトで見かけます。 今回の記事では、そんなシナリオ型のチャットボットの作り方とコピペ用コードに ...
簡単にWordPressへチャットボットを導入できる「Chatbot with IBM Watson」のようなプラグインがあります。今回の記事では、そんなプラグインを使わずに、WordPressへ「チャットボット」を導入 ...
パララックスエフェクトは、通常のウェブページと比べて動的な印象を与えることができます。 中でも、背景画像を用いたパララックスエフェクトは、コンテンツの重要性を強調して、ウェブページの視覚的な魅力を高めることができます。 ...
noindex,nofollowを正しく設定して、検索結果での表示の仕方や、クローラー(検索エンジンのロボット)の動きを制御します。 今回は、デザインリニューアル時や、テストと本サイトのコンテンツが一致してしまう時に使え ...
Googleのマテリアルデザインでも登場する「snackbar」は、1つだけアクションを持つことができるUIで、インタラクションなUI設計で、自分も使ったりします。 似たようなUIに「toast」がありますが、「toas ...
WordPressで記事の複製は、プラグインの「Yoast Duplicate Post 」や、「Duplicate Post」が有名で、公開済みの記事や下書きとして保存してあるページを元に、複製した記事を作成できます。 ...
プログレスバーは、ユーザーが長い時間を要するタスクの進行状況を視覚的に把握でき、邪魔にもならずユーザーの体験を向上することができます。また、待ち時間のストレスも軽減できます。 今回は、そんなプログレスバーをsetInte ...
今回は、Javascriptの screen プロパティで、使用しているモニターのサイズを取得して、ブラウザの上部にアラートで上部に表示させます。 目次screenモニターのサイズを取得してアラート表示するサンプル実装の ...
今回は、初回アクセス時にローディングアニメーションを表示させます。 この記事は、以前jQueryで書いたコードをネイティブなJavaScriptに書き直しているものなので、上記の記事のjQueryのコードも一緒に参考にし ...
モーダルのように、ユーザーに「開く・閉じる」行動を矯正させることなく、もっとライトにメッセージを表示させたい時は toast(トースト)があります。 この記事ではそんな toast UIをJavaScriptの .set ...
WordPressで簡単に記事一覧を表示できる query_posts() のメインクエリ。 query_posts()のメインクエリは現在非推奨となっていますが、メインクエリのカスタマイズについて解説します。 メインク ...
table タグで書かれた一覧表に、ソートをかけるライブラリをよく見かけます。 が、汎用的にソート機能を追加したいときに使えるスニペットを作ってみました。 是非、参考にしてみてください。 目次.addEventListe ...
今回の記事は、以前作成した以下UIをベースに「よりユーザーフレンドリーな動き」をJavaScriptで付けます。 と言っても、メニュー要素外をクリックした時にメニューが閉じるだけなのですが、これだけでユーザーの体験が変わ ...