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と併用） モーダルダイアログの代替 等々、になるの…

Windows の PowerShell で Zip を作成していたら、コマンドプロンプトの上に青いダイアログ（通知のような表示）がちらつくことがありました。その画面ハードコピーを取得できたので、忘れないようにメモっておきます。 Zip 作成方法 ダイアログ（通知）が表…

Ubuntu16 に、nkf をインストールする方法を書いていきます。 ※ 動作確認は、Windows にインストールした Ubuntu16（WSL：Windows Subsystem for Linux）で行っています。 1. インストール apt を使ってインストールします。 $ sudo apt install nkf 最近は…

Ubuntu16 に zip と unzip をインストールする方法を書いていきます。 ※ 動作確認は、Windows にインストールした Ubuntu16（WSL：Windows Subsystem for Linux）で行っています。 前提 apt を使ったインストール方法になります。最近だと apt-get より apt …

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 でフィードが取得できなくなったことがありました。も…