ブラウザで使える超シンプルなオープンソースのコードエディター・「Smart Text Editor」 - かちびと.net
Smart Text Editorはブラウザで使える超シンプルなオープンソースのコードエディターです。ブラウザとキーボード操作だけで使えるよう設計されており、JavaScriptで書かれています。 機能は割と豊富で、マルチタブに対応、プレビュー機能、ファイルのリネームや保存時の拡張子の選択、任意のテキストの置換、JSON整形、雛型の挿入などの他、PWAライクに使う事も出来ます。 試していませんがテーマ機能も付いているみたいです。デフォルトではシンタックスハイライトやコード補完等はありませんが、非常に軽量で使いやすい印象で、複雑な構成や作業、準備なども必要なく気軽に使えます。 JavaScript/html/cssで書かれていますがコードは全てindex.html内に書かれているので1枚のhtmlファイルだけでコードエディターとして動作してくれます。個人的にはとても良くできてると感心しました
ダウンロードもユーザー登録も不要で使えるオープンソースのグループビデオチャットツール・「Talk」 - かちびと.net
Talkはダウンロードもユーザー登録も不要で使えるオープンソースのグループビデオチャットツールです。JavaScriptで書かれています。 アクセスするとすぐにランダムで作られるURLにリダイレクトされるのでそのURLを通話相手と共有すればいいだけです。 オープンソースなので自分で管理すれば時間も無制限で利用できますが、グループ通話にはMeshが採用されているのでせいぜい6~8人が限度みたいです。P2Pで接続するのでセキュアではありますね。 ライセンスはMITとの事。小規模チームには良い選択ではないかなぁと思います。 Talk
preタグに書いたデータをダイアグラムとしてビジュアル化するスクリプト・「Pinker.js」 - かちびと.net
Pinker.jsはpreタグに書いたデータをcanvasにダイアグラムとして描いてくれるスクリプトです。 特定のルールに沿った書き方をpreタグにする事で簡易的なダイアグラムを生成できる、というもの。割と複雑なものも書けるみたいです。 以下動作サンプルです。 動作サンプル 左のpreタグのテキストを元に右のcanvasタグにダイアグラムが生成されています。 使い方 Pinker.jsを読み込みます <script src='Pinker.js'></script> preにルールに沿った記法で書き、idを振ります。Layout:で位置を決め、Relate:で関係性を設定します。 <pre id="Source01">Layout: [A] [B][D][E] [C]...[F] Relate: [B]->[A],[C] [D]->[B],[E],[F] </pre> canv
簡単にJavaScriptでSPAのブログを構築して公開できるライブラリ「CMS.js」を使ってみた！ - paiza開発日誌
どうも、まさとらん（@0310lan）です！ 今回は誰でも簡単にJavaScriptでブログなどを構築可能なCMSツールを実現するライブラリをご紹介します！ Jekyllなどの静的サイトジェネレータと考え方は似ていますが、こちらはサーバサイドスクリプティングが一切不要ですべての作業をフロントサイドで完結できるのが特徴です。 GitHub Pagesと組み合わせることですぐにでもブログを構築して公開することができるので、ご興味ある方はぜひ参考にしてください！ なお、JavaScriptはpaizaラーニングの「JavaScript入門編」（完全無料）で学ぶことができます。そちらも合わせてチェックしてみてください。 【 CMS.js 】 ■「CMS.js」の使い方 それでは早速ですが、実際に「CMS.js」を使ったブログを作って公開してみましょう！ 本来は「CMS.js」のライブラリをダウンロ
Lite Editor - とてもシンプルなWYSIWYGエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上でユーザにコンテンツを作ってもらう場合に便利なのがWYSIWYGエディタですが、あまり多機能なものはユーザを混乱させてしまうだけです。本当に必要なものだけに絞り込むのがいいでしょう。 今回紹介するLite Editorは、本当にごく簡単な機能だけに絞り込んだWYSIWYGエディタになります。 Lite Editorの使い方 エディタです。undo/redo/リンク/太字/イタリック/下線といった機能しかありません。 文字を選んでボタンを押せば装飾されます。 HTML表示に切り替えもできます。 リンクはモーダルで入力します。 リンク表示になりました。 Lite Editorはあまりにもシンプルですが、これで十分というケースも少なくないでしょう。最低限、undo/redoがあり
PathFinding.js - 様々なアルゴリズムで最適な経路を探索 MOONGIFT
ある点からある点までの最短距離を調べるアルゴリズムがあります。簡単なものであれば人間の目で見た方が早いですが、込み入った図になると最短距離を見つけるのも容易ではありません。 そこで使ってみたいのがPathFinding.jsです。最短経路の調査を様々なアルゴリズムを用いて検証できます。 PathFinding.jsの使い方 緑のドットから赤のドットへ移動する経路を発見します。 この場合は直線で簡単です。 壁を作っても最終的にはゴールに到着します。 別なアルゴリズムでは探索方法が全く異なります。 ちょっと壁を増やすと最適な経路も変わってきます。 一例です。 こちらは別なアルゴリズム。時間が大幅にかかっています。 こちらは早いです。 アルゴリズムによって最短経路を見つけるまでの時間が大幅に変わってきます。もちろん障害物の置き方によっても変わってくるでしょう。アルゴリズムの違いによる探索方法がビ
WebGazer.js - WebカメラとJavaScriptによるアイトラッキングシステム MOONGIFT
ユーザテストでユーザの視線がどこに移動しているのかチェックするのは必要です。ただし、アイトラッキングシステムを使うのはとても複雑ですし、コストもかかります。手軽にするため、マウスのトラッキングで済ましてしまっているケースもあります。 そこで使ってみたいのがWebGazer.jsです。JavaScriptとWebカムを組み合わせてアイトラッキングを実現しています。 WebGazer.jsの使い方 使っているところ。顔が認識されているのが分かります。 目線をオレンジのボールに持っていくらしいのですが…なかなか思い通りには動きません。 WebGazer.jsの精度はまだまだ実用レベルではないですが、Webカメラを使うことで視線の動きが追えればアイトラッキングシステムを手軽に使えるようになるでしょう。テストはもちろん、視線を使った情報入力などにも応用できそうです。 WebGazer.jsはHTML
家系図、ER図、UML。JavaScriptでダイナミックに図を描く·Joint MOONGIFT
JointはUMLや家系図、ER図などをダイナミックに描くJavaScriptライブラリ。 JointはJavaScript製のオープンソース・ソフトウェア。Webでは簡単に表現できることから、テキストベースでのコンテンツが多い。だがテキストに溢れたWebサイトというのは見ていて疲れてしまうものだ。グラフがあるとインパクトも大きい。 家系図 だがデータベース等にあるデータをWeb上で表現するのは大変で、サーバ側での何らかのライブラリが必要になるケースが多い。そこで使ってみたいのがJointだ。 JointはJavaScriptで図を描くライブラリで、多彩な種類に対応している。例えば家系図、ER図、各種UML、DEVS、ペトリネットなどだ。さらにオブジェクト同士の接続方法も多様に用意されており、直線や曲線など多彩にある。接続を指し示すときの矢印すら数多い。 マウスで動かせる さらに面白いのは
コーディング不要でWebサイトのテンプレートを作成する為のオープンソースソフトウェア・「GrapesJS」 - かちびと.net
GrapesJSはコーディングせずに直感でWebサイトのテンプレートを作成出来るエディタです。OSSとしてソースコードが公開されています。JS製でjQueryにのみ依存しています。必要なコンテナやテキスト、画像等をマウスで配置すれば左下部のコードアイコンからコードが吐き出されているのが確認出来ます。機能は非常にシンプルなのであくまでテンプレートの作成、そこから先はコーディングという形になりますが、JS製で操作も手軽ですし、需要は割とあるかもしれません。ライセンスはBSDとのことです。 GrapesJS
JavaScript製のオープンソースなCMS・「CMS.js」 - かちびと.net
CMS.jsはJavaScript製のCMSです。オープンソースとして公開されています。サーバーサイド・スクリプトの援助なしにクライアントサイドでWebアプリケーションを構築する事が出来る、との事です。jekyllを意識しているみたい。ライセンスはMITです。 CMS.js
無ければ作るし、ついでに公開するし の流れ - latest log
ブラウザでバイナリを扱うのが辛すぎて、何とかしたいと作りこんでいた冶具(HexDump.js) がだんだん極まってきたの図。 ただの Hex Dump 機能として作ってたハズが、気がついたらこんな感じに。 冶具: 作業の効率を改善するために自分でクリエイトする道具 HexDump(source, { style: { "packet_start_code_prefix(00 00 01)": { values: [0x00, 0x00, 0x01], css: "font-weight:bold;color:green" }, "stream_id(1 byte)": { begin: 3, end: 4, css: "font-weight:bold;color:blue" }, "PES_packet_length(2 byte)": { begin: 4, end: 6, css:
Crypton - サービス運営者でも分からない暗号化をしてデータを保存 MOONGIFT
Webの世界ではいつでもセキュリティが問題になります。もしデータベースにパスワードをつけていたとしても、そのパスワードが漏れたら終わりというのでは危険です。そのためパスワード管理サービスなどではユーザが指定するキーを使って暗号化しておくことでサービス事業者も元データが分からないようにしています。 今回紹介するCryptonはそんなクライアントサイドでの暗号化、復号化を実現するフレームワークになります。あのファイル共有サービス、Mega.comで使われていたもののようです。 Cryptonの使い方 最初にユーザ登録&ログインをします。 こちらはチャットのデモです。 ブログのデモもあります。 技術要素としてはPostgreSQLとRedisを組み合わせています。そしてデータを暗号化してサーバに入れておくため、サーバからもデータが何なのか分からない状態になります。用途は限られると思いますが面白い
TouchPoint.js·マウスクリックをビジュアル化 MOONGIFT
プレゼンでデモをやったり、デモ動画を撮る時に思うのはキーボードやマウスの入力を見ている人がはっきりと分かるようにするというのは難しいと言うことです。突然文字が入力されたり、小さなマウスポインタが動いたりするのは分かりづらいことこの上ありません。 そこで使ってみたいのがTouchPoint.jsです。Webブラウザにおけるマウスポインタのクリックをビジュアル化してくれるライブラリです。 TouchPoint.jsの使い方 TouchPoint.jsを使ったデモのアニメーションGIFになります。クリックすると赤い波紋が広がります。 色は変更できます。 スクリーンキャスティングはもちろん、ユーザテストの際に使ったりしても面白いかと思います。Webサイトのデモを見せる時に使うと聴衆も分かりやすくなるでしょう。 TouchPoint.jsはJavaScript製、MIT Licenseのオープンソー
テキストをパースして自然言語を抽出するスクリプト・「Knwl.js」 - かちびと.net
Knwl.jsは任意のテキストを解析して自然言語を抽出する為のスクリプトです。テキストから日付や時間、場所、電話番号、メールアドレス等を取り出す事が出来る自然言語パーサーとして開発を進めているみたいです。また、まだ開発段階ではありますが、シンプルな動詞や件名、グラムやポンド等の単位なども抽出出来るようにしてるようです。今後の開発が楽しみですね。Knwl.jsはOSSとして公開されており、ライセンスはMITとなっています。 Knwl.js
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
任意の要素をドラッグ移動出来るようにする軽量スクリプト・「dragmove.js」 - かちびと.net
Handsontable 使い方メモ１（基本） - Qiita
非依存なHTML5オーディオプレーヤー・「Amplitude.js」 - かちびと.net
http://getar.jp/15733/
Webページにドローツールを埋め込むためのスクリプト・「Drawingboard.js」 - かちびと.net
店舗等の予約システムを実装する為のスクリプト・「Booking.js」 - かちびと.net