タグ

JavaScriptとnode.jsに関するski_yskのブックマーク (117)

  • Parcel - 高速さが売りのWebアプリケーションバンドラー

    MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました JavaScriptの周辺環境の進化は早く、一部はGulpと言われていたのがWebPackになったりして、どんどん新しい技術が出てきては廃れるといったことを繰り返しています。 さらにここで紹介するのは心苦しいのですがParcelを知っておきましょう。とても簡単に使えるWebアプリケーションバンドラーです。 Parcelの使い方 例えば index.html を次のように書きます。 <html> <body> <script src="./index.js"></script> </body> </html> そして同じ階層に index.js を置きます。もちろん import に対応しています。 // import another component import main fr

    Parcel - 高速さが売りのWebアプリケーションバンドラー
  • Marko - eBay製。サーバ/クライアント両方に対応したビューフレームワーク MOONGIFT

    Reactが導入したVirtualDOMという概念はあっという間に他のフレームワークにも影響を及ぼしていきました。最近では Webコンポーネントにも関連して、小さなパッケージを組み合わせる方法が主流になっています。 今回紹介するMarkoもそんなフレームワークの一つです。特に高速な動作がポイントになっています。 Markoの使い方 Markoの例です。クラスとスタイル、そしてHTMLの3つを組み合わせます。 class { onCreate() { this.state = { count:0 }; } increment() { this.state.count++; } } style { .count { color:#09c; font-size:3em; } .example-button { font-size:1em; padding:0.5em; } } <div .cou

    Marko - eBay製。サーバ/クライアント両方に対応したビューフレームワーク MOONGIFT
  • Geist - 関連性に重点を置いた個人用ナレッジベース

    MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 個人のナレッジはきちんと積み重ねていかなければなりません。日々のインプットを書きためておく場所を用意しておかないと、あっという間に頭の片隅から抜け落ちてしまいます。 そこで使ってみたいのがGeistです。個人のナレッジについて、関連性を用いて描けるソフトウェアです。 Geistの使い方 メイン画面です。主な機能はノート、マップ、そしてリンクです。 ノートはWYSIWYGで書けます。 そしてノートはノードとしてマップ上に表示します。 そして関連性をラインで表現します。 画像も追加できます。 Geistは特に各メモ(ノート)の関連性に重点を置いたソフトウェアになります。構造的に文書を書く際に、それらをすべて分けてしまって線でつないで表現するのは面白そうです。 Geistはnode/Ja

    Geist - 関連性に重点を置いた個人用ナレッジベース
  • stacks-cli - 気になるWebサービスで何が使われているのか調査 MOONGIFT

    イケてるWebサービスではどんなフレームワークやライブラリが使われているのか気になる人は多いでしょう。やはりトレンドのフレームワークを組み合わせているのか、はたまた意外と枯れた技術を使っているのか。 そんな調査ができるライブラリがstacks-cliです。気になるWebサービスで実行してみましょう。 stacks-cliの使い方 MOONGIFTの実行結果です。かなり高い確度で正解しています。 stacks-cliはHTTPサーバのヘッダーやレスポンス内容を解析して使われているであろうライブラリを判別しています。この辺りのことは解析すれば分かるということで、セキュリティを気にする方は隠せるように調整しても良さそうです。 stacks-cliはnode/JavaScript製のオープンソース・ソフトウェア(MIT License)です。 WeiChiaChang/stacks-cli: ?

    stacks-cli - 気になるWebサービスで何が使われているのか調査 MOONGIFT
  • adminMongo - WebベースのMongoDB管理

    MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました MongoDBはNoSQLのドキュメント型データベースとして最も有名な存在になっています。実際の開発でも使われるケースが増えているのではないでしょうか。そして開発している際に必要なのが管理画面です。 今回紹介するadminMongoはWebベースのMongoDB管理システムです。 adminMongoの使い方 ダッシュボードです。ここでデータの作成ができます。 ドキュメント毎のコレクション数、エクスポートができます。 データ一覧。 編集画面。 adminMongoはシンプルなUIでMongoDBの最低限の管理を提供します。番運用では物足りないかも知れませんが、開発用途であれば十分な機能と言えるのではないでしょうか。Webベースなので、社内で一つ立てておけばみんなで使えるで便利です

    adminMongo - WebベースのMongoDB管理
  • Rich FileManager - Webベースのファイル管理

    MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webアプリケーションが増えていくと必要になるのが、OSの基とも言えるファイル管理です。サーバ上のストレージに入ったファイルを閲覧したり、編集は別なWebアプリケーションなど利用法は様々に考えられます。 そんなファイル管理としてRich FileManagerを照会します。ファイルのプレビューもできる多機能なファイルマネージャです。 Rich FileManagerの使い方 ファイル一覧です。左側にフォルダツリーがあります。 画像はプレビューできます。 テキストは閲覧および編集ができます。 日語ローカライズも行われています。 Rich FileManagerをサーバにインストールしておけば、ストレージの内容について編集やメンテナンスが容易になります。FTPなどのようにソフトウェ

    Rich FileManager - Webベースのファイル管理
  • Dawn - フロントエンド/node開発のビルドツール MOONGIFT

    フロントエンド開発はどんどん進化しています。その結果として様々なツールを組み合わせなければならなくなったり、手順が増えてしまっています。これでは手軽に開発できなくなってしまいます。 そこで紹介したいのがDawnです。軽量なタスク管理を備えたフロントエンドの開発、ビルドツールです。 Dawnの使い方 使っている場面です。こちらはAPIサーバのフロントです。 こちらはフロントエンドです。二つのサーバが同時に立ち上がっています。 APIを作ったりすることもできます。 技術的にはWebPackなども使われており、独自技術で固まっている訳ではありません。しかしDawnを使うことで初期テンプレート生成やテスト、ビルドなどが一手にできます。複数タスクを同時に実行したり、ミドルウェアにも対応しており、幅広い開発に利用できそうです。 Dawnはnode/JavaScript製のオープンソース・ソフトウェア(

    Dawn - フロントエンド/node開発のビルドツール MOONGIFT
  • Blazer - SQLを使ってデータベースから有益な情報を引き出そう MOONGIFT

    ビジネスの根幹にはデータベースがあります。日々の業務を通じて蓄積されていくデータをいかに検索し、有益なデータを抽出するかがビジネスの成否を決めると言っても過言ではないでしょう。 そのために必要なのがSQLを自由に実行できる環境です。今回はBlazerを紹介します。 Blazerの使い方 最初の画面です。データが一覧表示されています。 インクリメンタルサーチに対応しています。 任意のSQLを実行できる環境も用意されています。 SQLを実行し、そのまま保存もできます。 位置情報がある場合は地図にマッピングされます。 テーブルの構造も確認できます。 Blazerを使えば任意のSQLを実行して、それを保存しておけます。同じ条件であれば一度開発者が組み立てておくことでマーケターや営業の方はセルフサポートできるようになるでしょう。データベースをビジネスに活用するためには必須のソフトウェアです。 Bla

    Blazer - SQLを使ってデータベースから有益な情報を引き出そう MOONGIFT
  • Terminal Kit - CLIのソフトウェアをパワーアップ

    MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 開発者向けのツールを開発する場合、GUIがない方が手軽で自動化も考えられるのでメリットがあります。しかしユーザビリティを考えるならばインジケータを付けたり、インタラクティブに入力がある方が良いでしょう。 今回はそんなCLIツールを便利にしてくれる機能を満載したTerminal Kitを紹介します。 Terminal Kitの使い方 サンプルです。ファイル選択機能です。 $ node sample/file-input-doc1.js Choose a file: /path/to/saturn.txt Your file is '/path/to/saturn.txt ' さらにコマンドを入力させて、それを取得するデモ。 $ node sample/input-field-doc4

    Terminal Kit - CLIのソフトウェアをパワーアップ
  • Franchise - 多数のデータベースに対応したSQLノートブック

    SQLを覚えると実務で使える様々なデータを取得できるようになります。毎回同じようなSQLを記述するのが面倒で、テキストファイルに定番のSQLをメモで残している方も多いのではないでしょうか。 そんな方にお勧めなのがFranchiseです。SQLを残しておけるノートブックです。 Franchiseの使い方 メイン画面です。複数のデータベースに対応しています。 結果を地図に描画する例です。 グラフ。線グラフです。 棒グラフ。 並び替えた棒グラフ。 ドットだけ。表示を2カラムにしています。 一般的な一覧表も可能です。 レンジを使ってその時の値を表示するパターン。 メールを取り込んでクエリを投げるパターン。 FranchiseのデータリソースはSQLite/PostgreSQL/BigQuery/MongoDB/Microsoft SQL Server/Oracle/DB2/Teradataなどとな

    Franchise - 多数のデータベースに対応したSQLノートブック
  • Code Quality Checker - プログラムコードの品質チェッカー

    MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました コードの品質はどう判断したら良いでしょうか。幾つかの判断基準はあると思いますが、複雑さやコードの重複などは挙げられるでしょう。そうしたネガティブな要素が積み重なった結果、バグを含みやすくなると言うことはあると言えます。 今回紹介するCode Quality Checkerはコードの品質チェックを行ってくれるソフトウェアです。 Code Quality Checkerの使い方 Code Quality Checkerはファイルのリストを渡すだけで実行できます。とあるJavaScriptプロジェクトの例。 $ cqc src/**/*.js Number of files: 3 Source lines of code: 203 Duplicate rate: 0.00% High c

    Code Quality Checker - プログラムコードの品質チェッカー
  • UI Recorder - node.js製のSelenium IDE代替 MOONGIFT

    Selenium IDEが最新のFirefoxで動かなくなりました。これに伴い、新しいAPIで動くIDEも開発がスタートしたようですが、それを待つのも辛いでしょう。かといって旧バージョンを使い続けるのも問題です。 そこで使ってみたいのがUI Recorderです。新しく登場したSelenium IDEライクなWebブラウザの操作記録ソフトウェアです。 UI Recorderの使い方 UI Recorderではまずディレクトリを作って初期化します。 $ uirecorder init __ ______ ____ __ / / / / _/ / __ \___ _________ _________/ /__ _____ / / / // / / /_/ / _ \/ ___/ __ \/ ___/ __ / _ \/ ___/ / /_/ // / / _, _/ __/ /__/ /_/

    UI Recorder - node.js製のSelenium IDE代替 MOONGIFT
  • src2png - ソースコードを画像に変換

    MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ソースコードを埋め込んで表示してくれるサービスは多数ありますが、ブログによっては対応していないこともあります。さらにそもそもコードのシンタックスハイライト表示にも対応しておらず、コード表示が微妙になってしまうこともあります。 そんな時にはsrc2pngを使ってみましょう。画像ではありますが、ソースコードを綺麗に表示してくれます。 src2pngの使い方 使い方は簡単で、src2pngコマンドにソースコードファイルを渡すだけです。 $ src2png SOURCE_FILE そうすると綺麗な画像を生成してくれます。 src2pngはPoiという開発用のHTTPサーバを立てて、そこでソースコードをハイライト表示します。そしてヘッドレスブラウザを使ってスクリーンショットを撮るという仕組み

    src2png - ソースコードを画像に変換
  • Ordinance format jp - Markdownで日本の公文書を記述

    MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownは広く使われるようになっていますが、シンプルな記法だけに簡易的なHTMLへの変換以外のニーズ向けとなると使い勝手が悪いことがあります。そのためグラフを入れられるようにしたり、チャートを描けるようにするソフトウェアが作られます。 今回紹介するOrdinance format jpもその一つです。日の公文書フォーマットに合わせたMarkdown記法です。 Ordinance format jpの使い方 サンプルです。左側が拡張されたMarkdownで、右側に展開されます。 ラベルが付けられたり、補足情報の記述、リストの番号の付け方が変わっています。 Ordinance format jpを使うことで普段から慣れているMarkdown記法のまま、公文書風に仕上げることが

    Ordinance format jp - Markdownで日本の公文書を記述
  • notes - ベンダーロックインの心配がいらないノートアプリ MOONGIFT

    メモを取る環境は多々ありますが、ローカルで行っている人も多いはずです。そして最近であればMarkdown記法を使っているケースが多いでしょう。その結果、特定のフォルダやローカルディスク内に多数のMarkdownファイルが散らばったりします。 そうした情報の散在や特定Webサービスによる情報のロックインを防げるソフトウェアがnotesです。 notesの使い方 notesはコマンドであり、newサブコマンドで新しいファイルを作成できます。 $ notes new Test 環境変数のEDITORで編集できます。そしてlsで保存されているファイルを一覧できます。 $ notes ls Test.md さらにgrepでファイル内部を含めて検索できます。 $ notes grep H.*e Test.md 開くときにはopenを使います。 $ notes open Test.md notesはとて

    notes - ベンダーロックインの心配がいらないノートアプリ MOONGIFT
  • qbrt - Geckoエンジンを使って特定サイトだけ立ち上がるアプリを生成 MOONGIFT

    ElectronはWeb標準の技術を使ってデスクトップアプリケーションが作れるとあって人気があります。とは言え、よく使われるのはWebサイトのガワアプリで、特定のサイトだけ使える点においてセキュリティ上のメリットがあります。 そんなガワアプリをコマンドラインで作れるのがqbrtです。さらにレンダリングエンジンとしてWebKitではなく、Geckoを採用しているのが特徴です。 qbrtの使い方 例えば以下のように実行します。 qbrt run https://www.moongift.jp/ そうすると指定したサイトだけを表示して立ち上がります。 qbrt package url と実行するとアプリが作れます。これで特定のサイトだけが利用できるアプリが作られます。悪意あるサイトに情報を吸い取られる心配も減りますし、常時立ち上げておくサイトを指定しておくとWebブラウザを安心して再起動できるで

    qbrt - Geckoエンジンを使って特定サイトだけ立ち上がるアプリを生成 MOONGIFT
  • gtop - ターミナル上のシステムダッシュボード

    MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました システム管理者はシステム全体のステータスを把握する必要があります。そのためにサーバ側データを送信して可視化するダッシュボードソフトウェアがたくさんあります。 しかしデータをあえて飛ばすことなく、ターミナル上でそのまま確認できるのがgtopです。 gtopの使い方 メイン画面です。 データはリアルタイムに書き換わります。CPU、ディスク容量、プロセス、メモリ、ネットワークなどの多数の情報が可視化できるようになっています。何よりターミナル上で実行されるので、別途表示するツールを用意しないので良いのが利点です。なおデータは蓄積されないので、実行したタイミングから表示されていく形になります。 gtopはnode/JavaScript製のオープンソース・ソフトウェア(MIT License)

    gtop - ターミナル上のシステムダッシュボード
  • Terminal recorder - ターミナル操作を記録してHTML出力

    MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 自分のターミナル操作を記録したい時はないでしょうか。手順書を作る場合でも、ブログ記事を書くときにも考えられます。すべてテキストで書いていくのもいいですが、入力した内容がそのまま記録されるなら、これほど楽なことはないでしょう。 Terminal recorderはそんな希望を叶えてくれるソフトウェアです。さらに結果はHTMLファイルになります。 Terminal recorderの使い方 使い方としては、Terminal recorderを起動して新しいBashが開始します。そしてコマンドを打って作業し、完了したらCtrl + Cで終了します。そうすると次のようなHTMLファイルが生成される仕組みです。 Terminal recorderはasciicastのような仕組みを自分だけで

    Terminal recorder - ターミナル操作を記録してHTML出力
  • cgmd-browser - Markdownに注釈を入れる

    MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownが開発者の間でデファクトのフォーマットになってきています。そうやって広まっていく中では、周辺ツールも充実してきます。今回はアノテーション、注釈に注目します。 Markdownでもワードプロセッサのように文書に対してコメントしたいと考える時があるでしょう。そんな時に使えるのがcgmd-browserです。 cgmd-browserの使い方 cgmd-browserのメイン画面です。タブに対応しているので複数のMarkdownファイルが開けます。そして文字を選択するとアイコンが表示されます。 そして鉛筆のアイコンをクリックするとコメントが書けます。 コメントするとフローティングで確認できるようになります。 cgmd-browserはazu/markdown-review

    cgmd-browser - Markdownに注釈を入れる
  • Decktape - HTMLプレゼンテーションをPDF化

    MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTMLでスライドを作成する方が増えています。スライドをWeb上にアップロードするだけで閲覧できる便利さは良いのですが、多くのスライド共有サイトではHTMLには対応していません。 そこで使ってみたいのがDecktapeです。多数のHTMLスライドに対応したPDF変換ソフトウェアです。 Decktapeの使い方 後は以下のようなコマンドになります。 $ ./phantomjs decktape.js -s 1280x720 http://razvancaliman.com/fowd-nyc-2014 そうするとPDFが生成されます。 HTMLプレゼンテーションによってはクリックでリストを一つずつ表示するものもありますが、Decktapeは自動的にすべてのリストを表示した状態にしてくれ

    Decktape - HTMLプレゼンテーションをPDF化