Vvverb.js - ドラッグ&ドロップでWebサイトを作成 MOONGIFT
かつてはWebサイトを構築する際にオーサリングツールを使うのが当たり前でしたが、最近ではUIフレームワークが出てきたり、CSS3の多機能性によってHTMLを手打ちすることも増えてきました。とはいえ、簡易的な内容であればオーサリングツールを使った方が簡単でしょう。 そこで使ってみたいのがVvverb.jsになります。ドラッグ&ドロップでWeb UIが作成できるソフトウェアです。 Vvverb.jsの使い方 メイン画面です。左側にコンポーネント、中央が編集画面です。 コンポーネントを選ぶと右側にプロパティが出ます。 テンプレートは幾つも用意されています。 デスクトップだけでなく、スマートフォンサイズも確認できます。 Vvverb.jsは多彩なコンポーネントが用意されており、大抵のニーズは満たせるのではないでしょうか。アンケートフォームを作ったり、ユーザベースでページを作る、Webサイトのモック
PWACompat - PWAに対応しない古いブラウザでもWeb App Manifestに対応させる MOONGIFT
PWAの一要素としてWeb App Manifestがあります。JSONファイルを用意しておくことで、Webアプリをローカルアプリケーションかのように保存できます。この時、アイコンやスプラッシュスクリーンも大事な要素です。 古いブラウザでは対応していないPWAについて、PWACompatが対応させてくれます。 PWACompatの使い方 PWACompatが使われているデモサイトをホーム画面に追加しようとした場合です。ちゃんとアイコンが表示されます。 インストールされました。 起動時に一瞬ですがスプラッシュスクリーンが表示されます。そしてアドレスバーのない状態で開きます。 ローカルのリンクは同じアプリ上で、外部リンクはSafariで開きます。 iOSのSafariでもPWA対応が進められていますが、まだまだ足りない機能が多数あります。PWACompatを使って、なるべくPWAの標準技術だけ
MangaSketch - 漫画のネーム作成に特化したアプリケーション MOONGIFT
漫画は日本が世界に誇るコンテンツです。毎日、多数の漫画が作られています。単なる娯楽としてだけの利用に限らず、学習教材や啓蒙などにも使われるなど、利用場面は増えています。 そんな漫画のネームを作成するためのソフトウェアがMangaSketchです。 MangaSketchの使い方 使い方、といっても筆者はタブレットがなく、ほぼ試せません…。ぜひお持ちの方はトライしてください。 JPEGで書き出せます。 MangaSketchはタブレットがあれば自動生成されたページにネームを書いていけます。そして終わったらJPEGで出力し、ペイント系のソフトウェアで書いていけるでしょう。ネームに特化しているというのが面白いです。 MangaSketchはWindows用のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 juangotoh/MangaSketch: 漫画のネ
Wired Elements - ラフなデザインになるカスタムタグ
ワイヤーフレームなど、ラフに作りたいという時は手書きなどが向いています。それをドローのソフトウェアなどできっちりと書き始めてしまうと、些細な部分にこだわってしまって目的であるプロトタイプがなかなか作れなかったりします。 そこで使ってみたいのがWired Elementsです。Web上でラフなデザインを再現できるWebコンポーネント集です。 Wired Elementsの使い方 こちらがデモです。枠などがラフですね。 デモです。スライダーなどを使ってスタイルを変えられます。 色を変えたりもできます。 リストボックスの例。 プログレスバー。 ラジオボタン。 テキストエリア。 カード。 Wired Elementsは <wired- ではじまるカスタムタグを定義しています。あらかじめ用意されているコンポーネントを組み合わせてデザインを作っていきます。元々良い感じに乱れたデザインになっているので、
Bootstrap Page Builder - Bootstrapを使った画面設計ツール
WebのUIは自由度が高い分、イチから作るのは手間がかかります。そうした状況だからこそ、Bootstrapのように見栄えの良いUIが作れるフレームワークに人気が集まりました。しかし、Bootstrapの記法に沿ったHTMLの手打ちすら面倒に感じてきます。 そこで使ってみたいのがBootstrap Page Builderです。ドラッグ&ドロップで簡単にUIが作れます。 Bootstrap Page Builderの使い方 メイン画面です。左側に部品が、右側にエディタが表示されています。 グリッド構成も簡単に実現できます。 多数のパーツが用意されており、それらをドラッグ&ドロップして画面を作っていきます。 プレビューです。基本的には同じ見た目が再現されます。 スマートフォンサイズなどレスポンシブな表示確認も簡単です。 Bootstrap Page Builderを使えばBootstrapを使
Multi-Step-Form-Js - フォームをマルチステップに変換 MOONGIFT
入力フォームが長かった場合、幾つかのステップに分割することがあります。そうした時、都度サーバに飛ばす方式が選ばれることが多いですが、その度にデータの送信とレンダリングが行われて面倒です。 そこで使ってみたいのがMulti-Step-Form-Jsです。jQueryでフォームをマルチステップに変換してくれます。 Multi-Step-Form-Jsの使い方 デモの場合、3ステップになっています。 バリデーション機能もあります。 二番目のステップに進みました。 最後のステップになっています。 Multi-Step-Form-Jsは一つのフォームを複数のステップに変換しています。つまりサーバ側に送られるのは一度だけです。確認画面がないのが残念ですが、その部分はカスタマイズしても良さそうです。 Multi-Step-Form-JsはjQuery/JavaScript製のオープンソース・ソフトウェア
androidify - HTMLファイルをAndroidアプリ化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webサイトをスマートフォンアプリ化して欲しいという要望は非常に良く聞かれます。それを可能にする技術としてCordovaがよく知られていますが、多少癖があると感じる人もいます。もっと簡単に、単にHTMLをラップするだけで十分というケースもあるでしょう。 そこで使ってみたいのがandroidifyです。コマンド一つでHTMLファイルをAndroidアプリ化します。 androidifyの使い方 androidifyはとても簡単に使えます。コマンドは次の通りです。 $ mkdir hello $ cd hello $ echo '<h1> HELLO </h1>' > index.html $ androidify $ adb install app.apk これだけでapkファイルが
Sirius UI - Bootstrap/Vue.jsを組み合わせたUIデザインテンプレート MOONGIFT
UIライブラリは幾つ知っておいても役立つものです。Webサイトの雰囲気に合わせてピックアップしたり、機能によって差別化もできるでしょう。すべての要件を一つのUIフレームワークで達成できる訳ではありませんので、色々知っておくとぴたりと当てはまる場面があるはずです。 今回はSirius UIというUIフレームワークを紹介します。多数のUIコンポーネントが提供されています。 Sirius UIの使い方 スクリーンショット多めで紹介します。まずはボタン、ラベル、バッジ、フォーム、アラートなど。 ナビゲーション、ドロップダウン、テーブル、ページネーションなどが提供されています。 ログインのモーダル実装例。 タブとイメージ、カルーセル。 トップページ風レイアウト。 機能一覧風。 フッター。 Sirius UIのベースはBootstrapとなっており、さらにFlexboxとVue.jsを組み合わせていま
VideoEditorJS - Webベースの動画編集
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webブラウザ上でできることがどんどん増えています。さらにローカルアプリケーションではあるものの、ElectronのようにWeb技術で動くソフトウェアがあったり、Cordovaのようにスマートフォンアプリも作れます。 今回紹介するVideoEditorJSはWebブラウザ上でビデオの編集ができてしまうソフトウェアです。 VideoEditorJSの使い方 メイン画面です。動画と音声を追加していきます。 動画のサムネイルも確認できます。 そしてタイムラインにドロップしていきます。 VideoEditorJSでは外部の動画ファイルを取り込むのはもちろん、Webカメラから取り込むこともできます。動画編集と言っても切り出したり、エフェクトを行うことはできないようです。スマートフォンなどで撮
CrossUI - 多数のブラウザに対応したWebアプリケーション開発ライブラリ MOONGIFT
Web技術が進歩していることもあって、これまでローカルでないと実現しなかったようなUI、機能などがWebブラウザ上でできるようになっています。とは言え、それはできるという話であって、実現しようとすればかなり大変なのは間違いありません。 特にUIやJavaScriptと連携させた動きの制御は苦労が伴います。そこで使ってみたいのがCrossUI、JavaScript用のRADツールです。 CrossUIの使い方 CrossUIではリッチなUIを持ったWebアプリケーションが簡単に開発できます。このようなD&Dで画面設計できるツールもあります。 さらに画像編集ソフトウェア。 Outlook風UI。 注文管理システム。 データベースマネージャ。 フローチャート。 表計算。 CrossUIはちょっと昔風（YUIあたり？）のUIとなっていますが、業務アプリケーションとしては十分なデザインでしょう。その
AppRTC - WebRTCを使った動画チャット実装を学ぼう
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webブラウザベースで動画、音声チャットを行うときに使うのがWebRTCです。P2Pで接続する技術でもあり、興味を持っている人も多いのではないでしょうか。 もしWebRTCの実装に興味がある方がいればAppRTCを見てみてはいかがでしょう。実際に動画チャットができるサンプルとして使えるコードになっています。 AppRTCの使い方 AppRTCのデモを試してみます。Google Chromeからアクセスすると、マイクとカメラへのアクセス許可が求められます。 そうするとウィンドウ全体にカメラが表示されます。 別なパソコンやAndroidのChromeからアクセスするとチャットができます。Picture in Pictureで右下に自分のカメラの映像が表示されています。 AppRTCはG
Life - Markdownで定義できるシンプルな年表
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 時間はどんどん流れていってしまうもので、止めることは誰にもできません。しかし流れていった時を振り返って形にすることはできます。その一つが年表です。 自分のこれまでの歩み、歴史的事件、文明など様々な事柄を年表に表してみましょう。データをプロットするのが大変なイメージがありますが、Lifeを使えば簡単です。なぜならデータフォーマットがMarkdownだからです。 例えばサンプルのMarkdownファイルは次のようになっています。 life.md @USERNAME' life =============== - 24/02/1955 Born - ~1968 Summer job - 03/1976 Built a computer - 01/04/1976 Started a com
Invoice Ninja – 請求書を素早く作れてPDF出力できる請求管理
フリーランスだった時代に最も面倒な業務だと思っていたのが請求書の作成です。月に10枚も出さない程度なのでシステム化するほどでもなく、かといって手間がかかる業務でした。現在はMakeLeapsにしたので大幅に楽になっています。 そんな請求書作成業務をWebベースで行えるようにしてくれるのがInvoice Ninjaです。ネーミングからしてあれな感じですが、機能は確かなのでぜひチェックしてみてください。 Invoice Ninjaの使い方 ほぼほぼ請求管理で必要と思われる項目は満たしているのではないでしょうか。日本語の文字化けについてはフォントを入れたり設定をすれば解決すると思われます。 Invoice NinjaはPHP製のオープンソース・ソフトウェア（BSD License）です。 Invoice Ninja hillelcoren/invoice-ninja
商品を販売するのに特化したシングルページコマース·Shop MOONGIFT
ShopはRuby製のオープンソース・ソフトウェア（MIT License）です。 コマースの裾野は広がっています。ショップはよりカジュアルになってきており、今ではStores.jpのように素早くショップを立ち上げられるサービスも出ています。そのオープンソース版とも言えるのがShopです。 デモショップです。他に何もありません。商品はここにある2点になります。 サイズを選んでカートに放り込みました。カートに追加されるアニメーションが格好いいです。 購入手続きを進めます。適当な名前、住所を入力します。 次に決済情報を入力します。 処理が行われて… 注文が完了しました！ Shopはシングルページのコマースを提供します。バックエンドにはParseを使っており、運用負荷は殆どないようです。一つないし二つくらいの商品を売りたいと考える時にちょうどいいインタフェースではないでしょうか。 MOONGIF
ホームページの更新負荷を低減する、必要な箇所を動的にするCMS·pWebManager MOONGIFT
pWebManagerは必要な場所にコンテンツを差し込む、静的サイトとの親和性の高いCMS。 pWebManagerはPHP製のオープンソース・ソフトウェア。いわゆるホームページと言われる静的なHTMLによるWebサイトを立ち上げて数年経ち、情報が徐々に増えるのに従って更新負荷が大きくなっていく。複数の場所を更新するのはミスも多い。 ユーザ向けの画面 そうした時に導入を検討するのがCMS（コンテンツ・マネジメント・システム）だ。だが10ページくらいしかないWebサイトにCMSというのはちょっと大げさに感じられる。導入コストやややこしい操作を覚えるのも大変だ。そこで検討したいのがpWebManagerだ。 pWebManagerはいわゆるハメコミ型のCMSで、HTMLファイルの中にタグを埋め込むことでその内容をCMSから取得したデータと差し替えて表示する。既存サイトがほぼそのまま活かせるので
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
