開発メモ

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

JS/CSS/HTML

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(サーバサイドやデスクトップ向け)の仕様を定めるためのプ…

Node.js のアップデート

Windows 7 で node.js をアップデートする方法を書きます。 アップデート方法 既存の node.js をアンインストールして、新しい node.js をインストールすれば大丈夫そうです。 手順1. アンインストール コントロールパネルの「プログラムのアンインストール…

JSON と JavaScript オブジェクトの違い

JSON と JavaScript オブジェクト について、プロパティ名(キー)の違いを書いています。 JSON JSON のプロパティ名は、引用符で囲んで表現します。 { "name": "太郎", "age": 42, "isAdmin": false } JavaScript オブジェクト 引用符で囲んでも囲まなくて…

JavaScript:ランダム整数値の取得

JavaScript でランダム整数値を取得する方法を書いていきます。 次のように書くと、0 ~ n のランダム整数値が取得できます。 var num = Math.floor(Math.random() * (n + 1)); 応用編 配列からランダムな値を取りたい場合、次のように書くことができます。 …

JavaScript:即時関数

即時関数とは、定義した関数をすぐ使う書き方です。関数を () で囲んで、その後に (); を書くと、囲んだ関数が実行されます。 構文としては、次のような感じになります。 (function() {...} )(); 例1. 引数なしの即時関数 (function() { var x = 10, y = 20;…

gulp:ブラウザのリロード自動化2

前回記事「gulp:ブラウザのリロード自動化」では、HTML や CSS が更新されたら、自動でブラウザをリロードする方法を書きました。今回は、コマンドライン引数で HTML を指定できるようにします。 前提 今回のコードを実行するには、前回記事の環境・コード…

gulp:ブラウザのリロード自動化

HTML や CSS が更新されたら、自動でブラウザをリロードする方法を書きます。今回は、Node.js のパッケージ Gulp を使ってみます。 環境 次のプロダクトがインストールされている必要があります。 Node.js Gulp(グローバル) Gulp(グローバル)は、Node.js…