Web系開発メモ

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

2018-01-01から1年間の記事一覧

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

PowerShell:Zip作成時のダイアログ

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

Ubuntu16:nkfのインストール

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

Ubuntu16:zip・unzipのインストール

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

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