SnippetBin - バージョン管理を備えたスニペットサーバ
ちょっとしたコードを残しておきたいと思う機会は多いです。ローカルに保存しておいても良いですが、他の人と共有する場合はオンラインサービスを使います。社内で共有する場合は、オンラインサービスよりも社内でスニペットサーバを立てたいでしょう。 今回紹介するSnippetBinはGitをバックエンドに備えたスニペットサービスです。 SnippetBinの使い方 テキストエリアにコードを書きます。 編集すると、スライダーの値が追加されます。 さらに保存すると値が追加されました。 スライダーを左右に動かすと、そのバージョンのコードに戻ることができます。つまりスライダーがバージョン管理の役割を担っています。なお、古いバージョンに戻して編集すると、分岐して新しいバージョンが破棄されます。 SnippetBinはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 Snippe
lazygit - ターミナル用のGit UI
Gitはターミナルで使っている人が多いかと思いますが、細かい操作になるとつい忘れがちです。不要なファイルが混ざったのに気付かずに思わずコミットしてしまったり、コミット後のキャンセルなどいちいちネットで調べたりしているのではないでしょうか。 そこで使ってみたいのがlazygitです。ターミナル上のGitクライアントです。 lazygitの使い方 Gitリポジトリで実行するとlazygitが立ち上がります。 コミットメッセージの入力もできます。 コミットロゴを追いかけたり、ファイルを対象外にしたりするのも簡単です。 lazygitがGitのすべての機能を使えるとは思いませんが、普段の運用時に使っているくらいの入力であれば問題なくこなせるでしょう。GUIの重たいソフトウェアは使いたくないが、Gitを見やすく管理したいと言った場合に便利そうです。 lazygitはGo製のオープンソース・ソフトウェ
Git WebUI - ローカルのGitリポジトリ用ブラウザ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Gitリポジトリの情報をWeb上で見たいと思った時にはGitoriusであったりGitLab、GitHubなどを使うでしょう。突然大事になってしまって、セットアップするのも面倒です。 そこで使ってみたいのがGit WebUIです。ローカルで使うためのGitリポジトリブラウザです。 Git WebUIの使い方 Git WebUIはインストールすると git webui で使えます。 最初はログが表示されます。 変更したファイルが分かりやすく確認できます。 閲覧だけでなく、現在ワークスペース上で変更、追加などされているファイルを確認できます。 コミットもできます。 日本語も使えますし、差分でも文字化けしません。 Git WebUIが便利なのはローカルのGitリポジトリでコマンドを入力す
Vue2 editor - Vueを使ったテキストエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上で文章を書く機会が増えています。しかし多くの場合、テキストエリアそのままであったり、普段使っているエディタに比べて操作性が格段に落ちるものばかりです。これでは生産性が損なわれてしまうため、結局エディタで書いてコピー&ペーストせざるを得ません。 より使いやすいWebベースのエディタを目指すならVue2 editorをベースに作ってみても良さそうです。名前の通り、Vueを使ったエディタです。 Vue2 editorの使い方 メイン画面です。シンプルですっきりとしたUIです。 日本語も使えます。 リストはなぜか横に並びます。 画像はImgrにアップロードされて、それが挿入されます。 Vue2 editorはVueで作られていますので、Vueを使ったWebアプリケーションへの組み込
Smooth Scrollbar - スムーズなスクロールの制御
Webページは大抵縦長になっています。そしてマウスなどのスクロールを使って下の情報を表示します。つまりスクロールという機能はブラウジングの基本とさえ言えるでしょう。 そんなスクロールを標準のまま使うのではなく、もっと細かく制御できるのがSmooth Scrollbarです。 Smooth Scrollbarの使い方 様々なパラメータを使ってスクロールバーの動きを制御できます。 DOMの中でスクロールを埋め込む際にも制御できます。 Smooth Scrollbarの動きは実際にスクロールをしてみないと分かりづらいので、デモサイトでぜひトライしてみてください。もの凄く動きを軽くすることもできれば、粘度が高い感じにすることもできます。慣性を強くして、ゆっくりと進み続けるというのも面白いです。プラグインによる拡張もできるようです。 Smooth ScrollbarはJavaScript製のオープン
Sharedocs - 社内で使えるQiitaクローン
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 強い組織を作るためにはナレッジの共有が欠かせません。個々人のナレッジに留まっていては同じ経験を繰り返すだけですし、何も培われていきません。問題はどこに書き留めるかです。かつてはWikiもありましたが、慣れないと使いこなせませんでした。 今回紹介するオープンソース・ソフトウェアはSharedocs、プログラマが使い慣れているであろうQiitaクローンです。 Sharedocsの使い方 Sharedocsのトップページです。 ログインしました。カラーリングは違いますが、UIはとてもQiitaに似ています。 新規作成画面です。ここのデザインは結構違います。が、プレビューの機能などはついています。 表示例です。記法はMarkdownが使えます。 ユーザページです。投稿数、ストック数などが確
fallback - JavaScript/スタイルシートを外部CDNからダイナミックに読み込み MOONGIFT
最近はCDNサービスが多数あり、JavaScriptやスタイルシートを外部サイトから読み込むのも当たり前になっています。しかし他サービスとあって、ずっと存在し続けるのかも安定性も若干の不安が残ります。 しかしだからといってローカルにファイルを用意するのも面倒です。そこで使ってみたいのがfallbackです。 fallbackの使い方 fallbackはスタイルシート、JavaScriptファイルをダイナミックにローディングしてくれるライブラリです。使い方は見ての通りで、一つのライブラリに対して複数のURLを指定できます。 // Here we actually invoke Fallback JS to retrieve the following libraries for the page. fallback.load({ // Include your stylesheets, th
grafi.js - JavaScriptで画像加工 MOONGIFT
サーバサイドで画像加工を行う場合、ImageMagickを使うのが基本になるでしょう。しかし先日ImageMagickの中にセキュリティホールがあったり、サーバの負荷を考えると使うのを控えてしまう人もいるのではないでしょうか。 そこで使ってみたいのがgrafi.jsです。JavaScriptで画像加工を行えるライブラリです。 grafi.jsの使い方 元の画像です。 ネガポジ逆転。 暗くしたり。 グレースケールも。 ぼかし。 シャープ加工。 grafi.jsを使えばクライアントサイドで画像加工ができます。元の画像はそのままなので、何度も加工できるのが魅力でもあります。なお、一部の加工（ぼかしなど）は使えないブラウザもあったので注意してください。 grafi.jsはHTML5/JavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。 grafi.js
EmojiOne Area - jQuery製の絵文字ピッカー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 絵文字はここ数年で一気に使われるようになってきました。チャットサービスはもちろん、コメントで使われたり、iOS/Androidのようにキーボードの中で提供されるようにもなっています。コミュニケーションの基本にさえなっていると言えそうです。 そんな絵文字をWeb上で使いやすくするのがEmojiOne Areaです。ぜひ自分のサイトに組み込んでみましょう。 EmojiOne Areaの使い方 デモです。テキストエリア、テキストボックスに絵文字アイコンが表示できます。 右上のアイコンをタップすると一覧が出ますので、ここからアイコンを選択できます。 オートコンプリートもあります。 EmojiOne Areaでは自動補完はしないようにしたり、特定のカテゴリを非表示するようなオプションも指定で
CSSGram - スタイルシートを使ったInstagram風フィルタ
Instagramは相変わらず高い人気で、10代を中心に多くのユーザが日々写真をアップロードしています。そんなInstagramの売りと言えば、写真に対する格好良いフィルタではないでしょうか。 CSSGramはそんなInstagram風のフィルタをWeb上で再現してくれるライブラリになります。CSSレベルとあって、自由に変更も可能なのでWeb上で写真を効果的に見せるのに使えそうです。 CSSGramの使い方 CSSGramで使えるフィルタです。 青系、赤系なども格好良いです。 1977も良いですね。 CSSGramを使えば同じ写真であっても全く違う印象を与えるのではないでしょうか。また、Instagram風のWebサイトを作った際にもその写真の加工法として指定できると効果的ですね。 CSSGramはCSS3製のオープンソース・ソフトウェア（MIT License）です。 CSSGram u
Cropper - スマートフォンにも対応した画像切り抜きライブラリ MOONGIFT
スマートフォンやデジカメで撮影した写真は横長、または縦長です。それに対してWebサービスのプロフィールに使う画像は大抵正方形ではないでしょうか。そんな写真を自動で加工すると顔の一部が削れてしまう可能性があります。 そこでユーザ自身の手で切り抜きしてもらうのが一番です。今回はスマートフォンにも対応したCropperを紹介します。 Cropperの使い方 Cropperのデモ画面です。左側の画像が元画像、切り抜いた時の各サイズの画像が右に並んでいます。 もちろん切り抜き部分のサイズ、位置は自由に変えられます。 クロップした画像。 画像サイズも指定できます。 スマートフォンでも動きます。 ハンドル部分もスムーズにつかめます。 Cropperを使えばユーザに自分の写真をアップしてもらった後、そのまますぐに切り抜き加工を行えるようになります。かつ切り抜いた画像をサーバに送れるので、サーバ側では画像ラ
Scooter - Dropbox社製のデザインフレームワーク
企業でWebサービスを作る際に、決まったデザインフレームワークがあると全体的に統一感が出て、かつデザインに対する悩みが少なくなるのが利点です。その結果、開発がスムーズに進むことでしょう。 今回はその一つ、Scooterを紹介します。作成したのはDropbox社になります。 Scooterの使い方 ScooterはSCSSで作られているので変数やMixinなどが定義されています。実際のデザインについて紹介します。まずはグリッド。 写真と説明。 リスト。 右寄せ。 アラート。 ボタン。 吹き出し付き。 フローティングカード。 フォーム。 アイコン。 こんな感じで文字だけのアイコンも表現できます。 モーダル。 ツールチップ。 ラベル。アイコン付きなのが良い感じ。 塗りつぶしたラベル。 タブ。 カレンダー。 Scooterはデザインはもちろんのこと、カラーリングにもDropboxっぽさが溢れていま
flowchart.js - SVGのフローチャートを生成するJavaScriptライブラリ MOONGIFT
システムやワークフローを分かりやすく説明する際にフローチャートを使うことがあります。特に業務システムなど、多数のシステムが複雑に組み合わさって処理が実行される場合、きちんと可視化されているかどうかで結果が大きく変わる可能性があります。 Excelで仕様書を書いているとExcel上で完結しそうです。しかしこれでは検索性やメンテナンス性がよくありません。そこで仕様書をMarkdownやHTMLで書いているならばflowchart.jsを使ってみましょう。 flowchart.jsの使い方 flowchart.jsのデモです。専用の記述方法に沿って書くことで、右側のようなフローチャートが生成されます。URLがあるところはクリッカブルになっています。 さらにカラーリングの指定もできたり、縦ではなく横に広がっていく形にもできます。 flowchart.jsはSVGで生成しているのがポイントで、元文書
jquery.cb-slideheader.js·スクロールでヘッダーを表示/非表示 MOONGIFT
ちょっと前までヘッダーをスクロールしても上部に残し続けるのが流行っていましたが、最近はさらに最初はヘッダーを大きく表示して、スクロールするとヘッダーサイズを小さくすると言うタイプが多く見られるようになっています。 実装は面倒なイメージがありますが、jquery.cb-slideheader.jsを使えば簡単に実現できます。 jquery.cb-slideheader.jsの使い方 jquery.cb-slideheader.jsにはいくつものメソッドが用意されていますので、それを使うことで多彩な表現が実現します。まずはスクロールするとヘッダーが表示されるもの。 スクロールでヘッダーが変わるもの。 スクロールでヘッダーを非表示に。ただしパララックス風です。 スクロールによってコンテンツを変更するのはパララックスエフェクトをはじめ、最近人気の効果です。jquery.cb-slideheader
Dynamics.js - 物理系アニメーションライブラリ MOONGIFT
アニメーションは何の意味もなく動かしても面白くありません。一回転させたり、ひっくり返ったりと現実世界を投影するような動きは目を引きやすく、表現としても分かりやすいです。 そこで使ってみたいのがDynamics.jsです。物理系の動きを再現するJavaScript/CSSアニメーションライブラリになります。 Dynamics.jsの使い方 Dynamics.jsには多数のパターンで動きが作られています。 スプリングという名前のアニメーションです。 バウンド。 強い重力。 この他にもいくつものパターンでアニメーションが作られています。さらにパラメータを変更することで動きを調整できるようになっています。Dynamics.jsを使ってリアルな物体感を感じさせるアニメーションを実現してください。 Dynamics.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです
cssCharts.js - スタイルシートでグラフを描画 MOONGIFT
HTML5によってWebの表現力は高まっています。特にSVGやCanvasを使えば高度なグラフィックが描けます。ただし使いこなすのはそうそう簡単ではありません。そのため、まだまだスタイルシートの活躍の場はとても多いです。 そこで使ってみたいのがcssCharts.jsです。スタイルシートとJavaScriptを使って作られたグラフライブラリで、簡単に使いこなせるのが大きな利点です。 cssCharts.jsの使い方 cssCharts.jsの描けるグラフです。まずは棒グラフ。 次はドーナッツグラフ。 ドーナッツグラフの2つの値版。 さらに中央を塗りつぶしたバージョン。 次に折れ線グラフ。 塗りつぶしをなくした版。 もっとシンプルに。 そしてポイントも取り除いた版。 最後にパイチャート。 オンマウスでタイトルを表示することもできます。 例えば棒グラフの場合は次のように指定します。 <!--
Honoka - 日本語も綺麗に表示できるBootstrapテーマ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 当たり前ですが、英語圏のソフトウェアは英語が綺麗に表示されるように調整されています。そのため日本語にした時に幅が足りなかったり、そもそもフォントが当たっていなくて汚い表示になったりします。 Webのモックアップなどで多く使われているBootstrapについてもそうです。日本語を綺麗に表示するならBootstrapを日本向けに拡張したHonokaを使いましょう。 Honokaの使い方 Honokaは日本語フォントはもちろんのこと、幅や高さが微調整されています。 デフォルトのBootstrapとの比較です。 デザイン一覧。ナビゲーションバー。 タイポグラフィ。 テーブル。 タブ、パンくず、ページネーションなど。 アラート。 パネルなど。 HonokaはBootstrapと高い互換性があ
wavesurfer.js - HTML5で音楽の波形を表示 MOONGIFT
Web上で音楽を楽しむ環境は整いつつあります。SoundCloudにアップしている人も多いですし、YouTube上にある音楽を聴く人も多いでしょう。そんな音楽メディアに欲しい情報として波形があります。 wavesurfer.jsは音楽ファイルを読み込み、波形を表示してくれるJavaScriptライブラリです。JavaScriptだけで作られているのが特徴になります。 wavesurfer.jsの使い方 例えばこんな感じです。 再生済みの部分は色が濃くなっています。 ドラッグ&ドロップで任意の音楽ファイルを解析できます。 wavesurfer.jsは数MBある音楽ファイルもすぐに解析することができます。そして波形を表示して、そのまま再生ができます。YouTubeのように動画がない場合、音楽メディアの見た目の楽しさとして表示すると良さそうです。サビ部分が一目で分かるのも良さそうです。 wave
TouchstoneJS·ハイブリッドアプリ開発に使いたいUIフレームワーク MOONGIFT
WebブラウザでネイティブライクなUIを作成するフレームワークはデザインのトレンドに合わせて年々変わってきています。テーマで最新のUIに対応できる場合もありますが、HTML5/JavaScript/CSS3の進化も考えると、常にトレンドに乗っておくのが良さそうです。 TouchstoneJSは最新のUIフレームワークで、ハイブリッドアプリを作るのに最適なフレームワークとなっています。ハイブリッドアプリ開発にぜひ使ってください。 TouchstoneJSの使い方 TouchstoneJSはまだベータ版で全機能は提供されていません。なので執筆時点での機能を紹介します。 一覧。グループリストです。 ヘッダーバーの色変更。 検索付きのリスト。 アラートバー。 フッターバー。 シンプルリスト。 詳細表示。 サムネイル付きリスト。 トグル。 フォーム。 パスコード入力。 入力したパスコードが表示できま
Evil Icons – すっきりしたデザインのSVGアイコン集
Web Fontが人気です。フォントを読み込めばかなり昔のブラウザであってもカスタムフォントが利用できます（IEにおいてはIE4から使えます）。難点としては作り手のスキルが必要ということでしょうか。 もう少し手軽に画像ではないアイコンを使いたければSVGを使ってみるのはいかがでしょう。今回はその一つEvil Iconsを紹介します。 Evil Iconsの使い方 Evil IconsはRails/Sinatraそしてnodeと組み合わせて使えるようになっています。その他、Gruntで使うこともできます。Gulpはまもなくのサポートとのことです。SVGはベクターなのでサイズも色も自由に変更できるのが利点ですね。 Evil IconsはSVG製、MIT Licenseのオープンソース・ソフトウェアです。 Evil Icons outpunk/evil-icons
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
