Web系開発メモ

Java, C#, HTML, CSS, JavaScript のことなどを書いてます。

JS/CSS/HTML

JavaScript 親要素へのイベント伝播を防ぐ方法

ある要素のイベントが発生した時に、親要素へのイベント伝播をキャンセルする方法を書いていきます。 目次 キャンセルする方法 コード例 1. キャンセルする方法 以下のコードで、親要素への伝播を防ぐことができます。 event.stopPropagation(); 2. コード例…

CSS テキストや画像を選択できないようにする方法

CSS を使って、文字列や画像の選択を無効にする方法を書いていきます。 目次 無効にする方法 コード例 1. 無効にする方法 以下のプロパティを設定すると、マウスドラッグ等での選択が無効になります。 user-select: none; 初期値は auto のようです。 2. コ…

JavaScript ドキュメントの読込完了時に処理を実行する方法

JavaScript を使って、ドキュメントやリソース(CSSや画像など)の読み込みが完了した時に処理を実行する方法を書いていきます。 目次 実行方法 実行順序 使い分け jQueryについて 1. 実行方法 ドキュメントの DOMContentLoaded を使うと、HTMLの読み込み(D…

JavaScript 効果音を再生する方法(連続再生+音の変更)

JavaScript の Audio を使って、効果音を再生する方法を書いていきます。 目次 再生方法 連続再生について 効果音の変更方法 1. 再生方法 以下の JavaScript と MP3 を用意します。 sound-effect.js class SoundEffect { constructor() { this.keyboard = ne…

JavaScript JSONにキーが存在するかチェックする方法

JavaScript で、JSON にキー(プロパティ)が存在するか確認する方法を書いていきます。 方法 次のように書いてチェックします。 'キーの名前' in 検査対象のJSON キーが存在する場合は true、存在しない場合は false が返却されます。 例 サンプルコードは…

JavaScript JSONのキーにハイフンが含まれる場合の対処方法

ハイフンが含まれる JSON のキーにアクセスして、値を取得する方法を書いていきます。 方法 角括弧を使って、下のようにアクセスします。 変数名["キー"] 以下はサンプルになります。 let msg = { "msg-id":1 }; let msgId = msg["msg-id"]; エラー例 下のよ…

CSS:縦並びメニューの実装

CSS を使って、Webページに縦並びメニューを表示する方法を書いていきます。今回は ul, li タグを使って実装してます。 1. 画面イメージ 次のような表示になって、 マウスをホバーしたメニューはグレーで色が付きます。 2. コード例 サンプルコードは以下の…

CSS:横並びメニューの実装

CSS を使って、Webページに横並びメニュー(水平メニュー)を表示する方法を書いていきます。今回の実装方法は、clearfix という手法を使っています。 1. 画面イメージ サンプルで実装するイメージは以下の通りです。 メニューに色も付けてて、マウスをホバ…

フェイドアウトするアラートをBootstrapとjQueryで実装

Bootstrap と jQuery を使って、自動的にフェイドアウトするアラート(インフォメーション)を表示する方法を書いていきます。 1. イメージ ボタン info alert を押すと、画面上部に水色のアラートが表示されて、 時間がたつと徐々に薄くなって、 約5秒ほど…

CSS:テキストの横幅設定

CSS の max-width を使って、テキストの横幅を設定する方法を書いていきます。 画面イメージ 横幅の設定有無で、以下のように画面表示が変わってきます。 上のテキストは横幅を設定してなくて、左から右まで目で追いかけて読む感じになります。下のテキスト…

CSS:SNSへのシェアボタンを実装

Web ページに、SNSへのシェアボタンを実装する方法を書いていきます。今回は Twitter, Facebook, Google+ を対象にしています。 ※ ボタンの実装方法だけを書いています。シェアするための処理(やリンク?)は書いていません。 1. イメージ 下のような感じの…

BootstrapとjQueryでアラートを表示

Bootstrap と jQuery を使って、Webページにアラート(インフォメーション)を表示する方法を書いていきます。 1. イメージ ボタン info alert を押すと、画面上部に水色のアラートが表示されて、 warn alert を押すと黄色のアラートが表示されます。 ×ボタ…

Googleフォントを使う

Googleフォント を使うと、Webページに珍しい文字(オシャレな文字)を表示してアクセントを加えることができます。 使いどころとしては、 ロゴの代替 ブランド名(サイト名) メニュー、見出し 等々 になるのかなぁと思っています。 CSS でフォントを読み込…

jQuery BlockUI Plugin:Web画面の操作をブロック

jQuery Plugin の BlockUI を使って、Webページを操作できないようにする方法を書いていきます。 使いどころとしては、 サーバー処理中とかに、ユーザーの操作を止めたい ユーザーに処理中だと伝えたい(1と併用) モーダルダイアログの代替 等々、になるの…

HTML:Canvasの文字がにじむ

HTML の Canvas に文字を表示したら、少しにじんでいることに気が付きました。これから、Canvas文字と通常文字の比較画像や、比較用のコードを掲載していきます。 ※ Canvas文字をにじまないようにする方法は見つかっていません。 比較 メイリオを使って比較…

Electron:使ってみた感想

Electron を使ってみた感想を書いていきます。 ※ 自分はまだまだ Electron を使いこなせてはいないと思います。簡単なアプリを作って、Windows で実行体(exe)を生成できる程度です。 良い点 あくまで主観ですが、次のような点が良いなぁと思いました。 ク…

JS:括弧付き変数への代入

Electron を使ってたら、次のように括弧付き変数に代入するコードを見かけました。 const {app, BrowserWindow} = require('electron'); 今回は、この表現について調べたことをまとめていきます。 動作内容 上のコードは下のコードと同じような動きになるみ…

Electron:レンダラーからメインのモジュールを使う

Electron で開発していて、レンダラープロセスからメインのモジュールを使いたい時がありました。これから、そのときに調べた使用方法をまとめていきます。 方法 remote を使うと、メインプロセスのモジュールを呼び出すことができます。 レンダラーのコード…

Electron環境かどうかの確認方法

Electron を使い始めたころ、Electron 用の資源(HTML, JS)を 純粋なWebアプリでも使いたいと思ったことがありました。当初は環境に依存しないように書いてたんですが、徐々に難しくなって、JavaScript で環境を判別して分岐させるようにしました。 今回は…

CSSだけでモーダル表示

JavaScript や CSSフレームワークを使わずに、モーダルを表示したいときがありました。色々と調査していたら、CSS(と HTML)だけでモーダルを表示できる Pure Css Modal というものを見つけました。 今回はそのことについて書いていきます。 画面デモ 公式…

Electron:アプリの二重起動防止

Electron の API app.makeSingleInstance(callback) を使うと、アプリの二重起動を防げるみたいです。これからその方法について書いていきます。 コード例 メインプロセスで次のように書いていきます。 const {app, BrowserWindow} = require('electron'); l…

Electron:画面のちらつき防止

Electron で背景色が暗いアプリを作っていたら、アプリ起動時と画面遷移の時に画面のちらつきが発生しました。これから、画面のちらつきを抑える方法を書いていきます。 ちらつきについて アプリ起動時は、白い画面が表示されて、それから黒い画面になるので…

Electron:ウィンドウサイズの保存と設定

Electron アプリについて、画面サイズの保存方法と設定方法を書いていきます。 前提 Electron アプリは、デフォルトだとユーザがウィンドウサイズを変更できます。ただ、変更したサイズは保存されないので、メインプロセス内で保存と設定をする必要がありま…

Electron:アプリ実行時の警告(windows, exe)

Electron アプリをネットからダウンロードして実行すると、Windows10 の警告が出てきました。これからその内容と、アプリの実行方法についてまとめていきます。 アプリの詳細 electron-packager でパッケージングしたアプリになります。 Windows 向けのパッ…

jQuery:アロー関数とthisの注意点

jQuery の イベントバインド(.on, .click, 等)で、アロー関数を渡すようにしたら、this を使っているところで不具合が発生しました。 これから、そのときに調べたことなどをまとめていきます。 function の場合 アロー関数を使う前は、次のように function…

Electron:アプリの実行とexe作成

Electron のアプリを実行する方法と、Electron Packager で exeを作成する方法を書いていきます。 ブログ執筆時に使った環境は以下の通りです。 Windows10 64bit Node.js 8.9.4 npm 5.6.0 Electron のインストール Electron とパッケージングツールをグロー…

CSSだけのアイコンフォント

Web画面のアイコンフォントといえば Font Awesome などが有名だと思います。ただ、1個か2個のアイコンだけ使うときに、もっとサイズが軽いものはないかと調べたことがありました。 今回はそのときに見つけた、CSS だけのアイコンフォントを2つメモってお…

JS:クロスドメインとYQL

Webアプリ(ブラウザ)のクロスドメイン問題と、その回避方法(1. レスポンスヘッダ、2. YQL(Yahoo Query Language) )をまとめていこうかと思います。 追記(2017.08.26) 2017年の8/24~8/30頃、YQL でフィードが取得できなくなったことがありました。も…

JS:FetchAPIでJSONを受信

最近のブラウザで実装されている Fetch API を使って JSON を受信してみました。Fetch API は、XMLHttpRequest の代替として Ajax 通信ができたりします。 コード /app/hello から JSON を受け取って、 #msg のテキストを入れ替える感じで書いてみました。 <html> <head></head></html>…

解決済:YQLでフィードが取得できない

2017年の8/24~8/30頃まで、YQL でフィードが取得できないことがありました。この記事は、その詳細についてまとめています。 経過 8/24頃: フィードが取得できなくなった。 8/28頃: 何回か取得できたが安定しない。 8/30以降: フィードが取得できるようにな…