JS/CSS/HTML
JavaScript で、JSON にキー（プロパティ）が存在するか確認する方法を書いていきます。 方法 次のように書いてチェックします。 'キーの名前' in 検査対象のJSON キーが存在する場合は true、存在しない場合は false が返却されます。 例 サンプルコードは…
ハイフンが含まれる JSON のキーにアクセスして、値を取得する方法を書いていきます。 方法 角括弧を使って、下のようにアクセスします。 変数名["キー"] 以下はサンプルになります。 let msg = { "msg-id":1 }; let msgId = msg["msg-id"]; エラー例 下のよ…
CSS を使って、Webページに縦並びメニューを表示する方法を書いていきます。今回は ul, li タグを使って実装してます。 1. 画面イメージ 次のような表示になって、 マウスをホバーしたメニューはグレーで色が付きます。 2. コード例 サンプルコードは以下の…
CSS を使って、Webページに横並びメニュー（水平メニュー）を表示する方法を書いていきます。今回の実装方法は、clearfix という手法を使っています。 1. 画面イメージ サンプルで実装するイメージは以下の通りです。 メニューに色も付けてて、マウスをホバ…
Bootstrap と jQuery を使って、自動的にフェイドアウトするアラート（インフォメーション）を表示する方法を書いていきます。 1. イメージ ボタン info alert を押すと、画面上部に水色のアラートが表示されて、 時間がたつと徐々に薄くなって、 約５秒ほど…
CSS の max-width を使って、テキストの横幅を設定する方法を書いていきます。 画面イメージ 横幅の設定有無で、以下のように画面表示が変わってきます。 上のテキストは横幅を設定してなくて、左から右まで目で追いかけて読む感じになります。下のテキスト…
Web ページに、SNSへのシェアボタンを実装する方法を書いていきます。今回は Twitter, Facebook, Google+ を対象にしています。 ※ ボタンの実装方法だけを書いています。シェアするための処理（やリンク？）は書いていません。 1. イメージ 下のような感じの…
Bootstrap と jQuery を使って、Webページにアラート（インフォメーション）を表示する方法を書いていきます。 1. イメージ ボタン info alert を押すと、画面上部に水色のアラートが表示されて、 warn alert を押すと黄色のアラートが表示されます。 ×ボタ…
Googleフォント を使うと、Webページに珍しい文字（オシャレな文字）を表示してアクセントを加えることができます。 使いどころとしては、 ロゴの代替 ブランド名（サイト名） メニュー、見出し 等々 になるのかなぁと思っています。 CSS でフォントを読み込…
jQuery Plugin の BlockUI を使って、Webページを操作できないようにする方法を書いていきます。 使いどころとしては、 サーバー処理中とかに、ユーザーの操作を止めたい ユーザーに処理中だと伝えたい（1と併用） モーダルダイアログの代替 等々、になるの…
HTML の Canvas に文字を表示したら、少しにじんでいることに気が付きました。これから、Canvas文字と通常文字の比較画像や、比較用のコードを掲載していきます。 ※ Canvas文字をにじまないようにする方法は見つかっていません。 比較 メイリオを使って比較…
Electron を使ってみた感想を書いていきます。 ※ 自分はまだまだ Electron を使いこなせてはいないと思います。簡単なアプリを作って、Windows で実行体（exe）を生成できる程度です。 良い点 あくまで主観ですが、次のような点が良いなぁと思いました。 ク…
Electron を使ってたら、次のように括弧付き変数に代入するコードを見かけました。 const {app, BrowserWindow} = require('electron'); 今回は、この表現について調べたことをまとめていきます。 動作内容 上のコードは下のコードと同じような動きになるみ…
Electron で開発していて、レンダラープロセスからメインのモジュールを使いたい時がありました。これから、そのときに調べた使用方法をまとめていきます。 方法 remote を使うと、メインプロセスのモジュールを呼び出すことができます。 レンダラーのコード…
Electron を使い始めたころ、Electron 用の資源（HTML, JS）を 純粋なWebアプリでも使いたいと思ったことがありました。当初は環境に依存しないように書いてたんですが、徐々に難しくなって、JavaScript で環境を判別して分岐させるようにしました。 今回は…
JavaScript や CSSフレームワークを使わずに、モーダルを表示したいときがありました。色々と調査していたら、CSS（と HTML）だけでモーダルを表示できる Pure Css Modal というものを見つけました。 今回はそのことについて書いていきます。 画面デモ 公式…
Electron の API app.makeSingleInstance(callback) を使うと、アプリの二重起動を防げるみたいです。これからその方法について書いていきます。 コード例 メインプロセスで次のように書いていきます。 const {app, BrowserWindow} = require('electron'); l…
Electron で背景色が暗いアプリを作っていたら、アプリ起動時と画面遷移の時に画面のちらつきが発生しました。これから、画面のちらつきを抑える方法を書いていきます。 ちらつきについて アプリ起動時は、白い画面が表示されて、それから黒い画面になるので…
Electron アプリについて、画面サイズの保存方法と設定方法を書いていきます。 前提 Electron アプリは、デフォルトだとユーザがウィンドウサイズを変更できます。ただ、変更したサイズは保存されないので、メインプロセス内で保存と設定をする必要がありま…
Electron アプリをネットからダウンロードして実行すると、Windows10 の警告が出てきました。これからその内容と、アプリの実行方法についてまとめていきます。 アプリの詳細 electron-packager でパッケージングしたアプリになります。 Windows 向けのパッ…
jQuery の イベントバインド（.on, .click, 等）で、アロー関数を渡すようにしたら、this を使っているところで不具合が発生しました。 これから、そのときに調べたことなどをまとめていきます。 function の場合 アロー関数を使う前は、次のように function…
Electron のアプリを実行する方法と、Electron Packager で exeを作成する方法を書いていきます。 ブログ執筆時に使った環境は以下の通りです。 Windows10 64bit Node.js 8.9.4 npm 5.6.0 Electron のインストール Electron とパッケージングツールをグロー…
Web画面のアイコンフォントといえば Font Awesome などが有名だと思います。ただ、１個か２個のアイコンだけ使うときに、もっとサイズが軽いものはないかと調べたことがありました。 今回はそのときに見つけた、CSS だけのアイコンフォントを２つメモってお…
Webアプリ（ブラウザ）のクロスドメイン問題と、その回避方法（1. レスポンスヘッダ、2. YQL（Yahoo Query Language） ）をまとめていこうかと思います。 追記（2017.08.26） 2017年の8/24～8/30頃、YQL でフィードが取得できなくなったことがありました。も…
最近のブラウザで実装されている Fetch API を使って JSON を受信してみました。Fetch API は、XMLHttpRequest の代替として Ajax 通信ができたりします。 コード /app/hello から JSON を受け取って、 #msg のテキストを入れ替える感じで書いてみました。 <html> <head></head></html>…
2017年の8/24～8/30頃まで、YQL でフィードが取得できないことがありました。この記事は、その詳細についてまとめています。 経過 8/24頃: フィードが取得できなくなった。 8/28頃: 何回か取得できたが安定しない。 8/30以降: フィードが取得できるようにな…
Webページ（JS）から、違うドメインの XML（RSS フィード）を取得したいことがありました。そこで、iframe で別ドメインの XML を取得して、その内容を操作できないか検証してみました。 検証結果 結果としては、エラーが発生して無理そうでした。 エラー内…
JavaScript のことを調べていたら、Vanilla JS というものに出会いました。なかなか興味深かったので、これから Vanilla JS についてまとめていこうと思います。 Vanilla JS はジョーク Vanilla JS は、速くて軽い JavaScript フレームワークとして紹介され…
最近よく使う npm のコマンドと、その処理内容を書いていこうと思います。 init > npm init プロジェクト情報の入力を対話形式で始める。 入力した情報は package.json に保存される。 install パッケージ名 --save > npm install --save パッケージ名 アプ…
mustache.js は、テンプレートエンジン「mustache」の JavaScript 実装です。mustahce の特徴の１つは、logic-less なところです。 これから、mustache.js の使用例を書いていこうと思います。 例１：Quick Example 最後の script タグで、Mustache.render(t…
