lufo - 最近選択したドロップダウンの項目を優先表示
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webのフォームで何度も同じドロップダウンの項目を選択していると、項目を一番上に持っていって欲しいと考えるでしょう（都道府県、国名など）。しかし自分にとっての優先項目と他のユーザにとっての優先項目は異なります。 そこで使ってみたいのがlufoです。HTML5を使うことでスマートに解決しています。 lufoの使い方 lufoは任意のドロップダウンに対して設定できます。jQueryが必須です。 はじめは普通のドロップダウンですが、一回選択するごとに最近選択した項目としてリストの上に出るようになります。これは選択した項目をlocalStorageに残しておくことで、次に表示した際に再現してくれます。これならば個人のブラウザにしか依存せず、かつ自分はどんどん使い勝手が良くなるでしょう。 l
iframify - DOMをiframeに変換
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 自分のWebサイトでデザインを紹介したり、JavaScriptの実行結果を紹介したいと思った時は意外と面倒だったりします。特にデザインや元々のサイトデザインに影響される部分があったり、JavaScriptはセキュリティが気になるかも知れません。 そこで使ってみたいのがiframifyです。任意のDOMをiframeにしてくれるソフトウェアです。 iframifyの使い方 実際に適用しているデモです。上では単なるdivタグですが、下にあるのはiframeで囲まれています。 幅を指定したりすることもできるので、コンテンツのレスポンシブ環境下での見せ方なども提示できます。 オプションとしてスタイル、スクリプトタグを追加したりメタタグも指定できます。iframeを書いてコンテンツを別ファイ
AzerothJS - サーバサイドのコードを持たない静的サイトジェネレータ MOONGIFT
GitHub Pagesを使えば手軽にWebサイトを公開できます。静的なコンテンツのみですが、ローカルでコンテンツを作ってアップロードするような使い方であればブログやプロジェクトサイトは十分に作れます。 今回はそんな静的サイトを生成するAzerothJSを紹介します。シンプルな作りで、カスタマイズ性が高いのが特徴です。 AzerothJSの使い方 デモサイトです。 ソースコードのハイライトもできます。テーマは幾つか用意されています。 AzerothJSは独自のサーバ機能は持っておらず、Pythonなどのワンライナーを使うように指定されています。そして、コンテンツはMarkdownで作成し、開発中はMarkdownをダイナミックに読み込んで表示しています。 サイトができあがったらgenerator.jsを実行し、HTMLファイルが生成される仕組みです。テンプレートなどもシンプルなので、カスタ
mathdown - 計算式が使えるMarkdown記法をサポートしたリアルタイムコラボレーションノート MOONGIFT
Markdown記法は汎用的な一方、足りない機能の多さにストレスを感じることも少なくありません。せっかく皆が使えるようになってきた記法だけに、他の用途でも使っていきたいと思うはずです。 そこで元の記法を踏襲しつつ、自分で拡張してしまうと言う手があります。今回はMarkdown記法が使え、計算式も書けるmathdownを紹介します。 mathdownの使い方 mathdownはコラボレーションを重視しています。Wikiのように皆で計算式が書けます。 編集する場合は、数式の左側にキャレットを持っていって右に移動すれば元の文字列に展開されます。 画面中央にあった数式も文字列に展開されました。 mathdownはMathJaxの記法に則って作られています。また、コラボレーション部分にFirepadを使っており、リアルタイムコラボレーションを実現しています。学生、研究者などに向いたシステムと言えそう
executor editor - JavaScriptを実行できる埋め込み型エディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました かつてWebブラウザ上で任意のJavaScriptを実行しようと思ったらアドレスバーに入力するしかありませんでした。今はDevToolsが使えるようになり、自由にJavaScriptが実行できます。しかしこれはまだ開発者向けであって一般ユーザ向けではありません。 そこで使ってみたいのがWebブラウザ上で任意のJavaScriptが実行できるexecutor editorになります。 executor editorの使い方 メインの画面です。JavaScriptが編集できます。実行結果は下に出ます。 ペインの並びを横にもできます。 テキストの大きさなど、スタイルは自由に変えられます。 executor editorはJSFiddleのJavaScriptだけを抜き出したようなソフトウ
MailDev - ビューワー付きの開発用メールサーバ
システム開発においてメール送信を行うことは多々あります。しかしメールは間違って送信してしまうと取り返しのつかないもので、開発者であれば誰しも一度は誤送信を経験したことがあるのではないでしょうか。 そこで使ってみたいのがMailDevです。開発用のメールサーバで、送信したメールの内容確認もできるソフトウェアです。 MailDevの使い方 MailDevはDocker版が出ているのですぐに試すことができます。25番ポートが空いていますが、これはDocker上の話なので別途10025などにつなげてあげる必要があるでしょう。 メールを送信すると左側のリストが更新されます。日本語も通ります。 メールを選択して内容が確認できます。 添付ファイル付き。 ヘッダー情報の確認。 メールの検索機能もあります。 MailDevでは外部にメールを送信する、Relay機能もあります。条件に沿って送信する/しないを指
GPU.js - GPUを使ったアニメーションライブラリ MOONGIFT
Webブラウザ上で3Dをぐりぐりと動かすようなアニメーションを作る場合、WebGLを使うのは基本として、処理においてもGPUを使う方が効率的になります。とはいえ、GPUを使ってどう処理を行えば良いのか分からないことでしょう そこで使ってみたいのがGPU対応のライブラリです。今回はアニメーションライブラリとしてGPU.jsを紹介します。 GPU.jsの使い方 GPU.jsを使った一例です。Canvasが4つに分かれており、それぞれが連携してアニメーションしています。 実際の動きです。60fpsでています。 グリッドやボールは増減できます。 GPU.jsを使わないCPUでの計算処理モードもあるのですが、動きがとても遅くなります。GPU様々と言ったところでしょう。Web上でスムーズなアニメーション処理を実現したい時にはぜひチェックしてください。 GPU.jsはJavaScript製のオープンソー
Roc - React/Reduxを使ったnodeフレームワーク MOONGIFT
Reactを使ってみたいと思うプログラマはたくさんいると思うのですが、いざちゃんとしたものを作ろうと思うとフレームワークの存在に悩むことになります。Reduxを使うとしてもどういう組み合わせ、ディレクトリ構成でやるのがベストなのか分かりづらかったりします。 そこで使ってみたいのがRocです。React/Reduxを使ったnodeのWebアプリケーションフレームワークです。 Rocの使い方 Rocのインストールはnpmでできます。 npm install -g roc アプリケーションの初期設定はinitを使います。対話型で作ります。 $ roc init web-app-react Found a folder named /path/to/react-app, will try to use it. Using v1.0.3 as template version : ? What's
Chain - Webベースのビジュアルプログラミング環境
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました タブレットが普及するのに伴ってビジュアルプログラミングに注目が集まっています。小学生や中学生向けのプログラミング学習として使われるのはもちろん、よりプログラミング学習の敷居を下げられるのが魅力的です。 今回はビジュアルプログラミング環境の一つとして、Chainを紹介します。Webブラウザ上で動くのですぐに試せるのが魅力になります。 Chainの使い方 幾つかブロックを貼り付けました。右と左をドラッグ&ドロップでくっつけていきます。 ブロックの種類は次のようになります。 値同士をオペレータブロックを使って計算したり、結合したりできます。さらにIfやリピートブロックを使えば判定や繰り返し処理ができるようになります。さらに関数化して大きなブロックにすることもできます。 大型なロジックを作
Sankey - マウスオーバーでハイライトするチャートライブラリ MOONGIFT
HTML5になってWebの表現力は格段に向上しています。特にJavaScriptと絡めてインタラクティブに変化するチャートはインパクトが強く、ユーザへの訴求力も強くなります。しかし作るのが難しいというのが問題です。 解決策としては様々なチャートライブラリを知り、表現したいものに合わせてライブラリを選択するのが良いでしょう。ということで今回はSankeyを紹介します。 Sankeyの使い方 Sankeyで描けるチャートです。左右をつなぐのですが、途中に別なノードを差し込めます。 マウスオーバーで特定のノード部分だけハイライトできます。 動かしているところです。 Sankeyでは左右にノードを配置して、N対Mでコネクトできます。それをマウスオーバーでハイライトすることで見たい部分を目立たせることができます。複雑な情報ほど分かりやすくなるのではないでしょうか。 SankeyはHTML5/Java
【2016年夏】個人的に注目なフロントエンドで使えるJavaScriptフレームワークまとめ - Qiita
はじめに Webサービスを開発するにあたり、JavaScriptのフレームワークは今や欠かせないものになりました。 多種多用なフレームワークがある中で、今回は主にwebサービスのフロントエンドで用いられるJavaScriptフレームワークをまとめました。 それぞれのJavaScriptフレームワークの詳しい使い方については、詳細に説明されているサイトが沢山あるので本記事では省略致します。 こんなフレームワークもあるんだなーと軽い感じで眺めていただけると幸いです！ 特徴 Vue.jsは、インタラクティブなWebインターフェイスを構築するためのライブラリで、MVVMアーキテクチャを採用しています。 HTML/JavaScript間の双方向データバインディングに特化していて、極力シンプルに実装できるようになっています。 シンプルに実装できることから、学習コストも低く初心者でも導入しやすいフレーム
Flatmarket - 静的サイト主体で作られたEコマースシステム
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webシステムの筆頭とも言えるのがEコマースではないかと思います。商品を並べて、ショッピングカートに入れて決済する…特に大事なのが決済なのではないかと思います。カートに入れるまではともかく、そのまま決済完了しないと言った話はよく聞くところです。 バックグラウンドのシステムがない、そんな環境でもEコマースを作る…そんな試みがFlatmarketです。 Flatmarketの使い方 Flatmarketには完全にサーバがない訳ではありませんが、今ユーザに見えているのは静的なサイトです。 決済はStripeを使っています。 最後にカード番号を入れれば購入完了です。 本来は購入完了のメッセージが出るはずなのですがエラーになってしまいました。 Flatmarketの仕組みとしては、静的なサイ
Monod - オフラインファーストなMarkdownエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました MarkdownエディタはWeb、GUIともに増えています。インストール不要で使える分、Webベースのが便利だとは思うのですが、厄介なのはネットワークがない時です。そんな時に使えないのでは使う気が失せてしまうでしょう。 そこで使ってみたいのがMonodです。Webベースですが、オフラインファーストなMarkdownエディタです。 Monodの使い方 Monodの画面です。2ペインのよくあるMarkdownエディタです。絵文字をサポートしています。 テンプレート機能があり、YAMLフォーマットでテンプレートが使えます。 例えばprojectとして定義すれば、[project]の部分が書き換わります。 MonodはReact.jsを使って作られています。そうした点も注目に値するのではな
JQuery Terminal Emulator Plugin - jQueryも使えるjQuery製のターミナルエミュレータ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webサイト上でターミナル風インタフェースを提供するサービスが幾つかあります。クラウドサーバ系サービスでは当たり前になっていますし、プログラマー向けのサービスでは幾つか見かけます。 今回はちょっと色の違うソフトウェアを紹介します。JQuery Terminal Emulator Pluginはその名の通り、jQueryが使えるターミナル風UIです。 JQuery Terminal Emulator Pluginの使い方 jQueryが使えるので、こんな感じにDOMにアタッチできます。 もちろん書き換えもできます。 JQuery Terminal Emulator Pluginはあくまでも自分のWebブラウザ上だけの処理ですが、jQueryを使ってデータの書き換えもできます。DevT
grafi.js - JavaScriptで画像加工 MOONGIFT
サーバサイドで画像加工を行う場合、ImageMagickを使うのが基本になるでしょう。しかし先日ImageMagickの中にセキュリティホールがあったり、サーバの負荷を考えると使うのを控えてしまう人もいるのではないでしょうか。 そこで使ってみたいのがgrafi.jsです。JavaScriptで画像加工を行えるライブラリです。 grafi.jsの使い方 元の画像です。 ネガポジ逆転。 暗くしたり。 グレースケールも。 ぼかし。 シャープ加工。 grafi.jsを使えばクライアントサイドで画像加工ができます。元の画像はそのままなので、何度も加工できるのが魅力でもあります。なお、一部の加工（ぼかしなど）は使えないブラウザもあったので注意してください。 grafi.jsはHTML5/JavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。 grafi.js
Modaal - アクセシビリティの高いモーダルライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近、Webにおけるアクセシビリティという言葉が注目されています。それだけWebが一般化されてきたということでしょう。単純に文字が大きければ良いという訳ではなく、万人にとって使いやすいシステムというのを考えなければなりません。 そのアクセシビリティに注目して作られたモーダルライブラリがModaalです。 Modaalの使い方 Modaalはアクセシビリティの基準であるWCAG 2.0のレベルAAに準拠して開発されています。デモコードです。まずはフォーム。 ブラウザいっぱいに出すこともできます。 画像。この辺りのバツ印の出す場所も大事なのでしょう。 確認モーダル。背景色と前景色のコントラストも大事なのだと思います。 Instagramの表示。 Modaalはiframe/Ajax、単
Jaspy - JavaScript製のPython VM
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ChromeがFlashを切ったことで、Webブラウザで動くプログラミング言語といえばJavaScriptだけとなっています。そんな中にあって、JavaScriptの書きづらさにストレスを感じる人も多いことでしょう。 もしあなたがPython好きであればJaspyを試してみてはいかがでしょう。なんとJavaScriptで作られたPython VMになります。 Jaspyの使い方 例として、デバッガーを通じてWebブラウザとコンソールで通信できるものがあります。 スレッドに対応しており、スレッドごとに停止やkillができます。 Jaspyはコード自体はPython風に書けるようになっています。有名なところではBrythonやPyPy.jsと同じようなソフトウェアです。速度的には劣るよ
player - CLIの音楽プレイヤー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました デスクトップで開発を行っている時に音楽を聴きながらという方は多いでしょう。そんな時にどんなソフトウェアを使っていますか。スマートフォン、iTunes、その他にも音楽ソフトウェアは幾つも存在します。 バックグラウンドで音楽を流すのに仰々しいソフトウェアは使いたくないという方はplayerを使ってみましょう。CLIで使える音楽プレイヤーです。 playerの使い方 playerコマンドはplayの後に音楽ファイルを渡すだけです。ローカルファイルはもちろん、URLでも使えます。 $ player play /path/to/bgm.mp3 press "x" to stop, press "s" to play, press "space" to pause / resume press
formAnimation - フォームを揺らすバリデーションライブラリ
一般的にフォームの入力エラーがあると上の方にエラーメッセージが表示されます。多くの場合、エラーメッセージは表示が残るので、二回目のエラーとなった時に表示が更新されずに分かりづらいことがあります。 エラーが起きたんだ、ということを強くアピールしたい時にはformAnimationを使ってみましょう。アニメーションでインパクトある通知ができます。 formAnimationの使い方 formAnimationでは2パターンのアニメーションがサポートされています。一つ目はシェイクです。 もう一つはバウンドです。 どちらが良いかはサイトや通知したい内容によって変わるでしょう。シェイクジェスチャーはフォーム全体が入力を嫌がっているように見えるので、より効果的ではないかと思います。 formAnimationはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 nnl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DeNA Engineering - DeNAエンジニアのポータルサイト
