Svgbob Editor - Web上でアスキーダイアログをWYSIWYGで描く
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プログラマはドローアプリケーションを扱うのが苦手です（偏見）。メンテナンスするのも面倒ですし、簡単な図であればテキストで罫線を使った方が簡単に書けるでしょう。後は罫線が自動的にドローされれば良いだけです。 そこで使ってみたいのがSvgbob Editorです。罫線で描いたアスキーダイアログをSVGに変換してくれるソフトウェアです。 Svgbob Editorの使い方 例えばこんな感じ。日本語を使うこともできます。さらにツールバーで円や四角、線を選んでマウスで描くこともできます。 さらにサンプルでは細かい描画も行われています。 UMLや数学的な図形も。 フローチャート。 中国語も使われています。 システムズを表すのにも使えます。 マインドマップも。これは書く方が大変な気がしますが。
Vue Designer - Vue.jsの表示を確認できるVisual Studio Codeプラグイン MOONGIFT
ReactやAngular、Vueなどは独自のタグを使ったWebコンポーネント型のシステムと言うこともあって、これまでのHTMLデザインの手法が通じなくなっています。デザインの確認などで苦戦している人も多いのではないでしょうか。 そこで使ってみたいのがVue Designerです。Visual Studio Codeプラグインとして動作するVueデザイン確認ツールです。 Vue Designerの使い方 エディタです。Vueファイルに対応しており、デザイナーを開くと右側にプレビューが表示されます。 もちろんリアルタイムに更新されるので、スタイルタグの内容を変えるとすぐに反映されます。 props、データの確認もできます。 Webブラウザなどで表示を確認するのも良いですが、プログラミングエディタの中に埋め込まれていることで、より確認が簡単にできるようになっています。Vue Designerを
Swagger Editor - Swaggerフォーマットの編集とコード生成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました SwaggerはWeb APIの標準記述フォーマットとして知られつつあります。標準ができるということは、それを使っていれば同じデータを使って他のフォーマットやサービスで使うことができるようになります。 すでにコード生成ライブラリなどが作られていますが、今回はSwagger向けのドキュメントを作れるSwagger Editorを紹介します。 Swagger Editorの使い方 こちらがメイン画面です。左側がエディタ、右側にその結果が表示されます。 イチから記述する他、JSONを貼り付けて読み込ませることもできます。 設定が多数用意されています。 クライアントやサーバサイドのコード生成が行えます。その結果はZipファイルでダウンロードできます。 例えばRubyのコードはこのようになり
Copy Syntax Highlight for OS X - シンタックスハイライトを適用してコピー MOONGIFT
例えばプレゼン資料にプログラミングコードを貼り付けるとします。テキストエディタ上ではシンタックスハイライタが組み込まれていますので、コードが色分けされて分かりやすい感じになっているでしょうが、貼り付ける際には単なる文字列として、すべて単色で貼り付けられてしまいます。 そこで使ってみたいのがCopy Syntax Highlight for OS Xです。テキストハイライト処理をした文字として貼り付けを可能にするソフトウェアです。 Copy Syntax Highlight for OS Xの使い方 Copy Syntax Highlight for OS Xはサービスとしてインストールされます。 まずは普通にコピーして貼り付けてみます。 次にCopy Syntax Highlight for OS Xを指定します。 言語が聞かれます。今回はjavascriptと指定します。 そうするとこん
clipboard.js - Flashなしでも使えるクリップボード操作ライブラリ MOONGIFT
Web画面上に表示されている文字列をコピーするのは意外と面倒ですが、クリップボードの操作ができないために色々な工夫が考えられてきました。Flashを使ったものが多かったのですが、HTML5になってFlashは使われなくなってきています。 そこで代替として使ってみたいのがclipboard.jsです。Flashなしでクリップボードの操作ができるJavaScriptライブラリです。 clipboard.jsの使い方 clipboard.jsのデモです。テキストボックスの文字列をコピーします。 アイコンのクリックでコピーされました。 こちらはカットのデモ。 文字が消えてちゃんとカットされました。 こちらは表示されていない文字列をコピーします。data-clipboard-textでコピーする文字を指定しています。 clipboard.jsのタネは新しく出てきたexecCommandというAPIに
OpenSlideshare - PHP製のSlideshare/SpeakDeckクローン MOONGIFT
セミナーや勉強会で登壇した際にはスライドをSlideshareにアップロードしています。人によってはSpeakDeckにアップロードしている人もいるでしょう。ポートフォリオとしても役立ちますし、コンテンツマーケティングの一つにも使われています。 そんなスライド共有サイトを自分でも持ちたいと思ったらOpenSlideshareを使ってみてはいかがでしょう。他サービスにアップロードしない分、ブランディングを構築するのに良いかもしれません。 OpenSlideshareの使い方 OpenSlideshareのトップページです。アップロードしたスライドが一覧表示されます。 スライド詳細。スライドの切り替え、ダウンロードなどができます。 埋め込み用コードを取得することができます。 新しくユーザ登録します。 スライドのアップロードができるようになります。 OpenSlideshareが対応しているのは
ProseMirror - Markdownで記入できるWYSIWYGエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました WYSIWYGエディタは多数ありますが、基本HTMLを作成するためのツールです。HTMLに不慣れな非エンジニアにとっては便利ですが、ある程度技術力がある人にとってはツールの使い勝手によってストレスが感じられるでしょう。 今回は次世代的なWYSIWYGとも言えるProseMirrorを紹介します。記法はMarkdown、描画はHTMLというソフトウェアです。 ProseMirrorの使い方 こちらがProseMirrorの画面です。HTMLが描画されていますが、記法としてはMarkdownが使えます。 リンクなどは別途ツールが表示されて、そこでURLを入力できます。 画像の埋め込み表示にも対応しています。 ツールバーではなくツールチップモードも用意されています。 メニューから機能を辿
php7cc - 早めに試そう。PHP7互換性チェッカー MOONGIFT
2015年11月にリリースされるというPHP7。エンジンも換わり、それに伴ってパフォーマンスも向上していると言われています。しかしその結果、これまで使えていた書き方ができなくなっています。 そこでこれまでのPHPアプリケーションをphp7ccを使ってチェックしてみましょう。PHP7に対応しているかどうか、チェックしてくれます。 php7ccの使い方 php7ccは以下のように対象になるファイル、またはディレクトリを渡すだけで使えます。 $ /usr/bin/php bin/php7cc.php src/File.php Checked 1 file(s) in 0.005065 second(s) エラーがあると、ファイル名と行数、それと理由が表示されます。 $ /usr/bin/php bin/php7cc.php ~/htdocs/ File: /path_to_file/func.p
Caddy - HTTP/2対応の開発用HTTPサーバ MOONGIFT
ユーザ向けではなく、開発用途などでHTTPサーバが必要になる機会は多いかと思います。ブログのテーマを編集していたり、静的サイトのデザインをする場合もあるでしょう。そんな時、ぱぱっと使えるHTTPサーバがあると便利です。 RubyやPythonなどでHTTPサーバを立てることもできますが、Caddyを使えばバイナリファイル一つで済みます。しかもHTTP/2サポートです。 Caddyの使い方 CaddyはWindows、Mac OSX、Linux向けにバイナリが提供されています。新しい機能をふんだんに取り入れたHTTPサーバとなっています。実行は簡単で、バイナリをそのままを実行するだけです。 $ ./caddy_darwin_amd64 0.0.0.0:2015 デフォルトで2015番ポート（年数）というのが良い感じです。ヘルプは次のようになっています。 $ ./caddy_darwin_am
DevOOPS - 多数のパターンを用意したBootstrap管理画面
デザインでシステムの品質が決まるわけではありません。しかし、それでも全くデザインされていないシステムよりも見た目が整っている方が安心して使えるでしょう。それは管理画面でも同様です。 通常、管理画面は利用者が限定的なため、デザインが適当になってしまいます。そんな寂しい管理画面もDevOOPSを使えば一気に見た目が向上するでしょう。 DevOOPSの使い方 DevOOPSには多くのテンプレートが用意されています。これらを組み合わせるだけで格好良い管理画面ができあがりそうです。Bootstrapベースなので、カスタマイズもそれほど難しくはないと思います。 DevOOPSはHTML5/JavaScript製、GPL v3のオープンソース・ソフトウェアです。 devoopsme/devoops
Firing Range - Google製のWebセキュリティスキャナテストツール
Webブラウザは基本的に安全に使えるように設計されています。しかし悪意をもった開発者がセキュリティホールをつき、Webアクセスしてきた人から情報を盗み取ったり、Webブラウザをクラッシュさせたりします。 そうした脆弱性を発見するツールを開発している方が、その性能評価として使えるのがFiring Rangeです。Googleが社内で開発しているWeb脆弱性検知ツールのInquisitionをテストする際に使っているそうです。 Firing Rangeの使い方 Firing RangeではよくあるXSSなどを提示しています。 Firing Rangeが提示するスクリプトはセキュリティ上問題のあるコードになります。どういった点が狙われるのか、それを学ぶのに役立つでしょう。ハッシュやCookieを使うなどWeb全般と言うよりはJavaScriptを活用していく中でのセキュリティホール検知ツールをタ
jQuery-FontSpy.js·Web Fontの読み込み完了、失敗をハンドリング MOONGIFT
最近はWeb Fontを使うサイトが増えてきました。ロゴとして使うケースもありますが、その多くはアイコンフォントとして使っているようです。アイコンフォントの場合、Web Fontの読み込み前や読み込みに失敗すると四角が表示されてしまうのが難点です。 アイコンとテキストであればまだいいですが、アイコンだけを使っている場合はその意味するところが分からなくなってしまいます。そこで使ってみたいのがjQuery-FontSpy.jsです。 jQuery-FontSpy.jsの使い方 こちらがデモ画面。 DevToolsを見ると読み込み失敗が分かります。 jQuery-FontSpy.jsはWeb Fontの読み込み成功、失敗を検知できるソフトウェアになります。読み込みに失敗したら、その場所は代替画像を表示すると言った処理に切り替えることもできるでしょう。読み込み失敗しても致命的なエラーにならないから
Bootstrap Material - Material Designを適用したBootstrapテーマ
Googleが開発者向けイベントで発表した新しいデザインコンセプトのMaterial Design。フラットUIをベースとしつつ、さらにアニメーションやエフェクトを通してユーザに情報を分かりやすく伝達できます。 そんなMaterial DesignをBootstrapに適用したのがBootstrap Materialです。これは多くのプロジェクトで活躍しそうです。 Bootstrap Materialの使い方 Bootstrap MaterialはフラットUIのBootstrapテーマとしてもいい感じですし、さらにMaterial Designによって情報が分かりやすくなります。デスクトップはもちろんのこと、スマートフォン/タブレット向けのデザインとしても使えることでしょう。 Bootstrap MaterialはHTML5/CSS3/JavaScript製のソフトウェア（ライセンスは独自
DarkroomJS – JavaScriptで画像切り抜き
画像加工を行うと言えばローカルで画像編集ソフトウェアを使うのが思い浮かびますが、最近では随分Webベースで行えるようになっています。複雑な加工はまだまだですが、ちょっとした加工であればWeb上で行う方が手軽だったりします。 今回はその一つ、DarkroomJSを紹介します。位置を決めて切り抜きするという加工をシンプルに手早くできるようになります。 DarkroomJSの使い方 DarkroomJSはCanvasタグを使って画像加工を行います。加工後はそのまま切り抜かれた形で保存もできるようになっています。今は写真コンテンツも大きくなっているので、それをユーザサイドで加工してもらうための方法として使ってみるのが良さそうです。 DarkroomJSはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 DarkroomJS MattKetmo/darkroomjs
92five – 格好いいデザインのプロジェクト管理
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プロジェクト管理、何を使っていますか。最近ではRedmineを使っている所が多いかも知れません。規模が大きくなるとMS Projectを使ったり、BasecampのようなWebサービスを使っている所もあるかも知れません。 何となくプロジェクト管理は開発者向けのサービスとあって無骨なイメージがあります。今回はフラットなデザインが格好いい、92fiveを紹介します。 92fiveの使い方 現状ではSQLのエラーが発生してしまうのですが、従来のプロジェクト管理にはないUIで使ってみたいと思えるシステムではないでしょうか。同じ機能を提供するとしても見やすいもの、使いやすいものを使っていきたいですね。 92fiveはPHP製、Creative Commonsのオープンソース・ソフトウェアです
InvoicePlane - PHP製の請求書管理システム
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました システムを提案するシステム会社の基幹システムが大したことないなんてのは良く聞く話です。システム開発の場合、請求書の量もそう多くないので手作業で作るというケースも少なくありません。 しかしそれではやはり問題があるでしょう。ということでフリーランスからでも使えそうな請求書管理システムがInvoicePlaneです。 InvoicePlaneの使い方 InvoicePlaneは見積書から請求書、クライアント管理などバックオフィスの機能を最低限備えています。レポート機能は集計くらいなので、より高度な分析は自分でカスタマイズしていくのがいいのではないでしょうか。そこがオープンソースの魅力とも言えるでしょう。 InvoicePlaneはPHP製、MIT Licenseのオープンソース・ソフトウ
inuicon – pplogの中で使われているアイコンフォント（Web Font）
最近は画像でアイコンを表示する代わりにWeb Fontを使うケースが増えてきました。Font Awesomeをはじめとして、公開されているものを使うのは容易ですが、自分のために新規で作成するというのは難しい印象があります。 そんな中、参考にしてみたいのがinuiconです。pplog.netの中で使われているアイコンフォントになります。 inuiconの使い方 こちらがフォントです。かわいいアイコンですね。 下にあるのがすべてのフォントです。 種類はそう多くありませんが、pplogの中で使う分には十分なのでしょう。今後、pplogの中で使いたいアイコンが増えたら、IcoMoonが拡充されていくと思われます。自分たちのWebサイト、アプリで使うアイコンをフォントとして管理するというのは面白いアイディアですね。 また、inuiconはRailsでも使えるgemも公開されています。Railsプロ
Quill – APIが多彩なWYSIWYGエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webのテキストエリアの貧弱さには皆が辟易しています。だからこそツールバーを付けたり、中でHTMLが使えるようなWYSIWYGエディタに人気が集まります。しかしそうしたソフトウェアは柔軟性が高くなく、自分好みにならないケースもあるでしょう。 そこで紹介したいのがQuillです。リッチなテキストエディタとAPIというのが売りの柔軟なカスタマイズ性が売りのWYSIWYGエディタです。 Quillの使い方 コードは次のようになります。 var basicEditor = new Quill('#basic-editor'); basicEditor.addModule('toolbar', { container: '#basic-toolbar' }); ツールバーはモジュールとして追
Gitonomy – PHP製のGit管理サーバ
おお、これは企業で使えそうですよ！ 企業によっては外部にソースコードを預けられないため、自社でGitサーバを構えているところも多いでしょう。しかしそうなると管理画面が欲しくなります。GitHubの管理画面は優秀で、ああいったWebブラウザ上でリポジトリの情報を見たいと思うはずです。 そこで使ってみて欲しいのがGitonomyです。デザインの格好いい、Gitリポジトリマネージャです。 Gitonomyの使い方 GitonomyはPHP + Symfonyの組み合わせで作られていて、Webブラウザ上でGitリポジトリの操作が一通りできるようになっています。ユーザはプロジェクト単位にグループに入り、そこで権限管理される仕組みです。 ソーシャル機能はありませんが、企業ユースであれば十分ではないでしょうか。社内でGitサーバを立てている場合はぜひ導入を検討してみてください。 GitonomyはPHP
Camo - GitHubでも使われている画像プロキシ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近のWebサービスではSSLを常用するようになっています。しかしそんな中、意外と厄介なのが画像などの外部リソースです。HTTPSに入っていない外部リソースを参照しようとすると全てがSSLでないといった注意が出てしまいます。 そこで使ってみたいのがCamoです。GitHubでも使われている小さな画像プロキシになります。 Camoのデモ これはCamoがSSLになっており、プロキシとしてFlickrの画像を取得している形になります。Camoは5MBまでの画像を取得可能で、Googleチャートをサポート、リダイレクトした画像も取得できます。 URLのフォーマットは次のようになります。 http://example.org/<digest>?url=<image -url> http:/
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
