markuplint - 各種マークアップに対応したLintツール
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 企業などで品質を標準化するためにはフォーマットをチーム内で合わせる必要があります。個々人の書いたコードを目でチェックするのはとても大変です。そこで使えるのがLintツールになります。 今回紹介するmarkuplintはHTMLやWeb Componentなど様々なマークアップをチェックするソフトウェアです。 markuplintの使い方 markuplintは設定ファイルを作成し、ターゲットになるHTMLファイルを指定して実行します。 $ markuplint -r ~/.markuplintrc index.html <markuplint> warning: インデントは2幅スペースにしてください。 (indentation) [/index.html:102:1]<br> 1
Stimulus - 素のHTMLを活かしたBasecamp製のJavaScriptフレームワーク
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近のフロントエンドではReact/Angular/VueなどVirualDOMを使ったライブラリが増えています。確かに便利なのですが、それぞれ独自のHTMLタグを使うので学習コストが大きくなります。プログラマは良くとも、デザイナーでは難しいこともあるでしょう。 そこで使ってみたいのがStimulusです。既存のHTMLをベースにしたJavaScriptライブラリです。 Stimulusの使い方 Stimulusのデモです。下記はHTMLですが、素のHTMLがそのまま使えます。 <!--HTML from anywhere--> <div data-controller="hello"> <input data-target="hello.name" type="text"/> <
LambStatus - Lambdaを使ったWeb APIステータスページ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました クラウドサービスを提供しているのであればステータスページは必須と言えます。そうすることで万一サーバが落ちていても開発者に通知することができます。サービス停止はもちろん困りものですが、まったく状況が分からないのに比べたら大幅に良いでしょう。 ステータスページを提供するサービスは幾つかありますが、今回はAWS Lambdaを使ったLambStatusを紹介します。 LambStatusの使い方 ユーザ向けの画面です。 グラフが表示されているので状況の変化が追えます。 過去に起きた問題を記録しておけます。 こちらは管理者向けの画面です。 インシデントは自分たちで登録します。 メンテナンス情報も記録しておけます。 測定する情報。 設定。 LambStatusはLambdaを使うことによって
markdownlint-cli - より良いMarkdownドキュメントを目指す
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownは柔軟な記法をサポートしています。なんとなく書いてもそれっぽく表示されます。しかし、会社などで何人もMarkdownを使うようになると一定の統一された基準が必要になるでしょう。 そこで使ってみたいのがmarkdownlint-cliです。MarkdownのLintツールかつCLIになります。 markdownlint-cliの使い方 インストールが終わったら後はmarkdownlintコマンドを実行するだけです。そうすると直すべきポイントがリストアップされます。 $ markdownlint README.md README.md: 210: MD007 Unordered list indentation README.md: 92: MD009 Trailing
SketchCode - オフラインで使えるJSFiddle/CodePen/JSBin代替 MOONGIFT
JSFiddleやCodePenなど、オンライン上でHTML/JavaScript/CSSを書いた結果をすぐに確認できるサービスがあります。非常に便利なサービスなのですが、インターネットに繋がっていないと使えないという欠点があります。 そこで使ってみたいのがSketchCodeです。ローカルで利用でき、さらにGUIアプリケーションというWebコードスニペット実行環境です。 SketchCodeの使い方 メイン画面です。 編集画面です。上からHTML/CSS/JavaScriptとなっています。外部ライブラリを読み込む場合はHTML上に記述する必要があります。 結果は右側のプレビューで確認できます。 保存しておけば幾つも作れます。 SketchCodeはオフラインで使えるので、いつでもどこでも開発できます。ちょっとしたコードを試したり、動作確認ができるでしょう。できあがったコードはオンライン
node dependencies view - nodeプロジェクトの依存性を可視化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました nodeに限った話ではありませんが、各プログラミング言語では多くのライブラリを利用します。自分では一つしか使っていないつもりでも、そのライブラリが別なライブラリに依存し、そのライブラリがまた別な…と広がっていくのはよくある話です。 そんなnodeプロジェクトの依存性を可視化してくれるのがnode dependencies viewです。 node dependencies viewの使い方 実行例です。あまりにも多岐に渡っており、全体像が見えないくらいです。 こちらはまだ見やすいかと思います。 画像を見てぴんときた方も多いと思いますが、実際の画像化はGraphizに依存しています。dotファイルを出力する形になりますので、後はPDFにするか、PNGにするかは自由です。プロジェクトの
Darkwire.io - Web Cryptography APIを用いたセキュアなチャット MOONGIFT
オンラインチャットは手軽にオンライン上の人たちと会話できる便利なシステムです。あまりに手軽で、ついつい余計なことまで喋ってしまって後で問題になることがあります。データの安全性は常に考えるべきでしょう。 そこで注目したいのがDarkwire.ioです。Web Cryptography APIを用いた暗号化チャットシステムです。 Darkwire.ioの使い方 トップページ。チャットルームのURLが生成されます。 チャット中の画面。句読点が最後に残ってしまうことがありました。 Darkwire.ioではIRCのように /me や /nick といったコマンドが利用できます。日本語入力はちょっとした問題がありましたが、表示は問題ありません。Web Cryptography APIを使ってWebSocket上を安全なデータが流れる、そんなチャットシステムになります。 Darkwire.ioはnod
image-compressor - Webブラウザ上で画像圧縮
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました スマートフォンのカメラの性能が大幅に向上し、1ファイルのサイズが肥大化する傾向にあります。JPEGなのである程度圧縮がかかっているものの、それでも数MBあったりします。ブログなどで使うのであれば、正直そこまでの品質や画像の大きさは不要でしょう。 そこで使ってみたいのがimage-compressorです。Webブラウザベース、クライアントサイドだけで画像のサイズを縮小できます。 image-compressorの使い方 上がオリジナル、下が変更後です。品質を80%にしたくらいでは0.27%の削減にしかなりません。 60%まで下げると一気に40%の削減になります。 image-compressorではJPEGの品質の他にも画像サイズも変更できます。クライアントサイドのJavaScri
Katamuki.js - テキストや画像を滑らかに表示 MOONGIFT
WindowsのWebブラウザはmacOSに比べて文字が汚いです。綺麗に表示しようと思うとWeb Fontを使うのが一般的ですが、日本語フォントは文字数が多いので重たくなってしまったり、動的に生成するクラウドエンジンを使う必要があります。 そこで手軽にJavaScriptだけで文字や画像を綺麗にしてくれるのがKatamuki.jsです。 Katamuki.jsの使い方 適用前。拡大しています。 適用前（テキスト） 適用後。ちょっとだけ滑らかになっているのが分かるでしょうか。 適用後（テキスト） さらに画像も。こちらは適用前。 適用前（画像） 画像もちょっと滑らかになっているでしょうか。 適用後（画像） Katamuki.jsはほんの少しだけ文字をずらして表示することでアンチエイリアス効果を出しています。普段通りの距離感で見ると変わっているのが分かるはずです。ちょっとぼやけた感じもしますが、
source_downloader - SourceMapを元のJavaScriptファイルへ展開
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました JavaScriptはサイズを軽減したり、簡単に内容が読まれないように難読化（ミニファイ）して公開します。しかし、それではデバッグしづらいという問題があるため、SourceMapと呼ばれる仕組みがあります。 今回紹介するsource_downloaderはSourceMapファイルを読み込み、元のJavaScriptファイルを生成してくれるソフトウェアです。 source_downloaderの使い方 source_downloaderはリモートまたはローカルファイルを読み込めます。変換後はJavaScriptだけでなく、TypeScriptにも対応しています。 $ cat src/_bin.ts import { join, resolve } from 'path' impor
mind - node/JavaScript製のニューラルネットワークライブラリ MOONGIFT
ディープラーニングはここ数年人気の高い技術ですが、技術の基礎は理解しつつもそれをコードレベルで表現するのはとても難しいでしょう。そして、そのためのライブラリは多数出てきています。 もしWebブラウザ上で手軽に試したいのであればmindを使ってみてください。 mindの使い方 こちらはデモです。映画を10本、レーティングします。 その結果をもとに、映画のレーティングを類推します。 mindはWebブラウザまたはnodeの中で動かすことができるニューラルネットワークライブラリになります。JavaScriptでディープラーニングを試してみたい方はmindをベースにしてみてはいかがでしょうか。特徴としてはワードベクトル生成、設定ベース、プラグインによる拡張と言った点が挙げられています。 mindはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 ste
clasp - ローカルでGoogle Apps Scriptを開発
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Google Apps Scriptを使えばGoogleスプレッドシートであったり、スライドなどを自動操作できる仕組みが作れます。さらにWeb APIもあり、外部からデータをウケたり、送信することも可能です。 そんなGoogle Apps Scriptをローカルで作成できるのがclaspです。 claspの使い方 clasp new で新しいプロジェクトが作れます。一度 clasp pull するとCode.gsがダウンロードされるので、後は編集してpushします。 $ clasp push └─ Code.gs └─ appsscript.json Pushed 2 files. ローカルで開発はできますが、実行できる訳ではないので注意が必要です。開発したらpushして、それから
STYLE2PAINTS - AIによるイラストの自動彩色
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ディープラーニングや人工知能によって、これまでのアルゴリズムベースの機械処理から、学習効果を活かした処理ができるようになっています。その結果、人が判断することなく、機械がベストと思われる判断によって処理できるようになります。 今回紹介するSTYLE2PAINTSは線画の色づけをAIによって自動化する、そんなすごいソフトウェアです。 STYLE2PAINTSの使い方 トップページです。サンプルから線画を選択しました。 左が線画、右が彩色したイラストになります。彩色は左上にあるイラストを参考に行われます。 細かく微調整もできます。 別なイラストでも行えます。 参考のイラストを差し替えることもできます。イラストは 「にゃん」/「Fumi」のイラスト [pixiv] よりお借りしました。
TOAST UI Editor - WYSIWYGとMarkdown両方をサポートしたWebエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 開発者にとってMarkdownは便利な記法ですが、それ以外の人たちにとってはルールを覚えなければならず、面倒に感じられてしまいます。かといってWYSIWYGなツールバーを設けると開発者が邪魔に感じてしまうでしょう。 そこで使ってみたいのがTOAST UI Editorです。MarkdownとWYSIWYGを切り替えられるエディタです。 TOAST UI Editorの使い方 エディタです。上部にツールバーがついています。 日本語も問題なく入力できます。 テーブルをセル数をグラフィカルに決められるのは便利です。 Markdownの表示に切り替えることもできます。 プレビューの表示もできます。 反映はリアルタイムに行われます。 機能拡張によってグラフを追加したりできます。 TOAST
Via.js - Web WorkerでもDOMを利用可能に MOONGIFT
JavaScriptはシングルスレッドなので、重たい処理を実行するとWebブラウザが固まってしまいます。それを防ぐため、Web Workerというバックグラウンドで処理を実行するAPIがあります。 しかしWeb WorkerではDOM操作ができないという欠点があります。それを解決してくれるのがVia.jsです。 Via.jsの使い方 デモです。ボタンを押すとWeb Audio APIを実行します。 その他、DOM操作もできます。 const document = via.document; const button = document.createElement("button"); button.textContent = "Click me"; button.style.fontWeight = "bold"; button.addEventListener("click", ()
LeaderLine - 情報に関連性を持たせる線を描画
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 情報はただ並べただけではその関連性が分かりづらいものです。線を使って表現すると情報同士の関連性が分かるようになり、理解度が増します。多くの場合、そうした内容はプレゼンテーション用のソフトウェアで作ったり画像編集ソフトウェアを使います。 しかしそれではメンテナンスが面倒になります。そこで使ってみたいのがLeaderLineです。 LeaderLineの使い方 使い方です。とても簡単ですね。 応用するとこんな複雑な線も描けます。マウスオーバーによるアニメーションもサポートしています。 DOMにラインを付けることもできます。 写真に説明を追加するなんて使い方も。 さらに範囲を設けたりもできます。 グラフをインタラクティブにするデモです。 LeaderLineは実に多彩な表現が可能です。情
Joy - GoのコードをJavaScriptに変換
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました JavaScriptを嫌う方は一定層います。スクリプト言語なので型がなかったり、処理が非同期な部分があったりすることに起因するようです。サーバサイドを別言語で書いていたりすると、Webブラウザ向けだけJavaScriptを使わないといけないという制約も嫌がられます。 サーバサイドをGoで書いているのであれば使ってみたいのがJoyです。GoをJavaScriptに変換するライブラリです。 Joyの使い方 最も簡単なコードです。 package main func main() { println("Joy to the world!") } これを変換すると次のようになります。多少冗長的な部分もありますが、それほど酷くないコードです。 $ joy main.go ;(function
CoreUI - Vue/Bootstrap製の管理画面UI MOONGIFT
管理画面は主に運営元が使う画面になるので、デザインへのこだわりが殆ど感じられないことが多いです。しかし運営元が使いやすい画面でないと細かい制御がしづらかったり、サービスのステータス把握が遅れたりするのではないでしょうか。 そこで使ってみたいのがCoreUIです。VueとBootstrapを使って作られた管理画面テンプレートです。 CoreUIの使い方 スクリーンショット多めで紹介します。まずはダッシュボード。このようなUIの管理画面が簡単に作れます。 ボタン。 ソーシャルボタン。 カード。 フォーム。 モーダル。 スイッチ。 テーブル。 タブ。 アイコン。Font AwesomeかSimple Line Iconsがサポートされています。 ウィジェット。 こんなウィジェットも。 チャート。 ログイン画面。 登録画面。 エラー画面。 CoreUIはVueで作られていますので、表示する際にもW
wcode - Webブラウザ上で動作するプログラミングエディタ
AtomやVisual Studio Codeなど、Web技術を使ってプログラミングエディタが動くのが当たり前になっています。JavaScriptエンジンの高機能化はもちろん、HTML5の高機能化によって実現されています。 wcodeは同じようにWeb技術を使ったコードエディタです。Webブラウザ上で動作するのがポイントです。 wcodeの使い方 実行しました。起動する際にはディレクトリを指定します。 入力補完機能付きです。 ハイライトもあります。 フォルダの作成もできます。 wcodeはまさにAtomやVS Codeのような感覚で使えます。ローカルで使う意味はないかも知れませんが、Webサービスとしてコードエディタを提供しているサービスは多いかと思います。そうしたサービスがwcodeをベースにすると開発者にとっては使い勝手が良さそうです。 wcodeはnode/JavaScript製のオ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WEBページに簡単にタブメニューを設置できるjQueryプラグイン「tabs.js」。今回探し回った中では最も手軽に使えてシンプル。
