mdr - ターミナル用のMarkdownビューワー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownは閲覧時、専用のビューワーを通して見ることが多いかと思います。素のままでも可読性に優れたフォーマットとはいえど、ビューワーを使った方が見やすいのは確かです。 普段ターミナルでMarkdownファイルを閲覧する際にcatやlessを使っていた方は、mdrを使ってみましょう。 mdrの使い方 デモです。画像も一部再現されています。 テーブルもちゃんと表示されます。 mdrは文字の色分け、画像の表示、テーブルの表示など細かくMarkdownファイルが見やすくなる工夫がされています。使い方もMarkdownファイルを引数に渡すだけで簡単です。あらかじめインストールしておくと使い勝手が良さそうです。 mdrはGo製のオープンソース・ソフトウェア（MIT License）です。
PWA Starter Kit - PWAを学ぶためのテンプレート
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました PWA（Progressive Web Apps）というキーワードがトレンドになっています。しかしPWAは特定の技術を指すのではなく、Webでの体験をよりネイティブ並に向上させるという概念でしかありません。そのため何から取り組んだら良いかが分かりづらいです。 そこで勉強のベースに使ってみたいのがPWA Starter Kitです。PWAに関する要素が盛り込まれたテンプレートです。 PWA Starter Kitの使い方 こちらがテンプレートです。 カウンター。これは再読み込みすると消えてしまいます。 ショッピングカート。 マニフェストファイルもきちんと設定されています。 PWA Starter KitではPWAとして必要になる要素（レスポンシブ、SPA、アプリマニフェスト）などの要
Tabulator - これはすごい。HTMLテーブルを高機能に MOONGIFT
テーブル表示はWebシステムのデファクトとも言えます。業務システムはいうに及ばず、管理者画面などでも必ず求められる表示です。そしてただ表示すればいいという訳ではなく、ソートやフィルタリング、インラインでの編集など様々な機能が求められるものです。 そんな多機能なテーブル表示を実現してくれるのがTabulatorです。多くのニーズを満たしてくれることでしょう。 Tabulatorの使い方 てんこ盛りなデモテーブル。ざっと見てもフィルタ、ページネーション、グラフ表示、ソートなどの機能が確認できます。 インライン編集もサポートされています。 データに合わせて幅を自動調整。 行をクリックして展開する機能。 カラムをグループ化。 カラムを縦に。これはカラムが多い時に便利そうです。 ドリルダウン。 テーブルを入れ子にもできます。 スパークライン表示。 フッターで集計。 HTMLテーブルを変換する機能もあ
google-apps-script - Google Apps Scriptをローカルで開発/管理 MOONGIFT
Google Apps Scriptを使うとGoogleスプレッドシートやドキュメントなどの自動操作ができるようになります。若干特殊なJavaScriptにはなりますが、デバッグ実行もできるので開発もしやすいです。難点はコードをすべてWeb上で書くという点です。 開発をローカルで行いたいという方はgoogle-apps-scriptを使ってみましょう。 google-apps-scriptの使い方 createオプションを使ってコードを生成します。 $ gas create gas-test Creating 'gas-test' in your Google Drive... [✔] [1ePybn623IqFsWw7qmIGQnfFxX5lVDMJ_hbMIuaSIwub9Sj29i1aIj1ax] gas-test 後はコードを変更するだけです。listで既存のスクリプトが一覧できま
JointJS - 多彩な図を描けるJavaScriptライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上での表現力を向上させるためのライブラリが多数存在します。多くはグラフを描くものであったり、より複雑なチャートを描くものです。さらにWebGLを使ったり、Canvasに複雑な描画を行うものもあります。 今回紹介するJointJSはCanvas上に図形を描くのですが、JavaScriptと連携したインタラクティブな図を描けます。 JointJSの使い方 デモです。まずは回転する図形。 こんな図形も描けます。なお、緑と赤のポイントはドラッグでラインを接続できます。 各オブジェクトはマウスでドラッグできます。 図はグルーピングされていたり、コネクトされている場合は線も一緒に動きます。 デモです。赤いポイントがアニメーションしています。 パイチャートともちょっと違う図形です。 各要素
handsontable - グリッド表示にExcel並の機能を
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 業務システムと言えばグリッド、テーブルが求められます。最初はHTMLで簡単に作成するのですが、すぐに追加の機能が求められます。ソート、フィルタリング、ヘッダーや左側の列を固定して欲しいと言った具合です。 そんな厄介な要望をスクラッチで対応していたのではとても時間がかかってしまいます。ぜひhandsontableを試してみましょう。 handsontableの使い方 handsontableには多くの機能が備わっています。まずはページネーション。 パスワードを非表示にもできます。 新しい行を作成する際にplaceholderを表示。 フォーカスがあたっているセルをハイライト。 セルを細かくカスタマイズ。画像の埋め込みもできます。 ソートももちろんできます。 入力バリデーション。 ヘッ
MJML - レスポンシブなHTMLメール用テンプレート
今やレスポンシブデザインはWebだけでなく、メールにおいても大事な存在になっています。メールもデスクトップはもちろん、スマートフォンやタブレットで閲覧することもあるでしょう。 そんなメール用のレスポンシブデザインを実現してくれるフレームワークがMJMLです。専用の記法で作るのが特徴です。 MJMLの使い方 MJMLのシンプルなデモです。 モバイルで見た場合のデザインに変更しました。 こんな複雑なデザインも実現できます。 メニューをつけたデザイン。 モバイルデザイン。 MJMLを使うことで、最適なレスポンシブデザインが容易に実現できるようになります。メールはサーバ側のHTMLと異なり、JavaScriptを実行したり、データの出し分けもできません。MJMLを使えばメールの反応率も大きく変わってくることでしょう。 MJMLはnode/JavaScript製のオープンソース・ソフトウェア（MIT
FormFiller - フォーム入力しながらの開発作業がとてもスムーズに MOONGIFT
Webシステムのテストと言えば、入力してサーバに送ってデータをチェックして、また入力して…の繰り返しです。それこそうんざりするほど入力を繰り返すのではないでしょうか。 そこで使ってみたいのがFormFillerです。ブックマークレット型のソフトウェアで、入力を再現してくれる機能があります。 FormFillerの使い方 FormFillerはブックマークレットなので、ツールバーなどに登録後、まず何も入力していないフォームでクリックします。 そして再度フォームを表示した際にブックマークレットを実行すると入力内容が再現されます。 使用例。ブックマークレットを実行すると最後に入力した内容になります。 FormFillerは入力を監視し、最後の入力内容に復元してくれます。JavaScriptを修正しつつ、フォーム入力を行う…といったフロントエンド開発に大いに役立つことでしょう。 FormFille
Google製のハッキング用Webアプリケーション·Jarlsberg MOONGIFT
JarlsbergはGoogle製のオープンソース・ソフトウェア。Webサイトにおいてパスワードを漏洩したり、他人の注文情報が見えてしまったと言ったセキュリティインシデントが後を絶たない。高度なものもあるが、大抵は開発者のちょっとした注意で回避できるものが多かったりする。 Jarlsbergはコードスニペットを登録するサービス 自分で作り上げたものは意外と信用してしまうもので、セキュリティチェックをしていても甘くなりがちだ。そこで使ってみたいのは、実際にセキュリティホールがあると宣言されているJarlsbergだ。 JarlsbergはGoogle製のソフトウェアで、XSSやXSRFといったセキュリティホールが内在化している。なぜこれを作ったかと言えば、実際にハッカー達がどのようにアタックしてくるかを試せるようにするためだ。確かにあるかないか分からないものを試すより、あると分かっている方が
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
