鱧技術

hamo_daisukiの技術メモ

いまさらですが Electron Fiddle を触ってみた

フロントエンドがとっても苦手

個人的にフロントエンドの作成がとても苦手です。練習用に、枯れ切っており資料も多い Electron を使ってみようと思いました。

いまさらですが、Electron は Wikipedia ではあっさり紹介されてます。枯れ切ってますね。

練習用の開発環境は Electron Fiddle も簡単でおすすめ

言語の練習するときに、一番最初につまづきやすいのが開発環境の構築です。とりあえず構築してみたんですが、わりと面倒だったので Electron Fiddle に乗り換えました。ダウンロード-->解凍-->起動 で構築終了します

  • プロジェクトディレクトリの構築も「別名で保存」するだけで終わる
  • デフォルトのスクリプトも、特に意識せずに終わる
  • ローカル環境でのパブリッシュもボタン一つで終わる
  • Electron のバージョンの使い分けも、マウスポチポチで終わる

など、小難しいことはせず練習用に使いたいだけなら十分な環境がサクッと作れました

で、何作ったの?

タブレット用のテンキー & 1ラインディスプレイとか作ってみました
(電卓を作ろうとしたが挫折した...わけじゃないよ)

skeleton という CSS を使ったのですが、こちらの追加も

  • 一旦、CSS 適用前のプロジェクトを「別名で保存」する
    (デフォルトとは違う場所にプロジェクトを展開)
  • プロジェクトのトップディレクトリに CSS を保存
  • 一旦終了し、プロジェクトを開きなおすと「こんな CSS 導入する?」と聞いてくるので、「OK」する
  • index.html などに css を適用する

言語に慣れる前に力尽きることが回避できます。