Electron,HTML/CSS,Windows,プログラミング

こんにちは、しきゆらです。
今回は、最近遊んでいるElectronで詰まったところをメモしておきます。

Electronとは、というところはググればいろいろ出てくるのであまり書きません。
個人的には、Webの技術でデスクトップアプリを作れる便利ツールという認識です。

さて、まずcontextBridgeとは何ぞや、というところですが、私もちゃんと触り始めたのは最近なので詳しくはないので書きません。
(というか、書けません)
詳しくは公式ドキュメントあたりを見てくださいな。
https://www.electronjs.org/docs/api/context-bridge
https://www.electronjs.org/docs/tutorial/context-isolation

個人的理解では、レンダラープロセスからNode関連を使うために、扱える範囲を絞るための機能というイメージです。

では、contextBridge経由でAPIを公開するところで詰まったところと、解決方法をメモしていきます。

なお、実行環境等は以下の通り。

  • OS: Ubuntu 21.10 on WSL2
  • electron: 13.1.7
  • webpack: 5.45.1

HTML/CSS,Ruby,環境構築

こんにちは、しきゆらです。

今回は、HTMLのメタ言語であるSlimに触れてみます。

 

これまで、素のHTMLを書いていました。

HTMLは〈〉をたくさん書くのが面倒であったり、

構造の変更や少し複雑な要素を作る時はとても不便なことが多くありました。

 

しかし、調べてみると便利なものがたくさんありました。

今回出てくる「メタ言語」と言うものです。

 

メタ言語

簡単に言えば、ある言語を書くために

  • 少しだけ機能を拡張
  • 書きやすい構文
  • もとの言語に変換可能

という特徴を持つものです。

 

有名なものでは、CSSに対するSassがメタ言語に当たります。

Slimの他にも様々なものがあります。

  • pug: JS製。昔はJadeという名前だった。
  • ERB: Rubyの標準添付。特にインストールしなくても使える。
  • Haml: Ruby製。Slimとほぼ同じ機能を持つ。
  • Slim: Ruby製。今回触る。

 

今回は、HTMLのメタ言語の一つであるSlimを触っていきます。

 

Electron,HTML/CSS,JavaScript,プログラミング

こんにちは、しきゆらです。

今回は、ElectronでHello Worldを作って遊びたいと思います。

 

前回Electronのことを書いてからすでに半年以上経っていますね。

どうしても、環境構築するだけで満足してしまう部分があります・・・。

環境構築が一番楽しいと思うのですがどうでしょうか。

 

さて、では作っていきます。

HTML/CSS,JavaScript,プログラミング

こんにちは、しきゆらです。

急に暑くなってきた今日この頃、いかがお過ごしでしょうか。

 

今回は、HTMLのお話です。

 

HTMLのformタグで、エンターを押した時に送信したい、という場面になりました。

しかも、送信する部分に関してはJSでコードを書いていました。

例としては、以下のような感じ。

<form>
  <label for="user_id">ユーザID:</label>
  <input type="text" id="user_id" name="user_id">
  <button type="button" onclick="login()">ログイン</button>
</form>

ユーザ名IDを入力してもらい、ボタンを押すと入力された情報をサーバへ送りログイン処理を行う、というもの。

これを、エンターを押した時も同じように処理してほしい、というのが今回の話。

 

サーバサイドのスクリプトも自分で書いていたので、HTMLのsubmitに合わせてデータを取得できるようにすればいいんですが、面倒だったのでlogin関数でなんとかできないかな、と思っていました。

結論としては、formタグに「onsubmit="return login();"」と書き込んで、

login関数で 「return false;」とすれば解決でした。

<form onsubmit="return login();">
    <label for="user_id">ユーザID:</label>
    <input type="text" id="user_id" name="user_id">
    <button type="button" onclick="login()">ログイン</button>
</form>
function login(){
  // なんらかの処理
  return false;
}

onsubmitは、onclickのように関数名を渡せばいいんだと思っていましたが、違うようですね。

onsubmitは、関数等の処理を返す必要があるようです。

 

ただ関数がreturnすればいいのではなく、その値をさらにリターンするイメージですかね。

参考:onsubmitの戻り値をfalseにしてsubmitを実行しない(中断させる)方法 – 小粋空間

 

