schedulerjs - スケジュール調整に使えそうな横向き予定表
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上で様々な作業を行えるようになったことで、UIに求められる多様性も増しています。特に面倒だと感じるのは時間関係ではないでしょうか。カレンダー、ウィークリー、デイリーなどいずれにおいても時間に合わせた表示、処理は大変です。 そこで様々なライブラリを知っておくことでいざとなった時に役立ちます。今回は横型のスケジュール選択ライブラリschedulerjsを紹介します。 schedulerjsの使い方 schedulerjsの初期表示です。 薄いブルーのエリアはドラッグしたり、端をドラッグして枠の幅を増減できます。 実際に操作しているところです。 実際の描画は予定を配列で渡すだけです。 var list = [ { 'name': 'Chewbacca', 'appointments
transitive.js - 路線図を生成するJavaScriptライブラリ MOONGIFT
データのビジュアル化を考えた場合、常に正確に出すのが最善とは限りません。トレンドを知りたい場合はその傾向を見るためにデータを無視したり、より特徴的なポイントに主眼を置いたりします。地図も同じです。 案内図などは正確性よりも直線や曲がり角を重視した図になっています。同様に路線図も駅の間隔や合流ポイントなどに主眼を置くでしょう。そんな分かりやすい路線図を生成できるのがtransitive.jsです。 transitive.jsの使い方 こちらがデモです。とても見やすい路線図ですね。 右側の路線をマウスオーバーすると、その路線だけがハイライト表示されます。 ズーム表示やマウスドラッグでの視点変更も可能です。 データを作るのが多少大変なように見えますが、一度作ってしまえば後はtransitive.jsが自動生成してくれるのが便利です。データ自体はデータベースに保存しておいてスクリプトで生成する形で
3ペイン構成のMac OSX用Markdownエディタ·LightPaper MOONGIFT
LightPaperはMac OSX用のソフトウェアです。 Markdownのシェアが高まっています。普通のテキストエディタで書けるのが魅力ですが、専用のエディタを使うことでよりスムーズに書き進めることができます。そこでMac OSXユーザにお勧めしたいMarkdownエディタがLightPaperです。 メイン画面です。左からファイルブラウザ、エディタ、プレビューとなっています。 エディタはタブ管理できて、複数ファイルを開いておけます。 画像やリンクの補完入力ができます。 設定画面です。 カラー設定があります。 エディタ部のカラーを変えて、プレビューをGitHub風にしてみました。 エクスポートはPDF、HTMLそしてAudioファイルがサポートされています。 PDFにしても日本語対応です。 これまで編集とプレビューがついたMarkdownエディタは多かったですが、さらにファイルブラウザ
WebでTitaniumの画面生成コードをさくっと作る·Titanium Form Designer MOONGIFT
Titanium Form DesignerはWebブラウザ上でTitaniumのUIコードを生成するソフトウェアです。 TitaniumはJavaScriptのコードの中でUIを定義して画面を作成します。プログラマーにとっては分かりやすいかも知れませんが、慣れてくると面倒に感じるかもしれません。そこでTitanium Form Designerを使ってビジュアル的に画面を作成してみましょう。 作成画面です。左側からコンテンツを中央の画面にドロップします。 ドロップするとプロパティウィンドウが表示されます。 画像の場合はURLを入力します。 右側にソースが表示されています。これをコードに貼付ければ画面が作成されます。 Titanium Form Designerではまだ単純に追加したオブジェクトごとに画面を生成するくらいしかできませんが、そこは将来性に期待といったところでしょうか。また基礎
画像を生成せずにサムネイル風に小さな画像を表示·jQuery NailThumb MOONGIFT
jQuery NailThumbはWeb上でCSSによる画像サムネイル風表示を実現するjQueryライブラリです。 Webサイトで画像を縮小して表示したい場合、ImageMagickなどのサーバサイドの技術を使うのが一般的です。しかしjQuery NailThumbを使えばクライアントサイドだけで高度なサムネイル風表示を実現します。 デモです。左側が元画像、その右側にサムネイル化した画像が表示されています。 正方形の他に縦横比の固定、横幅優先といった指定もできます。 縦長の画像の場合、横幅優先にすると自動的に左右に空白が入ります。 こちらは切り取りです。 他にもサンプルが多数あります。 画像の量にもよりますが思ったよりも負荷は少ないように感じられます。jQuery NailThumbはCanvasで画像生成という訳ではなく、CSSを使って画像を擬似的に縮小表示しています。その際の配置やサイ
Webアプリケーションを作るのに便利そうなコンポーネント群·UIKit MOONGIFT
UIKitはWebアプリケーション向けのダイアログ、カラーピッカーといったコンポーネント群を提供するライブラリです。 最近、TwitterのBootstrapが人気ですが、同じようにWebアプリケーションをデザインする際に使えそうなコンポーネント群がUIKitです。 まずダイアログ系のコンポーネントです。 閉じるボタン付き。 グレーアウトしたダイアログ。 HTML埋め込みもできます。 カラーピッカーコンポーネント。 確認ダイアログ。 通知（右上）。自動的に消える設定もできます。 コンテクスト（右クリック）メニュー。 主なコンポーネントとしては、ダイアログ、確認ダイアログ、カラーピッカー、クリックで回転するカード、通知、メニュー、ボタン式のドロップダウンとなっています。デザインがすっきりとしているので今風のWebアプリケーションに似合いそうです。 UIKitはHTML5/JavaScript
Gitリポジトリに蓄積された歴史を可視化、グラフ化する·GitStats MOONGIFT
GitStatsはGitリポジトリを解析して静的なHTMLファイルとグラフを出力するソフトウェアです。 Gitにaddしてcommit、addしてcommit…そんな日々の努力の結果をビジュアル化してくれるソフトウェアがGitStatsです。社内プロジェクトで使ってみても面白そうです。 supybotのGitリポジトリから作られたHTMLです。 アクティビティです。コミット数などをグラフ化しています。 時間数が出たりするのも面白いです。 コミット数を見ればプロジェクトの栄枯盛衰が分かります。 タイムゾーンごとのコミット数もユニークです。 開発者の一覧です。 ファイル数のカウントです。 拡張子ごとというのも面白いです。 コードの行数です。 タグ一覧です。 GitStatsはアクティビティ、ファイル数、コード数、タグ、開発者と言ったデータをリポジトリから抽出してグラフ化します。静的なHTMLで
EC2の月額料金は幾ら？を教えてくれる·EC2-cost MOONGIFT
EC2-costはEC2の月額コストを算出するWebサービスです。 Amazon Web Services、特にEC2を使ってみたいと思いつつ従量課金のためなかなか踏み切れない…という方に使ってみてほしいのがEC2-costです。シンプルにEC2のコストを算出してくれます。 アクセスしました。東京リージョンの価格が表示されています。 特に他のページはなく、基本的な月額料金が表示されるのみです。Googleの為替情報を用いているので、円ドルレートの変化があっても大丈夫です。なお、ここで出ている金額は1時間あたりの金額を月額分にしたものであって、転送に伴う課金は含まれないようです。 EC2-costはRuby/Ruby on Rails製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGIFTはこう見る 日本では開発や運用コストにおいて稟議を通す
スマートフォン、タブレット向けサイトのデバッグに·Socketbug MOONGIFT
スマートフォンやタブレット向けのWebサイトを開発していて実機やエミュレータでテストしている際に面倒なのがデバッグ作業になります。そんなときに母艦とつないでJavaScriptのデバッグができるのがSocketbugです。 こちらはiPad向けの画面です。他にもiPhoneなどからもアクセスできます。 こちらは操作を行う管理画面です。HTML5、WebSocket対応のWebブラウザからアクセスする必要があります。 iPad側の画面でボタンを押すと管理画面側コンソールに出力されます。 管理画面側からiPad側の画面を変更する際にはJavaScriptコンソールを使います。jQueryが使えます。リモートのソースコード取得もできるらしいのですが、筆者環境ではうまくいきませんでした。 サーバです。node.jsで作られています。 Socketbugを使うと母艦側からiPhone/iPadで見て
社内でも立てられるGitHubクローン·GitLab MOONGIFT
GitLabはRuby/Ruby on Railsで作られたGitHubクローンです。 GitHubは有料でプライベートリポジトリが持てますが、それでもセキュリティ上の理由でリポジトリを外だしできないケースはあるかと思います。そんなときに使ってみたいのがGitLab、GitHubクローンです。 ログイン必須になります。 ログインした後の画面です。登録済のプロジェクトが一覧表示されます。 一つのプロジェクトを閲覧しています。ソースツリーが出ます。ソースツリーは右へ右へスライドして表示されます。GitHubに似ています。 ソースコードハイライターも内蔵されています。rawでファイルをダウンロードできます。 タグやブランチを切り替えることもできます。 コミット履歴一覧です。 コミット詳細ではDiffが確認できます。 コミットに対するコメントも確認できます。 チーム設定です。複数人でのコラボレーシ
あなたのWebアプリケーションは安全か。Google製のセキュリティチェッカー·Skipfish MOONGIFT
SkipfishはSQLインジェクションをはじめWeb向けの脆弱性を発見するソフトウェア。 SkipfishはGoogle製のオープンソース・ソフトウェア。2011年になってセキュリティインシデント関係の話題が飛び交っている。特に大きいのはソニーだろう。あそこまでの規模は相当珍しいが、何も対岸の火事という訳ではない。 オプション セキュリティホールを狙うのは人間に限らない。日々クローラーがWebサイトにアクセスしてセキュリティホールを狙っているのだ。狙われる前にSkipfishを使って自主的にチェックしてみよう。 SkipfishはGoogleが開発したセキュリティチェックソフトウェアだ。ターミナルで動作するソフトウェアで、指定したURLに対してSQLインジェクションやXSSなどWebアプリケーションが狙われやすい脆弱性をついてくる。結果はHTMLベースのレポートとして出力される。 結果は
スマートフォン最適化サイトを構築するに使いたい、デバイスエミュレータ·Mobilizer MOONGIFT
MobilizerはBlackberry/iPhone/webOS/Androidのスマートフォンを模した最適化サイトチェックツール。 MobilizerはAdobe AIR製、Windows/Mac OSX用のフリーウェア。現在のスマートフォン市場ではAndroid、iPhone、RIMの三強になりつつある。さらにWindows PhoneやwebOSといったデバイスも参入し、チャンスを狙っている。まだまだ荒れそうな雰囲気はある。 起動した画面 さらにインターネットアクセスはデスクトップよりもモバイルのトラフィックが勝っている。これはスマートフォンへの対応をしない訳にはいかないだろう。そこでスマートフォンでのWebサイトの最適化具合をチェックできるMobilizerを紹介しよう。 Mobilizerを起動するとアドレスバーが表示される。そしてその横にはPhonesというリンクがある。ここ
社内で立てたいWebベースのSubversionリポジトリブラウザ·sventon MOONGIFT
sventonはJava製WebベースのSubversionリポジトリブラウザ。 sventonはJava製のオープンソース・ソフトウェア。個人の間ではGitやMercurialといったバージョン管理システムがもてはやされているが、企業においてはまだまだSubversionが強い。機能的にも十分であり、社内開発であればあえて乗り換える理由がない場合も多いだろう。 そんなSubversionの管理ではTortoiseSVNが使われているだろうが、非開発者が使うならばWebベースのが良いと思うはずだ。そこで使ってみたいのがsventonになる。 sventonはWebベースのSubversionリポジトリブラウザだ。階層をそのまま表示してフォルダを辿りながらファイルを閲覧していくことができる。またコミットログを閲覧してファイルの差分を確認することも可能だ。差分はDiffとして表示することもサイ
HTML5/JavaScriptによるマルチデバイスをサポートした電子雑誌フレームワーク·Treesaver.js MOONGIFT
Treesaver.jsはHTML5/JavaScriptを使った電子雑誌を作成するためのフレームワーク。 Treesaver.jsはPython製、HTML5/JavaScript用のオープンソース・ソフトウェア。電子書籍は決して遠い存在ではない。誰でも自由に作成、発信できるコンテンツになってきている。ePubを作るのも大して難しいことではない。 サンプルの表紙 コンテンツは既に多数ある訳で、次に問題になるのは見せ方だ。これまでのWebページとは大きく違い、ただ上からずらずらと並べていけばいい訳ではない。しかしそんな見せ方についても既にライブラリが存在する。その一つがTreesaver.jsだ。 Treesaver.jsはHTML5/JavaScriptを使い、テキストや画像、動画と言ったメディアを織り交ぜた電子雑誌を作成することが出来るソフトウェアだ。Treesaver.jsはコンパイ
JavaScript製のOAuthライブラリ·jsOAuth MOONGIFT
jsOAuthはJavaScript製のOAuthライブラリ。 [/s2If] jsOAuthはJavaScript製のオープンソース・ソフトウェア。今ではWeb APIを公開しているサービスは珍しくない。そして従来は配信系ばかりだったが、今ではWeb APIを通じたデータ登録や更新も可能になっている。そんな時の認証の仕組みに使われているのがOAuthだ。 テスト用コード（ここままでは動かないが…） OAuthはTwitterで最も知られるようになったが、元々はFlickrやGoogle、Facebookなどでも使われている機能ベースの認証技術だ。そしてそれをJavaScriptベースで実現したのがjsOAuthになる。 jsOAuthはJavaScriptによる実装なので、ソースコードが見えてしまう。OAuthではシークレットキーを使うので、それが丸見えというのは考えものだ。だがWebブ
AndroidからChromeへURLを送信する·android2cloud MOONGIFT
android2cloudはAndroid/Google Chrome向けのオープンソース・ソフトウェア。スマートフォンが便利になっており、Webブラウジング程度であれば十分こなせるようになっている。だが時には母艦側で画面を確認したい時がある。 シェア設定から行う やり方は幾つかあるが、URLを目で見ながら書き写すなんてのは面倒すぎる。URLをコピーしてメモ的なアプリやWebサービスに貼付けて渡すこともできるだろう。もっとスマートな手法を好む方はandroid2cloudを使ってみると良い。 android2cloudはAndroid OS 2.2から搭載される機能「Phone to Chrome」を模したソフトウェアで、現状のAndroid機でも利用できる。Android、Google Chrome双方にソフトウェアおよび機能拡張をインストールする必要がある。データの受け渡し用のGoog
WebベースのSubversionマネージャ·iF.SVNAdmin MOONGIFT
iF.SVNAdminはPHP製のオープンソース・ソフトウェア。個人ユースであればGitやMercurialが流行っているが、企業であればSubversionがまだまだ主流だ。Subversionの設定を行うのにサーバにログインしてユーザを作ったりグループ管理しているケースは多い。 アクセス権限 サーバの使い方に慣れた人であれば良いだろう。だがそれを都度行うのは面倒だ。Webブラウザ上から設定が行えれば操作はとてもスムーズになるだろう。使ってみたいのはiF.SVNAdminになる。 iF.SVNAdminはPHP製で、ローカルのディレクトリに対してSubversion管理を行うためのソフトウェアだ。Webブラウザ上でユーザ、グループを作成し、リポジトリを閲覧することもできる。複数のリポジトリを作成し、それぞれに対して権限を設定できる。認証はLDAPを用いることもできる。 グループ管理 サー
jQueryを使ったWebベースプレゼンテーション·jQuery Presentation MOONGIFT
jQuery PresentationはJavaScript/HTML製のオープンソース・ソフトウェア。プレゼンツールと言えばかつてはPowerPointを指していた。最近ではMac OSXユーザはKeyNoteを使ってプレゼンする人が多くなっている。プレゼンもツールによってインパクトが変わってくるのだ。 Webベースのプレゼンツール 単純にスライドが切り替わるだけでは、聴衆は眠たくなるばかりだ。もっとインパクトのある見せ方を考えないといけない。Webブラウザベースだと、柔軟なレイアウトが可能になる。一緒に使ってみたいのがjQuery Presentationだ。 jQuery PresentationはjQueryで作られたプレゼンテーションツールだ。特徴は一つ、スライドの切り替えにある。まるでスライドが回転するように切り替わるのだ。これは初めて見た人にとってはインパクトが強いのではない
iPhone向けWebサイトを作るのに最適なテンプレート&JavaScript·moobile MOONGIFT
moobileはHTML/JavaScript製のフリーウェア（ソースコードは公開されている）。iPhone/Androidを中心とするスマートフォンのシェア拡大は留まることを知らない。モバイルネットワークが発展している限り、この流れは止まることはないだろう。Webサイトを提供する上でもスマートフォンは欠かせない存在になる。 ボタンバー ネイティブアプリを提供する手もあるが、もっと容易なのが最適化されたWebサイトを提供することだ。そもそもネイティブアプリを提供するほどのニーズがないサービスもあるはずだ。そこで使えるのがmoobileになる。 moobileはiPhoneやAndroidといったWebKitベースに対応したWebサイトフレームワークだ。HTML5で作成されているのが特徴だ。フォームやボタン、ボタンバーなどのUIをテンプレート化している。これを使えば最適化されたWebサイトが
iPhone向け最適化Webサイトを構築するjQueryライブラリ·jQuery iPhone UI MOONGIFT
jQuery iPhone UIはHTML/JavaScript製のオープンソース・ソフトウェア。iPhone用のWebサイトを構築するニーズが増えてきている。既に幾つかテンプレートもリリースされており、それらを使えば最適化されたインタフェースのサイトが作りやすくなる。 アイコンリスト そうしたライブラリを使う時に重要なのが、どれくらいの機能に対応しているかだ。単純なリストはもちろん、プロフィールページ、画像付きリスト、フォームなど多数のニーズがある。その一つ、JavaScriptを使ったパターンに適合できそうなのがjQuery iPhone UIだ。 jQuery iPhone UIの特徴は名前の通りjQueryを使っていることだろう。同種のライブラリとしてjQTouchがあるが、あちらはがちがちに固まっている雰囲気があるがjQuery iPhone UIは切り離して使えそうだ。HTML
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
