開発メモ

Webアプリ(Java, JS, CSS, HTML)や、ゲーム(Unity, C#)のことなどを書いてます。

JS/CSS/HTML

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文字をにじまないようにする方法は見つかっていません。 比較 メイリオを使って比較…

JS:JSONのプロパティ存在チェック

JavaScript で、JSON のプロパティが存在するかチェックする方法を書いていきます。 例 サンプルのコードは以下の通りです。 <html> <head><meta charset="utf-8" /></head> <body> <script> check({}); check({"name": "Tom"}); function check(json) { if ('name' in json) console.log('name有り。'); else console</script></body></html>…

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以降: フィードが取得できるようにな…

JS:クロスドメインとiframe

Webページ(JS)から、違うドメインの XML(RSS フィード)を取得したいことがありました。そこで、iframe で別ドメインの XML を取得して、その内容を操作できないか検証してみました。 検証結果 結果としては、エラーが発生して無理そうでした。 エラー内…

Vanilla.js 入門

JavaScript のことを調べていたら、Vanilla JS というものに出会いました。なかなか興味深かったので、これから Vanilla JS についてまとめていこうと思います。 Vanilla JS はジョーク Vanilla JS は、速くて軽い JavaScript フレームワークとして紹介され…

npm コマンドのメモ

最近よく使う npm のコマンドと、その処理内容を書いていこうと思います。 init > npm init プロジェクト情報の入力を対話形式で始める。 入力した情報は package.json に保存される。 install パッケージ名 --save > npm install --save パッケージ名 アプ…

JS:mustache.js 入門

mustache.js は、テンプレートエンジン「mustache」の JavaScript 実装です。mustahce の特徴の1つは、logic-less なところです。 これから、mustache.js の使用例を書いていこうと思います。 例1:Quick Example 最後の script タグで、Mustache.render(t…

JS:CommonJS と Modules の概要

JavaScript の CommonJS と Modules といった仕様が気になって、少し調べてみました。今回は、その調査内容をまとめていこうと思います。 CommonJS の概要 CommonJS とは、ブラウザ外の JavaScript(サーバサイドやデスクトップ向け)の仕様を定めるためのプ…