pell - 1KBの軽量なWYSIWYGエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webでコンテンツを公開するのが当たり前になっている一方、HTMLを習得している割合はそれほど高くありません。そのため、コンテンツを作成する負荷を軽減するためWYSIWYGエディタの存在は大事になっています。 今回はpellというエディタを紹介します。わずか1KBという軽量なライブラリです。 pellの使い方 こちらがエディタ画面です。白黒のシンプルなUIです。 日本語も使えます。 文字装飾も可能です。 画像はURLを入力します。 pellはとてもシンプルなWYSIWYGエディタですが、文字装飾や画像の追加など必要十分な機能は揃っています。さらに依存ライブラリもなく、導入できます。多くのフレームワーク、ライブラリと連携できるでしょう。 pellはJavaScript製のオープンソー
BotUI - Web上で作るボット対話UI
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ボット系サービスにおいて大事なのはボットとの対話インタフェースです。何かこちらが疑問を投げかけると、それに対してボットが答えます。最近の質はAIによって急激に向上していますが、対話インタフェースはずっと昔から変わりません。 今回紹介するBotUIはそんなボットとの対話インタフェースをWeb上で手軽に実装できるライブラリです。 BotUIの使い方 例です。選択肢が表示されています。 選択すると入力が促されます。 さらに選択が続き、完了となります。 別なデモの流れです。 数値の入力なども行えます。 BotUIでは単純な選択肢であったり、入力を促すと言った手順を経てボットと対話しながら処理を実行できます。デモはもちろん決まった処理しかできませんが、実際にはWeb APIを通じて細かい情報
Propeller - レスポンシブ/マテリアルデザイン対応の管理画面テンプレート MOONGIFT
最近のWebデザインのトレンドはどんどんアプリ風に、複雑になっています。レスポンシブWebデザインによって、画面幅を意識したデザインになり、さらにマテリアルデザインによってユーザのアクションを意識するようになっています。これをすべて実装したサイトのデザインはとても難しいでしょう。 そこで使ってみたいのがPropellerです。管理画面のデザインに特化したレスポンシブ/マテリアルデザインなフレームワークです。 Propellerの使い方 スクリーンショット多めで紹介します。まずはダッシュボード。 リスト。アイコン付きもあります。 タイポグラフィ。 アイコン。 影。 アコーディオン。 アラート。 バッジ。 ボタン。 モーダル。 ドロップダウン。 リスト。 ナビゲーションバー。 ポップオーバー。 プログレスバー。 タブ。 ツールチップ。 カード。 フローティングアクションボタン。 フォーム。 デ
gpu.js - WebブラウザでGPUを手軽に扱えるようにするライブラリ MOONGIFT
GPUは単純な計算処理などを行うのに適しています。アニメーションのような処理も得意です。最近ではAIのモデル作成などにGPUが注目されていますが、CSS3アニメーションなどWebブラウザでも利用できる場面が数多くあります。 今回紹介するgpu.jsはそんなGPUによる計算処理を手軽に実現できるようにするJavaScriptライブラリです。 gpu.jsの使い方 gpu.jsを使ったコードは次のようになります。 const gpu = new GPU(); // Create the GPU accelerated function from a kernel // function that computes a single element in the // 512 x 512 matrix (2D array). The kernel function // is run in a
jquery-rsSlideIt - 2D/3Dでダイナミックなスライド切り替え MOONGIFT
よりインパクトのあるスライドを目指すならば一つ一つのスライドはもちろん、そのスライドの切り替えにもこだわると良いでしょう。ダイナミックなアニメーションがあると目を引くプレゼンテーションにつながるはずです。 今回紹介するjquery-rsSlideItはjQueryプラグインとして作られたスライド切り替えライブラリです。 jquery-rsSlideItの使い方 2Dの場合です。回転の伴うスライドが作れます。 3Dです。よりダイナミックに回転しながら表示されます。 jquery-rsSlideItは回転しながらダイナミックにコンテンツの表示が切り替わります。プレゼンテーションのスライドはもちろん、写真などを印象強く表示するのにも使えそうです。jQueryプラグインなので使いやすいのも魅力です。 jquery-rsSlideItはjQuery/JavaScript製のオープンソース・ソフトウェ
Aperture - nodeを使ってコマンドラインでスクリーンキャプチャ MOONGIFT
コンピュータの操作を記録するソフトウェアは幾つもあります。昔はあまり選択肢がなかったですが、今ではOS標準のソフトウェアでレコーディングできたりします。その多くのソフトウェアはGUIで、マウス操作を使って録画しなければなりません。 もっとプログラマブルにレコーディングをしたければApertureを使ってみましょう。コマンドラインで呼び出せるスクリーンレコーダーです。 Apertureの使い方 実際に録画された内容をアニメーションGIFにしたものです。 ApertureはMPEG4のファイルとして保存されます。FFMPEGで録画した場合に比べて1/3以下の負荷で済むのが利点とのことです。軽量ならば長時間の録画にもきっと耐えられるでしょう。録画する大きさ、場所などもコードで指定できるので、常に決まった場所を録画すると言った時に便利そうです。 Apertureはnode/JavaScript製の
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で既存のスクリプトが一覧できま
jQuery Images Compare - 二つの画像をスライダーで比較
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました JPEGなど圧縮率によって画像の粗さやサイズが変わるフォーマットの場合、実際にその保存方法によってどう変わっているか比較してみないと分かりづらいでしょう。その時、ウィンドウを切り替えながら比較しても画面がチカチカしてしまってははっきりと分かりません。 そこで使ってみたいのがjQuery Images Compareです。スライダーを使ってスムーズに比較できます。 jQuery Images Compareの使い方 こちらがデモです。右と左で画像を重ねて比較できます。 スライダーを動かすと表示範囲が変わります。 動かしているところです。 jQuery Images Compareを使うとほぼ同じ構図の画像を二つ重ねて比べられます。対応しているブラウザはIE9以上になるので、幅広いブラ
PHP って JavaScript に変換できるの？できるわけないだろ！ babel-preset-php ってのが今日リリースされた？これまさか・・・。ファーーーーーーーーーーーwwwwwwwwwwww - Qiita
PHP って JavaScript に変換できるの？できるわけないだろ！ babel-preset-php ってのが今日リリースされた？これまさか・・・。ファーーーーーーーーーーーwwwwwwwwwwwwPHPJavaScriptbabel PHP (7) を Javascript (ES7) に変換するための Babel プリセット babel-preset-php が本日 (2017-7-12) リリースされたみたいです 正直、「は？凄すぎだろ (小並感) 」という言葉しか出てきませんww とりあえず面白そうなので試してみます！ 使い方 公式の通りですが、プロジェクトを作成し babel-cli と babel-preset-php をインストールします。
jsonsmash - ファイルシステムのような操作ができるJSONビューワー MOONGIFT
Web APIを伴う開発を行う際にはJSONファイルを使うことが増えています。XMLに比べると冗長性がなく、サイズが小さくて済むのですが、改行などもなく見づらいのが難点です。そのため、データのある場所を間違えてしまって、うまく動かないなんてこともよくあります。 そこで構造を確認するために使ってみたいのがjsonsmashです。インタラクティブにJSONの内容を確認できます。 jsonsmashの使い方 jsonsmash コマンドにJSONファイルを渡せばOKです。そしてlsでキーを並べたり、catでデータの表示ができます。 $ jsonsmash http://headers.jsontest.com/ > ls Host X-Cloud-Trace-Context > cat X-Cloud-Trace-Context: 0f8474abd239690f43f5e9c82b07ff7f
masq - 開発で使えるDNSサーバ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Basecampが開発したPowというツールは自動的に.devというドメインでアクセスできるようになります。これが便利で、サーバのポート番号を指定するのに感じていた面倒さはありません。しかしPowはRackサーバ向けであって他の開発に使えませんでした。 そこで使ってみたいのがmasqです。PowからDNSサーバの部分だけを切り出したソフトウェアです。 masqの使い方 masqを実行すると、*.devというURLアクセスがすべてlocalhostを返してくれるようになります。 $ ping test.dev PING test.dev (127.0.0.1): 56 data bytes 64 bytes from 127.0.0.1: icmp_seq=0 ttl=64 time
VMS - Vue.js製のCMS MOONGIFT
CMSは常に新しいものが登場します。それはプログラミング言語だったり、フレームワークだったりします。CMSがあることで、そのプログラミング言語やフレームワークの使い方が分かるようになります。CMSは殆どの方が機能について理解していますので、コードの理解も早いでしょう。 今回はVue.jsを使ったCMS（管理画面）のVMSを紹介します。 VMSの使い方 管理画面のダッシュボードです。 ユーザ一覧。 ページを追加する画面です。 アンケート機能もあります。 こんな感じで設問を追加します。 質問の一覧です。 VMSはVue.jsでできていますので、UIの遷移などはとてもスムーズです。Vue.jsの書き方、使い方を学ぶ上でも役立つのではないでしょうか。なお、ユーザが見る画面については自分で開発する必要があるようです。 VMSはnode/JavaScript製のオープンソース・ソフトウェア（MIT L
kingraph - 家系図/組織図ジェネレータ MOONGIFT
組織図であったり、家系図といった図を描こうと思ったらどんなツールを使っているでしょうか。ドローツールも使えますが、編集したりするのが面倒だったりします。Excel職人の方はやはりExcelを駆使して作り上げてしまうかも知れません。 今回はWebベースで使える家系図を作れるkingraphを紹介します。 kingraphの使い方 kingraphはYAML形式で組織図を定義します。例えば以下のようになります。 families: - parents: [Marge, Homer] children: [Bart, Lisa, Maggie] - parents: [Lisa, Milhouse] children: [Zia] people: Marge: fullname: Marjorie Bouvier Simpson そしてSVG/PNG/DOTファイルとして出力できます。 king
Godzilla - ES2015のJavaScriptをGoに変換
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました JavaScriptがあらゆる領域で使われるようになっています。Webブラウザはもちろんのこと、サーバサイドやIoT、スマートフォンアプリなどもJavaScriptで作れるようになっています。それだけにJavaScriptさえ覚えておけば大丈夫という風潮があるのも確かです。 しかしシステムには向き不向きがあります。もしGo言語の方が向いていると思う場面にはGodzillaを使って変換してみてはいかがでしょう。 Godzillaの使い方 Godzillaの使い方は簡単です。buildでGoのビルドが、runで変換結果をそのまま実行します。 $ bin/godzilla --help Usage: godzilla [command] Available Commands: build
docsify - 動的/静的両方に対応したドキュメントジェネレータ MOONGIFT
APIやSDK、ライブラリなどにドキュメントは必須です。しかも読みやすく、分かりやすいドキュメントでなければなりません。デザインに凝るのではなく、可読性を重視して作られるべきです。そういったドキュメントはなかなか作るのは難しいでしょう。 そこで使ってみたいのがdocsifyです。ドキュメントサイトを作るためのフレームワークになります。 docsifyの使い方 デモです。左側がメニュー、右側にコンテンツが表示されます。 多言語対応しており、右上のメニューから切り替えられます。 テーマもあります。こちらはbuble。 dark。 docsifyはデフォルトでは静的なHTMLを出力せず、動的に生成する形になっています。そのためUIとしてはスムーズなコンテンツ切り替えができるようになっています。また、SEO対策として静的なHTMLファイル出力も対応しています。 docsifyはnode/JavaS
SecureLogin - 別なデバイスで許可して認証する
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 認証の仕組みはWebがはじまった当初から大して進化していません。IDとパスワードという二つの認証情報をベースに鍵ファイルを使ったり、スマートフォンを使った二段階認証と発展版が出ていますが、大きくは変わっていません。 新しいログインの仕組みとして登場したのがSecureLoginです。簡単に言えば二つのデバイスを組み合わせた認証です。 SecureLoginの使い方 例えばこのデモサイトで認証したいとします。 今回はChrome機能拡張を使った認証を行います。 最初にパスワードの生成に20秒ほど要します。 サイトやアプリなどで使えるレガシーなパスワード生成ツールもあります。 デモサイトで認証しようとするとChrome機能拡張が立ち上がって自動的に認証を行ってくれます。 SecureL
share-this - Medium風にテキストをシェアする
オンラインのコンテンツはシェアされることで広まっていきます。Facebook、Twitter、Redditなど様々なサイトでシェアされ、さらに拡散されていきます。しかしシェアするというのも多少なりとも面倒なものです。 そこで使ってみたいのがshare-thisです。Webサイト内に仕込んでおくことで、シェアが手軽になります。 share-thisの使い方 使っているところです。文字列を選択すると、上からツールチップが下りてきます。 後はサービスを選択すると、ウィンドウが開いてシェアできます。Twitter、Facebook、Redditといったサービスに加えて、コメントを書くこともできます（右端）。 そしてコメントを残しておけます。 share-thisではこの他、選択した文字を読み上げる機能もあります。アイディアはMediumからきています。コンテンツをどんどん拡散してもらうためにも使っ
decaffeinate - CoffeeScriptからES6へ変換
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました CoffeeScriptはJavaScript代替言語として一世を風靡しましたが、言語トレンドの移り変わりは非常に速く、今はECMAScript 2015（ES6）やTypeScriptで作るのが流行になっています。もうあまりCoffeeScriptを使う人はいないのではないでしょうか。 そうした中にあって扱いに困るのが既存のCoffeeScriptファイルです。そこで使ってみたいのがdecaffeinateです。 decaffeinateの使い方です。 メイン画面です。左側に記述したCoffeeScriptがECMAScript 2015に変換されます。 幾つかの変換を組み合わせており、その途中段階を見ることもできます。 同じ内容をECMAScript 2015で記述した場合にど
appr-wrapper - Apple Payを手軽に実装できるJavaScriptライブラリ
Appleの提供する決済システムApple PayはiOS、macOSユーザにとっては便利な決済方法となっています。通常Webサービスレベルで提供されるところが、OSと関連した形で使えるのが特徴です。また、決済に対して障壁の少ないApple IDが使えるのも利点です。 そんなApple PayをWebシステムで手軽に使えるようにするのがappr-wrapperになります。 appr-wrapperの使い方 こちらはデモです。決済ボタンがあります。 決済を開始しました。 筆者アカウントの場合、請求先住所の問題で失敗します…。 appr-wrapperではサンプルのJavaScriptコードも提示されています。この方法に沿って書くことで、簡単にApple PayをWebブラウザ上で実現できるようになります。小さなコマースに組み込んでみるのも良いですし、ちょっとした物販で使っても良さそうです。
mokuji.js - HTML文書の目次を自動生成 MOONGIFT
HTMLは基本的には構造化されたドキュメントです。見出しや小見出しをHタグで定義することでクローラーやシステムにとっては構造化された文書であると判断できます。人間の目ではスタイルシートで自由に見た目を変更できてしまうので分かりづらいかも知れません。 しかし開発者向けのドキュメントなどできちんと構造化されているならばmokuji.jsのようなライブラリが使えます。mokuji.jsは目次を自動生成するライブラリです。 mokuji.jsの使い方 上半分にあるのが自動生成された目次です。 英語の場合はハッシュが英語になっています。 日本語の場合はエンコードされた文字になっています。これはWikipedia風です。 mokuji.jsを使えばドキュメントの横に目次を出したりするのが簡単になります。わざわざ目次を手で作っても文書がアップデートすると使えないものになってしまいます。あらかじめHタグで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
