tiptap - Vue.js向けのリッチなWYSIWYGエディタ MOONGIFT
WYSIWYGなエディタは開発者ではない人たちにコンテンツを作ってもらいたい時に活躍します。HTMLを手書きするのは困難ですし、編集している内容と結果が異なるので、結果を想像しながら作るのは慣れない人にとっては難しいでしょう。 もしVue.jsを使っているならば導入したいWYSIWYGエディタがtiptapになります。多機能で使い勝手が良さそうなエディタです。 tiptapの使い方 通常の表示です。上にツールバーがある一般的なWYSIWYGエディタです。 文字を選択してフローティングメニューを出す機能もあります。 新しい行に入ったタイミングでツールバーを下に表示させます。 画像の挿入。ドラッグ&ドロップでできます。 文字列を選択した時にツールバーを出します。普段は隠れています。 Todoリスト。 Twitterのような @ でメンション相手を出す機能。 Markdown記法をビジュアル化し
問題が起きる前に。Webサーバセキュリティチェッカー·Websecurify MOONGIFT
Websecurifyは主立ったWebサーバにおけるセキュリティチェックを自動化してくれるソフトウェアです。 Webサイトを巡るセキュリティ問題は多々あります。自動化されている攻撃ソフトウェアもあり、ちょっとした油断で一気に重要データが引き抜かれたり、逆に破壊されてしまう可能性があります。それを事前に確認すべく使っておきたいソフトウェアがWebsecurifyです。 メイン画面です。 テストを行うURLを入力します。実行前に確認が出ます。 テストの実行中です。 完了しました。 レポート画面でインシデントの詳細が確認できます。 Websecurifyは代表的と言えるセキュリティチェックについて自動で行ってくれます。SQLインジェクション、ローカルファイルの読み込み、クロスサイトスクリプティング、CSRFなど多岐にわたります。サーバの種別を判断した上でやり方を変えるので、より確度が高くなります
多彩なフレームワークに対応したPHP向け認証ライブラリ·Opauth MOONGIFT
OpauthはPHP向けの認証ライブラリです。抽象化することで多様なプロバイダーに容易に対応できます。 Webサービスで認証を用意すると言っても今は多様な技術が存在します。単なるID/パスワードに限らず、OpenIDやOAuthもあります。サービスプロバイダーごとに実装も若干変わったりします。そうした認証技術を統合して使えるのがOpauthです。 デモです。 Facebook認証です。 問題なく認証できました。各種データも取得できているのが分かります。 こちらはGoogle認証です。 こちらもユーザプロフィール含めて取得できています。 最後はTwitterです。 はい、問題ありません！ OpauthはRubyの認証ライブラリOmniauthにインスパイアされて作られており、認証部分を抽象化することでプロバイダーを切り替えて容易に様々なサービスに対応できるようになっています。技術的にはOpe
1,000のサーバでも監視できるnode.js製死活チェッカー·uptime MOONGIFT
uptimeはnode.jsで作られたWebサーバ死活チェッカーです。 Webサーバがきちんと正常に動き続けているかどうか一番簡単にチェックするのは定期的にアクセスしてレスポンスタイムを見ることです。そんなWebサービスの死活チェックに使えるのがuptimeです。 サーバを立ち上げました。最初に監視するWebサーバを設定します。 URLと監視する間隔を指定するくらいです。 監視を開始しました。グラフは自動更新されないのでご注意ください。 イベントがあればこちらに出力されます。 グラフではなく一覧で結果を確認できます。 徐々にグラフが更新されていきます。 uptimeは1000以上のWebサーバを一括で監視できるパフォーマンスを持っています。またダウンしている際にはWebアラートを表示できます。エラーがあった際にはHTTPステータスやその内容を記録してくれます。サーバはタグを使ってグループ管
拡張可能。プログラマー向けのHTMLプレゼンテーションツール·deck.js MOONGIFT
deck.jsはテーマ対応、拡張に対応したHTMLスライドツール。 deck.jsはHTML5/JavaScript製のオープンソース・ソフトウェア。HTMLを使ったスライド作成ツールも多数出回ってきた。そうしたソフトウェアを使うと、テキストエディタでどんどんスライドを作っておいて、見栄えのいいプレゼンテーションが行えるようになる。 上下でスライド切り替えも しかし与えられたものをそのまま使っていても面白くはない。自分で拡張したり、操作ができたりするともっと面白いはずだ。それを実現できるスライドライブラリがdeck.jsだ。 deck.jsはHTMLスライドツールとしてみればそれほど特別ではない。矢印キーによるスライド切り替え、テーマ対応、スライド切り替えを左右または上下、フェードアウトといったアクションから選べると言った具合だ。また項目を順番に表示していく機能もある。 テーマを変更した例
今風のUI。Ajaxを使ったPHPベースのMySQL管理システム·MyWebSql MOONGIFT
MyWebSqlはAjaxを多用した今風のUIを使ったMySQL管理ツール。 MyWebSqlはPHP製のオープンソース・ソフトウェア。PHPと言えばMySQL、その二つの組み合わせから生み出されたphpMyAdmin。LAMPスタックなんて言葉が生み出されたのにphpMyAdminの優秀さがあったことは否定できない。それくらい誰しもが使っているソフトウェアだ。 データ一覧 だが長い年月のうちにUIは古いものになり、ちょっと時代が変わってきているかという気がしなくもない。そこで今のWebに合わせたMySQL管理ツールを紹介しよう。それがMyWebSqlだ。 MyWebSqlはWebアプリケーション風のインタフェースに加えて、UIのデザインもポップで明るい配色になっていて使い勝手が良い。左側にデータベースの一覧、右側でデータの編集を行うスタイルはphpMyAdminと同じだ。さらに下にはSQ
Webサイト上で訪問者とチャットするサポートシステム·Mibew Messenger MOONGIFT
Mibew MessengerはWebサイトの訪問者をサポートするオンラインチャットシステム。 Mibew MessengerはPHP製のオープンソース・ソフトウェア。普通のショップでは困ったことがあった時に聞ける店員さんがいる。対してECショップでは24時間いつでも買えるということ、デジタルであるということもあって、店員さんの存在を感じることはない。 チャット画面 ECショップにSkypeボタンがあっても使うことはなさそうだが、いつでもショップの人に話しかけられる環境があると購入率が高まる可能性があるだろうか。そんな挑戦をしたいならば使ってみたいのがMibew Messengerだ。 Mibew Messengerはオンラインライブサポートソフトウェアだ。簡単に言えばWebチャットソフトウェアだが、匿名のユーザと管理者側とで対話できるのが特徴だ。対話は一対一でされるが、管理は複数人で行え
あなたのWebアプリケーションは安全か。Google製のセキュリティチェッカー·Skipfish MOONGIFT
SkipfishはSQLインジェクションをはじめWeb向けの脆弱性を発見するソフトウェア。 SkipfishはGoogle製のオープンソース・ソフトウェア。2011年になってセキュリティインシデント関係の話題が飛び交っている。特に大きいのはソニーだろう。あそこまでの規模は相当珍しいが、何も対岸の火事という訳ではない。 オプション セキュリティホールを狙うのは人間に限らない。日々クローラーがWebサイトにアクセスしてセキュリティホールを狙っているのだ。狙われる前にSkipfishを使って自主的にチェックしてみよう。 SkipfishはGoogleが開発したセキュリティチェックソフトウェアだ。ターミナルで動作するソフトウェアで、指定したURLに対してSQLインジェクションやXSSなどWebアプリケーションが狙われやすい脆弱性をついてくる。結果はHTMLベースのレポートとして出力される。 結果は
触れる価値あり。Google Chromeをプログラミングエディタ化する·SourceKit MOONGIFT
SourceKitはGoogle Chrome内で動作するテキストエディタ。Dropbox APIを使っている。 SourceKitはGoogle Chrome向けのフリーウェア（ソースコードは公開されている）。なかなかWebアプリケーション化しないものの筆頭として考えられてきたのがテキストエディタだ。特にプログラマ向けのエディタになると手になじんでいるかどうかの問題が大きく、なかなか本格化しなかった。 まさにエディタ 確かにWebベースで開発するということに大きなメリットは感じられなかったのは確かだ。だがSourceKitを見たら、その考えが変わってしまいそうだ。 SourceKitはGoogle Chromeの機能拡張として提供される。左側にファイルツリー、右側に編集画面が表示される。開発者向きに各言語向けのハイライトに対応している。さらにテーマも幾つも用意されており自分好みの配色を選
アジャイル開発のスプリント管理を楽しく。node.js/WebSocketによるタスクボード·scrumblr MOONGIFT
scrumblrはスクラム開発のタスクボードをnode.jsで実現するソフトウェア。 scrumblrはnode.js/JavaScript製のオープンソース・ソフトウェア。アジャイル開発手法の一つであるスクラム開発。スプリントと呼ばれる日程単位の中で決められた機能を作り込み、テストし、最終的に製品に組み込む所まで繰り返し行っていく。 並べた所 やるべき作業と、それが完了するまでのステップを適切に管理する必要があるのだが、その時に使われるのがタスクボードだ。通常、ホワイトボードやコルクボードを使って管理されるが、今回はデジタルで管理するscrumblrを紹介しよう。 scrumblrはnode.jsを使い、WebSocketを使って構築されている。そのため反映がリアルタイムに行われるのが特徴だ。機能としてはボードを垂直に分断する機能（幾つでも可能）、付箋紙を貼付ける機能と動かす機能となって
Codeigniter開発者必見。便利な機能をパッケージ/インストール·Sparks MOONGIFT
SparksはCodeigniter用のプラグインインストールシステム。 SparksはPHP/Codeigniter用のオープンソース・ソフトウェア。Railsが人気なのは豊富なプラグインが存在するというのも一因ではないだろうか。同じような処理、よく使われるような機能をプラグインとして提供することで、誰もが素早くシステムを開発できるようになる。 インストール しかもダウンロードや配置など面倒な手順を踏まず、コマンド一つでインストールできてしまうのが魅力だ。こんな仕組みは他でも欲しい、誰もが考えるだろう。そしてCodeigniterでプラグインシステムを実現するのがSparksだ。 Sparksはコマンド一つでインストールされるソフトウェアで、その後のプラグインのインストールもコマンド一つで可能だ。プラグインにはテンプレートライブラリやMongoDB、位置情報系、Gravatarなど多数揃
ドラッグアンドドロップ、プログレスバー表示に対応したアップロードライブラリ·File Uploader MOONGIFT
File UploaderはD&Dをサポートし、複数ファイルのアップロードとプログレスバー表示に対応したライブラリ。 File UploaderはHTML5/JavaScript製のオープンソース・ソフトウェア。Webブラウザの操作で最も面倒なのがファイルのアップロードではないだろうか。一つのファイルしか指定できないインタフェースや、巨大なファイルを送信中の固まった状態はとてもユーザビリティが低い。 ドラッグアンドドロップ そうした問題点を解決するのに使われてきたのがFlashだが、HTML5になって複数ファイルのアップロードもできるようになった。さらにユーザビリティを高めるために使ってみたいのがFile Uploaderになる。 File Uploaderはドラッグアンドドロップでファイルのアップロードが出来るライブラリだ。まるでGmailのようなインタフェースになっている。フォルダは無
非開発者に便利。WebベースのSubversionブラウザ·WebSVN MOONGIFT
WebSVNはWebブラウザベースのSubversionリポジトリブラウザ。 WebSVNはWebベース、PHP製のオープンソース・ソフトウェア。個人においてはGitやMercurialといった分散リポジトリが流行だが、企業においてはまだまだSubversionを利用することが多い。既にある資産をそのまま活かせるし、再度習得し直すコストは決して小さくない。 ツリー表示 Subversionでは主にGUIのクライアントツールを利用することが多いが、それはどちらかと言えば普段の開発業務においてだろう。プロジェクトマネージャなどはローカルアプリケーションよりもWebベースのが使い勝手が良いはずだ。そこで使えるのがWebSVNだ。 WebSVNはWebベースのリポジトリブラウザで、Subversionで管理されているリポジトリをグラフィカルに確認することができる。日本語ローカライズもされている。ツ
テキストファイルからHTML5のプレゼンテーションを生成する·KeyDown MOONGIFT
KeyDownはMarkdown記法を使ってテキストファイルからHTML5のプレゼンテーションを生成する。 KeyDownはRuby製のオープンソース・ソフトウェア。個人のエンジニア、デザイナーが集まる勉強会ではあまり凝ったプレゼンを見る事が少ない。むしろHTMLやKeyNoteなどを使ってカジュアルに作られる方が多いのではないだろうか。 スライド テキストファイルで作成したプレゼンテーションは検索も容易でWebとの親和性も高い。配布して見てもらうのに特別なソフトウェアも無用と言う事なしだ。とは言え作成にHTMLを使ったりしたくない、という人はKeyDownを使ってみよう。 KeyDownはプレゼンテーションファイルの記法にMarkdownを使えるソフトウェアだ。keydownコマンドを使って（オプションはgenerate）プレゼンテーションのベースを作成する。!SLIDEというのがスライ
JavaScriptでSinatra風？RESTfulをサポートしたフレームワーク·Sammy.js MOONGIFT
Sammy.jsはJavaScriptによるRESTfulをサポートしたWebフレームワーク。 Sammy.jsはJavaScript製のオープンソース・ソフトウェア。Webアプリケーションを開発する際には、サーバサイドとクライアントサイドの二つを開発する必要がある。クライアントサイドにはJavaScriptやFlash、HTMLなどが使われているだろう。 フォームのハンドリングも可 しかしJavaScriptはどんどん高度化し、機能が増している。JavaScriptだけで解決できることは日々増えているのだ。もはやサーバサイドを必要とせず、Webアプリケーションを構築できてしまう。そのためのフレームワークがSammy.jsだ。 Sammy.jsはごく小さなWebフレームワークで、ルーティングを備えている。クライアントサイド内でRESTfulをルーティングで定義し、アクションを受け取ることが
これは楽しい！WebベースのGPSエディタ/ビューワー·GMapWidget MOONGIFT
GMapWidgetはGPSのログファイルや位置情報付きの写真を読み込んで地図上に表示するソフトウェア。 GMapWidgetはHTML/JavaScript製のオープンソース・ソフトウェア。コンピュータと位置情報は相性がいい。スマートフォンやガラケーにはGPSが備え付けられているのが当たり前になっている。特にスマートフォンでは位置情報を扱うアプリの人気が高い。 マーカー 記録したデータは内部に蓄積されるが、それだけでは勿体ない。やはり外部や他のデータと組み合わせてはじめて意味をもってくる。GPSのログデータ、GPXファイルを使って地図上にマッピングしてみたいと思ったらGMapWidgetを使ってみよう。 GMapWidgetはWebベースのGPSエディタ/ビューワーで、GPXファイルを読み込んでGoogleマップ上にマッピングする。さらに写真のEXIF情報から位置情報を読み込んで地図上に
コードを書く、それ自体をコンテンツにするライブコーディングを実現する·Live coder MOONGIFT
Live coderはWebブラウザ上でコーディングし、それを他のユーザが閲覧、チャットできるソフトウェア。 Live coderはnode.js製のフリーウェア（ソースコードは公開されている）。優秀な人が書いているコードを後ろから見るのは面白い。みるみる間にシステムが作られていくのは痛快でもある。イベントや勉強会で実際にコードを書いて動きを見せつつステップアップしていくのは人気がある。 Web上でコーディング コードを書きつつ、そこに人のツッコミを受けたり、試行錯誤しながら作っていくのは創造的で面白いスタイルだ。それを実現するのがライブコーディングであり、そのためのシステムがLive coderになる。 Live coderはnode.jsとWebSocketを組み合わせてコーディングされていく様子がリアルタイムに見られるようになっている。コーダーは一人で、コードハイライト処理されたエリ
全ては1枚のスライドで。聴衆を魅了するダイナミックなプレゼンテーション·DaruZen MOONGIFT
DaruZenは一枚の台紙から枠を切り出してスライドショーを作成するソフトウェア。 DaruZenはAdobe AIR製（現状はWindows向け）のフリーウェア。ビジネスではプレゼンテーションと言えばMicrosoftのPowerPointを利用する人が多い。プライベートではHTMLを使ったり、KeyNote、Googleドキュメントを使う人も増えている。 作成画面 だがスライドを切り替えてプレゼンテーションを行う時点で印象に残りづらい。そもそも見飽きてしまっている。作り手としても、ぱらぱらめくる感覚のスライドではページごとに密度が変わってちぐはぐなものになってしまう。そこで使ってみたいのがDaruZenだ。 DaruZenは簡単に言えば巨大な一枚の紙にプレゼンテーションを作成するソフトウェアだ。文字、画像、動画を一枚の画面中に貼り込んで作成していく。そして最後に枠を当てはめてスライドを
覚えておくときっと役立つ。Webアプリケーション用のリッチなUIフレームワーク·Alloy UI MOONGIFT
Alloy UIは数多くのウィジェットを提供するUIフレームワーク。 [/s2If] Alloy UIはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア。Webの役割は大きく変わってきている。シンプルなホームページと言われた時代は終わり、Webアプリケーションやソーシャルサービスのようにオンライン上でやり取りされるデータが増している。 入力補完 それに伴ってWebベースでもリッチなUIが求められるようになってきた。日付をカレンダー入力したり、ソートやドラッグアンドドロップなどを実装して欲しいと言われることも多い。そのようなニーズに幅広く答えられるライブラリがAlloy UIだ。 Alloy UIは実に多くのコンポーネントを提供する。入力補完、グラフィカルなボタン、カレンダー、画像が定期的に切り替わるスライダー、カラーピッカー、グラフ、ダイアログ、インラインエディタ
Webアプリケーション用Pythonフレームワーク·Nagare project MOONGIFT
Nagare projectはGUI並みの画面と機能を備えたWebアプリケーションを開発するためのフレームワーク。 Nagare projectはPython製のオープンソース・ソフトウェア。いわゆるWebサイトとWebアプリケーションとは区別して考える必要がある。そうしないと本質を見失う。Webアプリケーションはローカルアプリケーションの代替えになり得る存在だ。 電卓やカウンターのデモ 今後、Webアプリケーションはどんどんニーズを増していくだろう。そんな時にはAjaxは当たり前で、開発方法も変わってくるかも知れない。そこで注目したいのはNagare project、Webアプリケーション開発用のフレームワークだ。 Nagare projectはHTMLを手打ちで入力しない。画面のオブジェクトを定義して描画すれば、画面上のアクションでPython側のメソッドが呼ばれる。イベント駆動型の開
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
