Cash - サイズが1/10なjQuery代替 MOONGIFT
jQueryは古い、重いなどと言われつつも今なお一番使われているライブラリなのではないでしょうか。それだけ便利で使い勝手が良いということです。ただしみんなが全機能を使っているかと言われると怪しい気がします。 使っている機能がDOM操作ばかりなのであればCashに切り替えても良いかもしれません。Cashは軽量なjQuery代替です。 Cashの使い方 Cashはミニファイ+Gzipで3.5Kとなっています。jQueryの1/10です。なお、非圧縮の場合で20.6K、これはjQuery（287K）の1/14程度になります。サイズが小さいのは大事ですが、何よりコードが理解しやすいというのが良いのではないでしょうか。 サポートしている機能としては以下のメソッドになります。 addClass css data height off attr add removeData innerHeight on
Umlaut - PlantUMLをその場で画像化するUMLエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました UMLの失敗（失礼）はGUIツールを必要としたことではないでしょうか。大抵その手のツールが効果であったり、使いこなすのに時間が必要で、そういった面倒さが離れてしまうのに繋がったのではないかと思います。 しかしシステムのビジュアル化としては良い仕組みであったと思います。問題は記述法で、テキストベースで書けていれば変わったかも知れません。そこで今回はUmlautを紹介します。 Umlautの使い方 UmlautはPlantUMLで書いた内容をビジュアル化するビューワーです。 デモです。左側に書かれた内容が右側で画像化しています。 シーケンス図。 アクティビティ図。 ユースケース図。 コンポーネント図。 ステート図。 テキストで書くだけでは結果が想像しづらいですが、その場でプレビューでき
airtar - AirDrop風にファイルを送受信できるコマンド
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました コンピュータ同士でファイルを渡し合うという手段は意外と面倒です。メールは厄介ですし、Dropboxを使うにしてもまず共有設定がいります。小さなファイルを幾つもアップロードするのも面倒でしょう。 そこで使ってみたいのがairtarです。ローカルネットワークにつながったコンピュータ同士でファイルの交換ができます。 airtarの使い方 airtarはファイルを交換したいディレクトリに移動し、次のようにコマンドを打ちます。またはファイル名を引数に与えても大丈夫です。 $ airtar . waiting for receiver... この状態で接続待ちになりますので、ファイルを受け取りたい方でもairtarを実行します。そうすると自動的に現在のディレクトリにファイルがダウンロードされま
jfMagnify - 虫眼鏡風UIで写真を拡大
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近の写真は高解像度になっており、単純に表示しただけでは細かい部分まで確認できなくなっています。折角撮影した写真について、詳細な部分まで見たい、見て欲しいと思うことはないでしょうか。 そこで使ってみたいのがjfMagnifyです。虫眼鏡ツールを使ってごく小さい部分まで表示できるライブラリです。 jfMagnifyの使い方 デモです。マウスでルーペ部分をドラッグで移動できます。 新しいと思ったのはルーペの横にある拡大/縮小ボタンです。 拡大するとより細かく確認できます。 寝ている男性の顔も確認できました。 jfMagnifyは単純に表示している写真を拡大しているだけですが、Retinaディスプレイなどで2倍解像度の写真を表示している場合はより細かく確認できそうです。また、jQuery
megamenu.js - レスポンシブ対応のメガメニューライブラリ MOONGIFT
Webサイトの上部、ヘッダーにメニューを設けているサイトはたくさんありますが、ただ文字を並べているだけではインパクトが薄いかも知れません。そこで使われているのがメガメニューと呼ばれる巨大なメニューです。 今回紹介するmegamenu.jsはメガメニューを実現してくれるライブラリで、特にレスポンシブ対応なのがポイントとなっています。 megamenu.jsの使い方 こちらがデモです。 メニューをクリックするとこんな感じで多くの選択肢が表示されます。 少ない場合もあります。 さらに幅が狭い場合です。階層メニュー表示ができます。 ＋をクリックするとメニューがドリルダウンできます。 幅が狭い時のメニューは一般的なハンバーガーアイコンを使ったものとなっています。画像を埋め込んだメニューは対応していないようですが、多くのサイトでは十分と言えるでしょう。 megamenu.jsはJavaScript製、
MERN - Express/Reactを使ったWeb開発フレームワーク MOONGIFT
Linux + Apache + PHP + MySQLの組み合わせがWeb開発のスタンダード的な位置づけになっていた頃、それぞれの頭文字をとってLAMPスタックと言うのが流行りました。同様にフレームワークが変わるために名称も異なってきました。 今回はMERNスタックを標榜するソフトウェアを紹介します。MongoDB + Express + React + nodeという組み合わせのアーキテクチャになります。 MERNの使い方 MERNのディレクトリ構成は次のようになっています。サーバサイドはMVCに分かれており、Reactを使ったサーバサイドレンダリングを行っています。 テストのサーバを立ち上げたところです。ブログエンジンとなっています。右側にReactで持っているオブジェクトの内容が確認できるのがユニークです。 データの詳細も確認できます。 クリックで画面は変わりますが、サーバへのアク
Kuzzle.io - リアルタイム通信対応のバックエンドシステム MOONGIFT
Webサイトやアプリを開発していて、必ず必要になるのがバックエンド（サーバ）です。アプリではParse.com（間もなく終了しますが）であったりニフティクラウド mobile backend（筆者がエヴァンジェリストをやっています）などがありますが、Webアプリケーションにおいてもバックエンドは必須です。 そんなバックエンドシステムをオープンソースで提供するのがKuzzle.ioです。一回使い方に慣れてしまえば開発が大幅に楽になるかも知れません。 Kuzzle.ioの使い方 Kuzzle.ioのデモです。いわゆるタスク管理です。 日本語も大丈夫です。タスクを追加したり消したりできます。 Kuzzle.ioのその他の特徴としては、リアルタイムであり、検索機能が備わっているということがあります。リアルタイムはゲームやチャットなどで使えるでしょう。Web、モバイルアプリ、IoTなどで利用ができる
JavaScripthon - Pythonで書いてES6のコードを生成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 今のところ、Webブラウザで適切に動作が保証されているプログラミング言語はJavaScriptしかありません。そのため、Webアプリケーションを開発する上でJavaScriptの習得は必須なのですが、なるべくなら書きたくないという方も多いです。 もしあなたがPythonプログラマーであれば使ってみたいのがJavaScripthonです。PythonコードからECMAScript2016（ES6）へ変換してくれるソフトウェアです。 JavaScripthonの使い方 コード例です。普通にPythonのコードに見えます。 # -*- coding: utf-8 -*- # :Project: metapensiero.pj # :Author: Andrew Schaaf <andre
Descartes - JavaScriptでスタイルシートを記述
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました スタイルシートはクラスやIDの仕方が多彩であるため、デザイナーによって記述が大きく異なります。その結果、更新を重ねるたびに複雑で分かりづらいものになっていきます。 そんな煩雑化を防ぐためにSassやLessを使ってプログラマブルに管理するのが一般的になっています。今回はさらにプログラマブルに、JavaScriptでスタイルシートを記述するDescartesを紹介します。 Descartesの使い方 Descartesの例です。JSONを使って記述するのがポイントで、関数を使ったりMix-inを使うこともできます。 var reset = {"margin": 0, "padding": 0, "box-sizing": "border-box" }; var rand_angle
lup - JavaScriptで手軽にCSS3アニメーションを実現
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました CSS3でアニメーションが追加されたとは言え、効果的に実装するのは色々面倒です。そのため、分かってはいつつもなかなか手出しできないという人は多いのでは内でしょうか。 そんな方に使ってみて欲しいのがlupです。jQuery風に簡単な指定を使ってアニメーションできるJavaScriptライブラリです。 lupの使い方 一例です。色が刻々と変わっているのが分かるでしょうか。 実際の指定です。addを使って色を指定し、waitを使って一定時間そのまま停止します。そしてthen()を使って実行し、最後にend()を実行すると停止します。 lup("#test").add('green').wait(2000).remove().add('red').wait(2000).then().end
marginotes - 文章の横にすてきな注釈を
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 本を読んでいると、左右に余白があって、必要に応じて単語の説明が記載されていることがあります。注釈を本の最後にまとめて載せているのに比べると分かりやすく、読みやすいのではないでしょうか。 そんな効果をWeb上で実現してくれるのがmarginotesです。Webらしく、よりインタラクティブになっています。 marginotesの使い方 marginotesは次のように指定します。descという要素を使います。 <span desc="The rainiest place in Europe. Probably. Maybe.">Brión</span> 注釈はマウスオーバーで表示されます。リンクとは別で下線が入っている部分が説明対象です。 右側に出すこともできます。 marginote
RazorFlow - 多数のグラフをサポートするHTML5ダッシュボードフレームワーク MOONGIFT
業務システムといえど、UIが整っている方がやる気が出るはずです。特にダッシュボード系のよく見る画面であれば分かりやすくなっているかどうかで生産性が大きく変わってきます。 今回紹介するオープンソース・ソフトウェアはRazorFlow、HTML5のダッシュボードフレームワークです。 RazorFlowの使い方 RazorFlowでは幾つかのグラフをサポートしています。 一覧も利用できます。 グラフはマウスオーバーで説明が出ます。 こちらはよりダイナミックなデータ変化ができます。フォームで表示するデータを絞り込めます。 カテゴリや名称などで検索できます。 RazorFlowは各種グラフの他、KPI表示パネル、ゲージ、テーブル、ドリルダウンなどの表示や機能に対応しています。HTML5を使っており、リアルタイムな描画アップデートも可能です。 RazorFlowはHTML5/JavaScript製のオ
回転だけならコード3行、JavaScript制御できる「IoTモーター」
シールドインタラクションは、Webブラウザやスマートフォンから制御可能なモーターユニット「Webmo」を2016年5月28日より販売開始する。価格は2万9800円（税込）。 本体内にステッピングモーターの他、ドライバーやMCUなどが搭載されており、スマートフォンなどからJavaScriptやProcessing、OSCなどといったWebエンジニアやWebデザイナーにとってなじみ深い言語を用いてモーターを制御できる。 モーターの分解能は25600ステップ（最大1/128 マイクロステップ動作）であり、4096ステップの分解能を持つエンコーダーも搭載しており、回転角度の取得も行える。MCUとしてはインテルのEdisonが採用されている。
Boostnote - オンラインでシェアもできるMarkdownベースのメモ帳
メモ環境は大事です。気がついた時にさっとメモをしておけば、後々見返すこともできます。かつメモ環境はなるべく一カ所に統一しておくのが大事です。個人的には適当なテキストファイルに書き込んでいます。 しかし個人的にBoostnoteに集中させようと思っています。それくらい使い勝手のいいソフトウェアです。 Boostnoteの使い方 メイン画面です。 フォルダ、メモ一覧そしてメモと3段階の構成になっています。メモにはタグがつけられます。 新しいメモを作成しました。 メモはMarkdownで記入できます。 編集時はAceエディタを使っているので見やすいです。 Boostnoteの面白いのはメモをシェアできる機能があることで、専用の7日間のURLが生成されます。ローカルでメモを書いて、必要があればオンラインで共有できます。検索機能も便利なのでぜひ使ってみてください。 BoostnoteはElectro
youtube-to-gif - YouTube動画をアニメーションGIFに変換
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました YouTubeには面白い動画がたくさんアップロードされています。その一部を抜き出してアニメーションGIFにしたいと思ったことはないでしょうか。動画をダウンロードし、一部を切り出してアニメーションGIFに変換する…考えただけでも面倒です。 そこで使ってみたいのがyoutube-to-gifです。一連の手順を一発で行ってくれるコマンドです。 youtube-to-gifの使い方 使い方は簡単で、URLと開始時間そして録画時間を指定するだけです。 youtube-to-gif -u https://www.youtube.com/watch?v=NqxSgp385N0 -b 30 -d 5 実行すると、下記のようにアニメーションGIFが生成されます。画像の大きさも変更できますが、これくら
React Grid Layout - React用のグリッドシステム
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Reactを本格的に使っていく上では多くのコンポーネントが必要になります。その基礎となるのがグリッドではないでしょうか。グリッドが作れれば、その中にコンテンツを配置して整理されたレイアウトが作れるようになります。 今回紹介するのはReact Grid Layout、React用のグリッドレイアウトシステムです。ドラッグ&ドロップやリサイズにも対応しています。 React Grid Layoutの使い方 実際に使っているところです。ドラッグで移動したり、大きさの変更ができます。スタティックとして移動できないように指定することもできます。 さらにフリーレイアウトとして重ならないけれど縦の配置は自由と言ったレイアウトも作れます。 この他、配置情報をlocalStorageに保存しておいて
snapline - サイトがレンダリングされる様子をアニメーションGIF化 MOONGIFT
Google ChromeのDevToolを使うと、Webサイト開発における改善点が多数見えてきます。表示上のトラブルを感じている場合、タイムライン機能を使うのが良いでしょう。 サイトがどのようにレンダリングされているのか分かりますし、さらにそれをアニメーションGIFとして確認できるようにしてくれるのがsnaplineです。 snaplineの使い方 使い方のデモです。まずTimelineタブで記録をします。Screenshotsを忘れずにチェックしておきます。 そしてSave Timeline Dataを選択します。 保存したJSONをsnaplineに渡すと、アニメーションGIFが生成されます。 snaplineではサイトのがレンダリングされていく様子がより分かりやすくなります。思った通りに構築されているかどうか、一目で分かるでしょう。一つ一つの画像では分からない情報も、snaplin
MathQuill - Webベースで簡単に数式を編集
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webと相性の悪い情報として数式があります。階乗を表す記号は「^」ですし、割り算も/を使って表現しなければなりません。これでは複雑な数式は分かりづらいものになります。そのため、ワードプロセッサーなどは独自の数式エディタを備えています。 今回紹介するのはMathQuill、Webベースの数式エディタです。しかも数式のまま編集できてしまうのがポイントです。 MathQuillの使い方 デモです。数式がちゃんとビジュアル化されているのが分かります。 編集しているところです。数式のまま編集できています。 ゼロから数式を書いているところです。 MathQuillを使うと組み上がっている数式の状態で編集できるので理解しやすいのが利点でしょう。また、編集もしやすいということはアップデートしやすい
Spec.js - スマートフォン/タブレットのスペックを判定 MOONGIFT
Webサイトへモバイルやデスクトップ、タブレットなどが入り乱れてアクセスするようになると、それぞれに分けて情報配信を行いたいと思うようになります。さらにスマートフォンの中でも使える機能が異なったりして、そのための処理分けが複雑なものになっているかも知れません。 そこで使ってみたいのがSpec.jsです。より細かく端末の情報が絞り込めるライブラリになります。 Spec.jsの使い方 Spec.jsのデモです。ユーザエージェントを使って各種機能やスペックを知ることができます。例えばiPhone 6の場合は次のようになります。 var ua = new UserAgent(); // iPhone 6 var spec = new Spec(ua); spec.UNKNOWN // -> false spec.SOC // -> "A8" spec.GPU // -> "POWERVR GX64
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【個人メモ】JSON Serverを使って手っ取り早くWebAPIのモックアップを作る - Qiita