また、テキストボックスの数によっても挙動が異なるようです。

参考:【HTML】入力欄が1つだけのフォームはEnterキー押下でsubmitされる。submitボタンがなくても。 – SOFTELメモ

 

知らないことがたくさんありますね。

今回はここまで。

おわり。

HTML/CSS,JavaScript,プログラミング

こんにちは、しきゆらです

タイトル通り要素のテンプレートを作るためのタグの存在を知ったためメモしていきます

 

これまでは、特定のタグをテンプレートとして利用するときは

CSSでdisplay:noneとかをかけて見えなくしておいた要素をelement.cloneNode()で複製していくスタイルでした

 

そんな中、HTML5から追加された(?)templateタグというものを見つけました

これの使い方や、他の方法との速度の差などをまとめていきます

 

HTML/CSS,JavaScript,プログラミング

こんにちは、しきゆらです

今回は、inputやtextarea等でユーザの入力をリアルタイムに取得する方法をメモ

 

入力されたことを取得するイベントトリガー(?)としてchangeは知ってましたが

これは入力されたあと、フォーカスが外れた時に発火するため

入力された時点で何かしたい時には使えませんでした

 

その中で、リアルタイムに入力を取得するためのトリガーとしてinputというものがあることを知りました

参考:JavaScript:テキスト入力関連のイベント、onChange,onInput,onKeyUp – hacknote

これを利用すれば、例えば入力がある時だけボタンをクリックできるようにするときなど二利用できると思います

 

これを利用せず、頑張ってJSで自分で作るときはきっとこんな感じになるのでは・・・?

今回はこれだけ
おわり

HTML/CSS,JavaScript,プログラミング

こんにちは、しきゆらです

絶賛ブログ更新期間中ですよ、奥さん

 

タイトルから内容がわかるのかな・・・?

JavaScriptからHTML要素にCSSクラスを複数指定する方法を知ったのでメモ

HTMLに指定するクラスは、CSSクラスと表記します

JSで定義するオブジェクト的な意味でのクラスとは区別するため

 

CSSクラスを一つだけ指定するなら

element.className = "hoge";

でelementにhogeというCSSクラスを指定したことになります

しかし、

element.className = "hoge";
element.className = "fuga";

とするとhogeではなくfugaが指定された状態になってしまいます

<element class="hoge fuga">こんな要素はないよ</element>

という形にする場合は

element.classList.add("hoge");
element.classList.add("fuga");

とすると良いようです

 

なお、CSSクラスを削除する場合は

element.classList.remove("hoge");

とするとCSSクラスを削除できます

 

合わせて

element.classList.toggle("hoge");

とするとelementにhogeというCSSクラスが指定されている場合は削除し、そうでない場合は追加する

ということが可能です

 

これを見つけるまでにかなりの時間を要しました・・・

知っていればすぐなのにね

 

おわり

HTML/CSS,JavaScript,プログラミング

こんにちは、しきゆらです

タイトルでは何を書きたいのかわからないかもですが・・・

 

JSでDOMオブジェクトを作る「document.createElement()」ですが

これでinputタグを作るとき、typeを指定しないとtextとして扱われるようです

 

そして、このinputタグにCSSを適用するために

input[type="text"] {
    border: none;
}

のような、inputタグのtypeに対してCSSを適用しても何も変化しませんでした

 

どうも、createElementで作成したinputをtype="text"として表示するのは

ブラウザ側が空気を読んで表示しているだけで

内部的には何も設定されていないことが原因のようです

 

なので、createElementでinputタグを作る時は

必ずtypeを指定しましょうね

・・・というお話でした

おしまい

 

HTML/CSS,プログラミング

こんにちは、しきゆらです

HTML5関連投稿の5回目です(これまでのHTML5関連の記事はこちらから→入門HTML5

入門 HTML5
前回はCanvasでのグラデーションを見てみました

今回は、Canvasで画像を表示する方法を見てみます

HTML/CSS,プログラミング

こんにちは、しきゆらです

HTML5関連の記事は4回目となりますね

入門 HTML5

前回は、Canvasにグラフを作ってみました(今までのHTML5関連の記事はこちら→HTML5関連

今回は、Canvasでのグラデーションについてまとめて行きます