GAS 家計簿 - Google Apps ScriptとVueで作られたWeb家計簿
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました IT技術の発展はめざましく、日々新しい技術が登場しています。例えばサーバレス、VueやReactの仮想DOM、ちょっと前であればRESTful APIなどがあります。それらを漏れなくキャッチアップするのは大変です。 今回紹介するGAS 家計簿はサーバレスにGAS（Google Apps Script）を使って家計簿Webアプリケーションを作るハンズオンを兼ねたソフトウェアです。 GAS 家計簿の使い方 デモです。動作しているのはGitHub Pagesです。サーバの管理が不要ですね。 データの追加用モーダルウィンドウ。フロントエンドはVueを使っています。 設定画面です。データはGoogle Apps Scriptを使ってGoogleスプレッドシートに保存されています。 GAS 家
css.gg - 500種類を超えるCSSアイコン集 MOONGIFT
Web上でアイコン画像を使う方法は幾つかあります。オーソドックスな画像に加えて、アイコンフォントを使うこともできます。画像はバイナリもあれば、SVGも利用できます。高解像度でもぼやけず、小さな画面でもつぶれないSVGは最近利用が広まっています。 さらに覚えておきたいアイコンがCSSアイコンです。SVG同様に拡大しても綺麗なのが特徴です。今回はそんなCSSアイコンを500種類以上集めたcss.ggを紹介します。 css.ggの使い方 一覧です。黒単色で描かれたアイコンになります。 左側にカテゴリが多数並んでいるのが分かります。 その中の一つです。 CSSも公開されています。これをコピーして貼り付けるだけでCSSアイコンとして利用できます。 css.ggに限りませんが、CSSアイコンの魅力としては外部リソースとして用意する必要がなく、HTMLのインラインですら利用できることでしょう。また、全部
Flutter Tasky - Google TodoをFlutterで再現
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Flutterがにわかに盛り上がっています。Flutter Webの登場によって、スマートフォンアプリからWebサイトまでDartで開発できるようになったのは大きな要因でしょう。試してみたいと思いつつ、二の足を踏んでしまっている方もいるでしょう。 そんな方はFlutter Taskyから学んでみてはいかがでしょう。Google TodoアプリをFlutterで置き換えたソフトウェアです。 Flutter Taskyの使い方 トップページです。ログインもできるようですが、ゲストアクセスがいいでしょう。 タスクを追加します。 タスクには日付や詳細を含めることもできます。 日本語だとなぜか文字が二重で表示されます。 チェックを付けてタスクを完了します。 並び替えもできます。 タスクはリス
Blackhole·軽量、レスポンシブ対応のSass/CSSフレームワーク MOONGIFT
スタイルシートのフレームワークはとても数多くあります。有名なところではBootstrap/Zerb/Ionicなどがありますが、有名なものは情報が多い一方、使った時のデザインが似通ったものになってしまいます。 そこで人と違ったフレームワークを採用するのも面白さがあります。もちろんカスタマイズのしやすさなども大事でしょう。そこで今回はBlackholeを紹介します。 Blackholeの使い方 スクリーンショットを多めに紹介します。 ヘッダー。 ボタン。 インプット。 こんな感じにインプットを警告表示にすることもできます。 タブ。 右側にタブとプログレスバー。 ドロップダウン。 プロフィール入力。 ネストできるリスト。 メニュー。 ナビゲーションバー。ページネーション。 アラート。 通知。 ボックス。 リボン。 ボックス＋アイコン。 テーブル。 アイコン。 こんな感じにエフェクトもできます。
iOSアプリのデザインをスタイルシートで行う凄い技術·Pixate MOONGIFT
PixateはMac OSX用のソフトウェアです。 iOSアプリのデザインはXcodeを使って行うのが一般的です。しかしWebデザイナーや開発者にとっては思い通りにいかなくてやきもきするときがあるかも知れません。そこで注目したいのがPixateです。何とスタイルシートと同じ記述で画面を作成できます。増資し、フリーになりました。 ボタンのデザイン。確かにスタイルシート調です。 記述を変えればダイナミックに描画が変わるのも特徴です。 SVGの表示も行えます。 さらにタップすると線だけに。 こちらはプレイグラウンド。様々な表示例があります。 ラベル。テキストエリアの部分は変更できます。 こんな感じにダイナミックに文字サイズを変更できます。 地図のポインター部分の大きさを変更。 本当に数多くのデモがあります。 検索ボックス。 セクション付きのテーブルビュー。 様々なテキストビュー。 Pixateは
200を越えるアイコンが揃ったBootstrap向けWeb Font·Font Awesome MOONGIFT
Font AwesomeはBootstrapと組み合わせて使えるアイコンを集めたWeb Fontです。 Twitter Bootstrapの便利な機能の一つにアイコンパックがあります。ちょっとした装飾を手軽に付け加えられるのは便利です。そんなBootstrapに200以上のアイコンを追加するのがFont Awesomeです。Web Fontで作られたアイコンパックです。 全てのアイコンです。 ソーシャルアイコンも揃っています。 例です。ドロップダウンやボタンにつけています。 大きさが自由に変更できるのもフォントならではです。 ドロップダウンにつけると機能がより分かりやすくなります。 カスタマイズすればレーティングに使ったりもできます。 ファイル構成です。SVGやフォントが提供されます。 Font AwesomeはTwitter Bootstrapで提供されているものに加えて色々な場面で役立
ワンクリックでMac OSX上にRuby on Rails開発環境を構築·Rails One Click MOONGIFT
Rails One ClickはMac OSXのRuby on Rails開発環境をボタン一つで整えてくれるソフトウェアです。 Mac OSXにおけるRuby on Rails開発環境を一気に整えてくれるのがRails One Clickです。ウィザード方式でボタンクリックだけでRuby on Railsが開発できるようになります。 メイン画面です。ボタンを押すとインストールが開始します。予めXcodeがインストールされている必要があります。 ダウンロードやコンパイルも同時なのでちょっと時間がかかります。 ログです。 完了しました。 この画面が表示されていれば完了です。 デモ動画です。 Rails One ClickはDocuments以下に一通りの環境をインストールするので、ルート権限不要で使えるのが便利です。 Rails One ClickはMac OSX用のオープンソース・ソフトウェ
格好いい！折り畳んだ紙を開くようなアクションを実現·Paperfold CSS MOONGIFT
Paperfold CSSは中間のメッセージを折り畳んで表示し、クリックで開く3Dアクションを施すJavaScriptライブラリです。 これはアイディアの勝利！Paperfold CSSを使うと折り畳んだメッセージを開いて表示したりする際に効果的に見せられるようになりそうです。 デフォルトの表示です。See 5 More Postsという表示があります。そこをクリックします。 徐々に開いていきます。 折り畳まれた部分が開いて表示されました。 デモ動画です。折りたたみの量などは自由に設定できます。しかも3Dであり、マウスで回転させたり見る向きを変更できたりします。 Paperfold CSSはGmailの多数のリプライが重なった時のメッセージ群を表示する際のやり方に近いです。面白い使い方が出来そうです。 Paperfold CSSはJavaScript製のオープンソース・ソフトウェア（Pub
iOS/Windows/Mac OSX/Linux向けソフトウェアを1つのコードで·nui MOONGIFT
nuiはiOSを含むマルチプラットフォームで動作するソフトウェアを開発するフレームワークです。 一つのコードがマルチプラットフォームで動作する、その夢は果てしなく求められ続けています。Windows、Mac OSX、LinuxさらにiOSでも動作することを目指すフレームワークがnuiです。 デモです。WindowsやMac OSX、iPhoneで動作します。 音がなり、インジケータで波長を変化させられます。 プロジェクトを作成するプログラムです。Mac OSX、iPhone、Windows向けに出力可能で、WindownはVisual Studio 2005/2008向けのプロジェクトファイルを出力します。 出力されたファイル構成です。 nuiはC++向けのフレームワークになります。CSSに似たスタイルシステムを持ち、外観の調整が容易にできるようになっています。さらにプラグインにも対応して
Google App Engineを使ったWebアプリケーションのアプリ内課金チュートリアル·iap-hello-world MOONGIFT
iap-hello-worldはWebアプリケーションにおけるGoogleチェックアウトを使ったアプリ内課金を行うデモです。 Androidアプリの販売に際してGoogleチェックアウトが日本でも使えるようになりました。そしてそのGoogleチェックアウトを使ったWebアプリケーション内における課金方法について参考にしたいソフトウェアがiap-hello-worldです。 最初に認証をします。 ここはいわばゲームのダッシュボードです。左側のリンクをクリックしてゲームを行います。 Androidのキャラクターを動かすゲームです。 そしてアプリ内課金にトライできます。 iap-hello-worldはWebアプリケーションとしてゲームを提供し、その中でアプリ内課金を使うためのチュートリアルになっています。Androidのみならず、Webアプリケーションでもアプリ内課金を扱ってみたいと考えた際に
そろそろ本格化。node.js用Webアプリケーションフレームワーク·flatiron MOONGIFT
flatironはルーティング、ミドルウェア、テンプレートエンジン、ODM、プラグイン拡張を備えたnode.js用Webアプリケーションフレームワークです。 Herokuがサポートしたり、着実に安定性を増した開発が継続されているnode.js。そろそろ使ってみたいと思い始めているのではないでしょうか。フレームワークを使って開発してみたい方は今回紹介するflatironをお試しください。 ルーティングです。まとめて設定するのがいい感じです。 unionという最低限のミドルウェアも付属しています。 テンプレートエンジンがあります。IDを指定してその中の値を変更するようです。 ODM（オブジェクトドキュメントマッピング）です。いわゆるO/Rマッパーに近いです。Mongo/CouchDB/Redisに対応しています。 プラグインによる拡張もできます。 flatironはWebアプリケーションを開発
Flasherは見て欲しい。iOS用ゲーム開発SDK·Pixelwave MOONGIFT
PixelwaveはActionScript 3.0にインスパイアされたiOS向けゲームSDKです。 Flash、ActionScriptを使ってゲームを作っていた方が次の市場にiOSを考えているならばぜひ一度見て欲しいのがPixelwaveです。iOS向けゲームを開発するのに向いたSDKになっています。 サンプルのアプリより。フォントを変えて表示します。 タップしたところに狸（？）のキャラクターが移動するデモ。 矢印をタップするとその方向にキャラクターが移動するデモ。iPhone、iPad両方に対応しています。 Hello Worldのデモ。地球が回転しています。 Pixelwaveの特徴としてはActionScript 3.0にインスパイアされたSDKになっているということです。Flasherの方がiOS向けのゲーム開発に乗り出す際に使ってみて欲しいです。またOpenGL ESの2Dゲ
アニメーションやイフェクトが多彩なiOSサイト構築テンプレート&ライブラリ·Web 2.0 Touch MOONGIFT
Web 2.0 TouchはjQTouchをベースにしたiOS最適化サイト構築テンプレート&ライブラリ。 Web 2.0 TouchはHTML5/JavaScript製のフリーウェア（ソースコードは公開されている）。iPhone、iPadといったいわゆるiOS向けのWebサイト開発のニーズが出始めている。iPhoneはデスクトップ向けWebサイトがある程度見られるというのが利点ではあるが、やはり小さい画面では見づらいケースも多い。 メイン そんな時にズームしたりパンしたりする操作を繰り返すのはストレスがたまる。さらに送信される情報も多いので表示に時間がかかるのも難点だ。そこでiOS向けWebサイト開発に使ってみたいテンプレートがWeb 2.0 Touchだ。 Web 2.0 TouchはHTMLデザインだけではなくJavaScriptによるアニメーション操作も提供される。例えば画面スライド
映画の字幕をダウンロードする·Subdownloader MOONGIFT
SubdownloaderはMac OSX/Linux向けのオープンソース・ソフトウェア（Windows版はシェアウェア）。洋画の場合、日本語の字幕をつけて観ることが多いが、英語の勉強がてらに観るならば字幕無しで観た方が良いだろう。だがそのままでは十分な理解ができずに物足りなく感じるかも知れない。 検索フォーム そんな時に使えるのが英語の字幕を付けるという方法だ。映画のDVDや動画があれば、Subdownloaderが自動的に探してくれる。Subdownloaderは動画の情報を元にOpenSubtitles.orgから字幕をダウンロードするソフトウェアだ。 動画がない場合や、うまく検索できなかった場合でも手動検索機能がある。中には日本語の字幕も見つけられるはずだ。多様な言語の字幕が登録されているので、フィルタを使ってうまく探そう。同じ言語でも多数の字幕が登録されている。 アップロードフォ
ニコニコ生放送を録画してローカルで楽しむ一般会員用タイムシフトツール·namareco MOONGIFT
namarecoは一般会員でもタイムシフトを使ってニコニコ生放送を録画するソフトウェア。 namarecoはRuby製、Windows/Mac OSX/Linux用のオープンソース・ソフトウェア。ニコニコ動画およびニコニコ生放送の人気は年々高くなっている。テレビの再発明と例えられることもあるニコニコ生放送だが、日々大勢の人が配信、視聴している面白いサービスだ。 起動中 そんな生放送ではタイムシフトという機能が用意されている。現在では一般会員でもタイムシフト機能を10件まで使えるのだが、もっと柔軟に生放送の録画をしたいと思ったら使ってみたいのがnamarecoだ。 namarecoには二つのタイプがある。一つは予め登録したコミュニティまたはユーザが配信を開始すると自動的に録画を開始する機能で、もう一つは今すぐ録画を開始したい時に使えるimarecoだ。Rubyで動作するが、Windows版で
動画にチャプタ、字幕を簡単に埋め込む·Subler MOONGIFT
Sublerは動画へ字幕の埋め込み、メタデータ編集、チャプチャの追加を行うMac OSX用の簡易動画編集ソフトウェア。 SublerはMac OSX用のオープンソース・ソフトウェア。インターネット上には無数の動画コンテンツが存在する。さらにムービーカメラも手軽になっており、携帯電話でも撮影ができるようになっている。それを使って録画している人も多いだろう。 メイン画面 しかし動画というのは編集はとても面倒なフォーマットでもある。例えば字幕をつけた動画をiPhoneで観たいと思うといきなり複雑な操作が必要になってしまう。幾つか限定的な操作にはなるが、手軽に動画を編集できるのがSublerだ。 Sublerは動画（MP4など）を読み込んで、字幕ファイルを追加したり、チャプターデータを追加できるソフトウェアだ。ファイルを指定すれば良いだけで、後は自動的に認識してくれる。言語の設定もドロップダウンか
これがあればWebアプリケーションのデザインがすいすいできる·Bootstrap MOONGIFT
Bootstrapは今風のWebアプリケーションを開発するのに最適なデザインパーツを提供するCSSテンプレート。 BootstrapはCSS製のオープンソース・ソフトウェア。ITエンジニアが苦手にするのがWebデザインだ。作るのは良いが、それを奇麗に配置していくのがとても難しい。Webサービスが流行るか否かに技術が及ぼす影響は良くて半分だろう。残りの半分以上は見た目にかかっている。 グリッド それもあって奇麗な画像を生成したり、何かのサービスを模したデザインに人気が集まったりする。Appleの作るデザインのような、今風なWebサイトを作る際にはBootstrapが便利そうだ。 BootstrapはTwitterの開発チームが作成したWebデザインテンプレートだ。単なるHTMLのみならず、色々な機能がおり混ざっている。複数カラムのグリッド、高さの揃った複数カラムのレイアウト、基本的なHTML
人気のUIを真似る。Flipboard風iPadアプリモックアップ·FlipView MOONGIFT
FlipViewはFlipboard風のUIを実現するiPadアプリモックアップ。 FlipViewはiPad用のオープンソース・ソフトウェア。iPadやiPhoneアプリでは同じ素材を使っていても見せ方一つで魅力が大きく変わってくる。ただ一覧にするだけでは面白くなく、さらにタップして表示を切り替える際にもアニメーションがあるかないかで印象が変わってくる。 一覧ページ Twitterのストリームの見せ方を電子書籍風にし、インパクトあるものにしてくれるFlipboard、これも見せ方を工夫した面白いアプリの一つだ。そんなFlipboard風の表示を実現しているモックアプリがFlipViewだ。 FlipViewはTwitterのタイムラインを表示しているが、画一的に一覧にしている訳ではない。高さを変えたり、2カラムで並べて表示することで見た目を楽しいものにしている。各ツイートをタップすると拡
誰だってクリエイティブなアートが描ける·Livebrush MOONGIFT
LivebrushはAdobe AIR製のフリーウェア。コンピュータで行えることは多数ある。テキストを書く以外にも写真を加工したり音楽を作ったり、クリエイティブな活動に役立てることができる。だがそうした創造的な作業には才能と優れたソフトウェアが必要だと思われている（少なくとも筆者はそう思う）。 何となくいい感じ？ アートを作ろうと思ったら何が必要だろう。タブレット、プロレベルのソフトウェア…いやいや必要なのはLivebrushだけで良い。Livebrushは何となく描くだけでも十分にクリエイティブなアートを作り出せるソフトウェアだ。 その秘密は多数登録されたブラシとそのブラシが描き出す曲線にある。ブラシによって色が決まっているようで、ただマウスを使って線を書くだけで自動で綺麗な曲線を描き出してくれる。線は後から調整することもできる。また線ごとにレイヤーが分かれるので一部を非表示にすることも
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Quartz Composer内でWebKitを利用する·CoGeWebKit MOONGIFT