- 1. HTMLのiframeでfocusする／しないで枠の色を変える（FireFox版）
- 2. HTML&JavaScript – Drag&Dropでファイルを読み取るまでの解説とサンプル（バイナリビューワ）
- 3. Electron で Tray を使う（macOS, Windows）
- 4. ちょっとだけ効率を上げる .code-snippets
- 5. Redmineでダークモードを使う
- 6. RedmineのREST APIで100件以上のデータを取得する
- 7. ページ内ジャンプ
- 8. DOM操作を合言葉で理解しよう
- 9. Canvas APIでクマを描いてみる
- 10. Symbol from NEM や mijin Catapultで使用するアカウント関連情報まとめ
- 11. Redmine ViewCustomizeで準備して良かったもの
- 12. Spring Boot自動ログアウトの実装
- 13. React JSXの基礎知識
- 14. 【TypeScript】僕のチートシート
- 15. HTMLにおける相対パスの開発環境と本番環境での違いをなんとかする
- 16. VanillaJSでprivateな変数、メソッドを作る
- 17. JavaScriptでt分布をそれなりにコンパクトに実装してみた
- 18. 【ブックマークレット】カウントアップタイマーを右下に常に表示する
- 19. RunJSを使ってサクッとJavaScriptを実行する
- 20. async/awaitの仕組みメモ
HTMLのiframeでfocusする／しないで枠の色を変える（FireFox版）
# 目的
– HTMLでiframeでfocusするしないで枠の色を変えたいです。
– iframeを選択するCSSの`:focus`はうまくいきませんでした。
– FireFoxではうまくいきましたがsafari/chromeではうまくいっていません。
– これは自分のための備忘録です。他のブラウザでうまくいく方法があれば更新していきたいと思います。# 環境
– 以下でうまくいきました
– FireFox(81.0 (64 ビット)) / MacOS
– safari/Chromeはうまくいっていません# 参考
[【JavaScript】ウィンドウのアクティブ・非アクティブのイベント【865日目】](https://www.nyamucoro.com/entry/2020/02/25/212939)
[フォーカス: focus/blur](https://ja.javascript.info/focus-blur)# コード
– メインのHTML
– メイン側では要素の枠は消しておきます。“`{main.html}
…
bootstrapを使っています。
HTML&JavaScript – Drag&Dropでファイルを読み取るまでの解説とサンプル（バイナリビューワ）
※HTML/JavaScript/CSSは仕事では使ってないので、変なところあるかもです。まずいところあればご指摘ください。
# ファイルのDrag&Dropからデータの読み込みまでの流れ
## 1. HTMLの要素に対してイベント処理を登録する
HTML上の特定要素（ここでは``）に対して、下記のようにイベント処理を登録[^1]する。[^1]: `addEventListener`を使ってイベント処理を登録してもよい。
“`js:JavaScript
const dropZone = document.getElementById(‘dropZone’);
dropZone.ondrop = function(evt) {
/* ドロップされたときに実行する処理 */
}
dropZone.ondragover = function(evt) {
/* ドラッグされたときのお決まりの処理。（いわゆる、おまじない）
本文中の「ソースコード」章を参照ください。 */
}
“`[Drag&Drop関連
Electron で Tray を使う（macOS, Windows）
Electron の `Tray` クラスについては公式ドキュメントにも、Apple や Microsoft の公式ドキュメントにも詳細が載っていないので、悩む部分が多かったです。そこで、自分で実際に調べ、得たものも含めて、ここに書いてシェアしようと思います。
## サンプルアプリケーション
これらの `Tray` を理解する手助けとして、サンプルアプリケーションを用意しました。シンプルな３分間タイマーで、その残り時間をパーセントに変換して、`Tray` にアイコン表示するというものです。これ以降、コードを記載するときは、ここにアップロードしてある実際のソースコードから抜粋しています。
SimpleTimer – GitHub
レポジトリには、「node_modules」が含まれておりませんので、ビルドする場合はローカルに pull した後に、当ディレクトリで `npm install` コマンドを実行してから行ってください。
実際の動作を見たい場合は、アプリケーションをビルドしておきました。ダウ
ちょっとだけ効率を上げる .code-snippets
Snippetsの基本 : [Snippets in Visual Studio Code](https://code.visualstudio.com/docs/editor/userdefinedsnippets)
## annotation
“`json:foo.code-snippets
{
“annotation:comment:line”: {
“prefix”: [
“todo:line”,
“fixme:line”,
“hack:line”,
“idea:line”,
“nb:line”,
“xxx:line”,
“review:line”,
“bug:line”,
“question:line”,
“combak:line”,
“temp:line”,
“debug:line”,
“optimize:line”,
“changed:line”,
“note:line”,
“warning:line”
],
“body”: “$LINE_COMMENT $Redmineでダークモードを使う
Darkmode.Jsというプラグインを使って、Redmineをダークモード対応にしてみました。
Darkmode.Js
https://darkmodejs.learn.uno/外部JavaScriptを読み込むため、View Customize Pluginはv2.1.0以上を使用してください。
“`html