Lever OS - サーバレス×マイクロサービスなWebアプリ実行環境 MOONGIFT
マイクロサービス、サーバレスアーキテクチャといったキーワードが盛んに言われるようになっています。確かにサーバレスアーキテクチャは小さなサービスを作るのに都合がよく、それらを合わせるとマイクロサービスとして成り立つかも知れません。 そんな2つを合わせて作られているのがLever OSです。まだ開発途中とのことですが、大きな可能性を秘めていそうです。 Lever OSの使い方 Lever OS自体はDockerでデプロイできます。起動したら例えばフォルダを作成し、その中にserver.jsとして次のようなコードを書きます。 module.exports.sayHello = function (name, callback) { callback(null, "Hello, " + name + "!"); }; そして lever.json というファイルを作成します。 { "name":
mobile-videoplayer - iOSでも自動再生できる動画プレイヤー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました スマートフォン（特にiOS）は動画を自動再生してくれないという問題があります。また、動画再生時はフルスクリーンになってしまったり、JavaScriptから操作できないといった問題もあります。 それらを解決してくれるかも知れないのがmobile-videoplayerです。音は出ないですが、上記問題は解決できます。 mobile-videoplayerの使い方 動画の読み込み中…。この辺りでネタバレしているかも？ 再生開始しました。スムーズです。 さらに面白いのはスクロールして動画が表示されている時だけ再生してくれる機能です。 見えなくなると再生が停止します。 実際に試しているところです。停止しているのが分かるでしょうか。 種明かしをすると、これは実際には動画ではなくJPEGをつなぎ
GitHub Calendar - GitHubのアクティビティグラフを任意のサイトに埋め込み表示 MOONGIFT
GitHubでの活動はオープンソース・ソフトウェア開発者としてのアクティビティとも言えます。会社でGitHubを使っていれば緑の濃い部分ばかりになるかも知れませんが、さらに休日もちゃんと埋めようと活動している人もいるでしょう。 そんな方にお勧めなのがGitHub Calendarです。GitHubのアクティビティグラフを任意のサイトに埋め込めます。 GitHub Calendarの使い方 GitHub Calendarの使い方です。専用のJavaScript、スタイルシートファイルを読み込みます。 <!-- Prepare a container for your calendar. --> <script src="https://cdn.rawgit.com/IonicaBizau/github-calendar/gh-pages/dist/github-calendar.min.js
Weex - アリババ製のモバイルUIフレームワーク
スマートフォン用にWebサイトであったり、ハイブリッドアプリを提供する際には専門のUIフレームワークが欠かせません。デスクトップWebブラウザ向けとは異なるUI/UXが求められるためです。しかしそういった実装は簡単ではありません。 そこでUIフレームワークが重宝します。今回はアリババ社が作ったWeexを紹介します。 Weexの使い方 Weexでは多くのショーケースが登録されています。 マインスイーパのようなゲーム、計算機、さらに各種アニメーションもサポートされています。一般的なハイブリッドアプリはもちろん、ユーティリティ的なツールも作れそうです。 WeexではJavaScriptやHTMLを一つにまとめたtemplateと呼ばれる単位で開発を行います。Webコンポーネント的な考え方なのかも知れません。その中でアニメーションを実行したり、ページ切り替えを行うといった仕組みです。 Weexはn
Pica - Canvasよりも高品質、かつ高速な画像リサイズライブラリ MOONGIFT
HTML5のCanvasとJavaScriptを使うことによって画像をクライアントサイドで加工できるようになりました。特に多いのが縮小に関するニーズです。スマートフォンで撮影した画像はサイズが大きいので、転送にかかる時間や帯域の問題があります。そこで事前に縮小するのです。 しかし縮小した時の画像の品質はブラウザに依存してしまいます。それを防ぎ、より高品質にリサイズできるのがPicaです。 Picaの使い方 Picaの例です。細かくリサイズ時の設定ができます。 任意の画像で試せます。 独自の縮小アルゴリズムによって、高速かつ高品質なリサイズが実現しています。処理はWebGLとWebWorkerを利用について指定できます。Canvasで単純に縮小すると潰れてしまったり、シャギーが目立つような部分もPicaを使うと滑らかに縮小されているのが分かるはずです。 PicaはHTML5/JavaScri
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ファイルが生成される仕組みです。テンプレートなどもシンプルなので、カスタ
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
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
