タグ

JavaScriptとElectronに関するski_yskのブックマーク (9)

  • Fiddle - すぐにElectronアプリ開発をはじめられる開発環境

    MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Electronを使えばWindows/macOS/Linuxなどマルチプラットフォームで動作するソフトウェアがHTML/JavaScript/CSSで作成できます。作ってみたいと思いつつも、環境を整える手間で躊躇してしまっている人もいるのではないでしょうか。 そんな方に使ってみて欲しいのがFiddleです。ダウンロードしてすぐにElectronアプリ開発がはじめられるソフトウェアです。 Fiddleの使い方 Fiddleを起動したところです。 開発環境は3ペインになっています。左側にあるJavaScript、右にあるHTMLを編集するのが基です。 開発したらElectronアプリとして実行できます。各バージョンのElectronがFiddle上で簡単にダウンロードできます。 実

    Fiddle - すぐにElectronアプリ開発をはじめられる開発環境
  • QiitaPolice - Qiitaのコンテンツに対してスパム判定

  • electron-recorder - Electronアプリの画面を動画化

    Electronを使えばWeb標準の技術デスクトップアプリを開発できます。しかし、デスクトップのソフトウェアとしてどれくらいのことができるのか気になる人は多いでしょう。 今回紹介するelectron-recorderはElectronでウィンドウのレコーディングを行うソフトウェアです。 electron-recorderの使い方 ウィンドウです。 こんな感じに文字が回転しています。この回転自体はCSSJavaScriptで行っています。 できあがるのは動画です。こちらはそれをアニメーションGIFにしたものです。 electron-recorderはウィンドウをそのまま刻々と記録して、まとめて動画にしています。Electronアプリの画面操作を記録したり、アプリ上で動画を作成するといった時に使えそうです。 electron-recorderはElectron/JavaScript製のオー

    electron-recorder - Electronアプリの画面を動画化
  • Chromenu - メニュー常駐型のWebブラウザ

    Webブラウザを複数使いこなす人がいます。普段のブラウジング用と開発用で分けると言った具合です。そうすると必要な機能拡張やブックマークも変わるので、重たくなったりするのを防げるようになります。 今回はさらに常駐系サイトを登録しておくのに便利そうなChromenuを紹介します。 Chromenuの使い方 Chromenuはメニューバーに常駐するWebブラウザです。 Facebookみたいなサイトを登録しておくと便利そうです。スマートフォンでアクセスした際と同じ表示になります。 もちろんMOONGIFTも。 Chromenuはソーシャル系のサービスであったり、常時開いておきたくなるサイト(とはいえWebブラウザで開いていると気になって仕事の邪魔になるサイト)を登録しておくと便利そうです。また、定期的にアップデートしてくれる機能もあるので実況系などで役立つこともあるでしょう。 Chromenuは

    Chromenu - メニュー常駐型のWebブラウザ
  • electron-viz - GUIのGraphvizチャートエディタ&ビューワー

    MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Graphvizを使うとノードを使ったフローチャート、クラス図をはじめ様々なチャートを画像にすることができます。ただし最初に環境を整えるのが手間であったり、dotファイルを書いた後にコマンドで変換しなければなりません。 そんな手間暇を軽減してくれるのがelectron-vizです。Electronで開発されており、GUIでGraphvizを編集できます。 electron-vizの使い方 electron-vizのメイン画面です。左側がエディタ、右側にチャートが描かれます。 例えばこのような図を描きました。オートプレビューが有効になっていれば編集した直後にチャートが描かれます。チャートの内容はGraphviz チュートリアルよりお借りしました。 二つに分かれるサンプル。 さらに複雑

    electron-viz - GUIのGraphvizチャートエディタ&ビューワー
  • Umlaut - PlantUMLをその場で画像化するUMLエディタ

    MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました UMLの失敗(失礼)はGUIツールを必要としたことではないでしょうか。大抵その手のツールが効果であったり、使いこなすのに時間が必要で、そういった面倒さが離れてしまうのに繋がったのではないかと思います。 しかしシステムのビジュアル化としては良い仕組みであったと思います。問題は記述法で、テキストベースで書けていれば変わったかも知れません。そこで今回はUmlautを紹介します。 Umlautの使い方 UmlautはPlantUMLで書いた内容をビジュアル化するビューワーです。 デモです。左側に書かれた内容が右側で画像化しています。 シーケンス図。 アクティビティ図。 ユースケース図。 コンポーネント図。 ステート図。 テキストで書くだけでは結果が想像しづらいですが、その場でプレビューでき

    Umlaut - PlantUMLをその場で画像化するUMLエディタ
  • Boostnote - オンラインでシェアもできるMarkdownベースのメモ帳

    メモ環境は大事です。気がついた時にさっとメモをしておけば、後々見返すこともできます。かつメモ環境はなるべく一カ所に統一しておくのが大事です。個人的には適当なテキストファイルに書き込んでいます。 しかし個人的にBoostnoteに集中させようと思っています。それくらい使い勝手のいいソフトウェアです。 Boostnoteの使い方 メイン画面です。 フォルダ、メモ一覧そしてメモと3段階の構成になっています。メモにはタグがつけられます。 新しいメモを作成しました。 メモはMarkdownで記入できます。 編集時はAceエディタを使っているので見やすいです。 Boostnoteの面白いのはメモをシェアできる機能があることで、専用の7日間のURLが生成されます。ローカルでメモを書いて、必要があればオンラインで共有できます。検索機能も便利なのでぜひ使ってみてください。 BoostnoteはElectro

    Boostnote - オンラインでシェアもできるMarkdownベースのメモ帳
  • Hain - Electron製のランチャー

    MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近のランチャーは事前にアプリケーションを登録するものではなく、アプリケーションが自動で情報を収集してくれるタイプのものが主流になっています。 今回紹介するHainも同じく自動収集型のランチャーです。特徴的なのはElectron製ということです。 Hainの使い方 メイン画面です。Alt+スペースで呼出せます。 パスに入っているものであれば問題なく表示できる模様。 文字を入力してプログラムを特定します。 ElectronということはWeb技術で作られているということです。Windows向けに作られていますが、Electronであれば他のプラットフォーム向けにも提供できそうですね。 HainはElectron/JavaScript製のオープンソース・ソフトウェア(MIT Licens

    Hain - Electron製のランチャー
  • KeyCastJs - キー入力を可視化

    MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 勉強会やハンズオンでパソコンの画面を映しながら説明をすることがあります。マウス操作ですべて終われば良いのですが、多くの場合キーボードを使います。そんな時にキーボードショートカットを使うと突然操作が行われて聴衆は混乱してしまいます。 そこでキー入力を可視化するソフトウェアが必要になります。今回はElectronを使って作られたKeyCastJsを紹介します。 KeyCastJsの使い方 起動したところ。DevToolsが表示されていますが、これは閉じても大丈夫です。 実際に操作しているところ。キー入力がそのまま表示されます。 KeyCastJsはチュートリアル動画で使ったり、プレゼンテーションで活用することもできます。キーボード入力はぱっと見では分からないので、可視化すると分かりやす

    KeyCastJs - キー入力を可視化
  • 1