Gistfy - GitHub/Gist/BitBucketに対応したコード埋め込みツール MOONGIFT
ちょっとしたコードをシェアするのに便利なのがGistです。外部サイト用に埋め込みコードも生成できるので、ブログ記事のために使っている方も多いでしょう。対してGitHubは埋め込みできず不便です。 そこでGitHubやGistでも、さらにBitBucketまで対応したコード埋め込みサービスGistfyを使ってみましょう。 Gistfyの使い方 実行例です。埋め込める形でコードが表示されます。 表示する行数を指定できます。 カラーテーマの変更も可能です。 シンタックスを別なものにもできます（デフォルトは自動で決定します）。 Gistfyが対応しているのはGitHub、GistそしてBitBucketです。認証不要で使えますが、パブリックなリポジトリでしか使えないので注意してください。カラースタイルを変えたり、シンタックスの変更、表示する行の指定（一部の行だけ表示できます）が可能です。 Gist
DataCamp Light - 自分のサイトで使えるインタラクティブな学習プラットフォーム MOONGIFT
プログラミングはコンピュータさえあればすぐにはじめられます。しかし、環境のセットアップであったり、チュートリアルなどもない状態では最初の一歩を踏み出すのがとても大変です。 そこで使ってみたいのがDataCamp Lightです。自分のWebサイトをインタラクティブな学習プラットフォームにできるソフトウェアです。 DataCamp Lightの使い方 DataCamp Lightはサイト上に埋め込んで使います。 今のところPythonまたはRに対応しているようです。実行すると右側に結果が表示されます。 期待した記述がされているかどうかのチェックもできます。 間違っている場合はどう書くべきかを指導してくれます。 DataCamp Lightを使えばWeb上でプログラミング言語を自己学習できるプラットフォームが作れるでしょう。書籍などを読むだけでない、より自分で書いて結果を実感できる学習環境にな
React Server - Reactの開発をはじめるのに最適なベースを生成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Reactを触りはじめて思うのが、フレームワークのスタンダードが確立されていないということです。React自体はViewなので、それ以外の部分やアプリケーションサーバをどうすべきかといった部分が抜け落ちています。 そうした点で迷っている方はReact Serverを使ってみてはいかがでしょう。React Serverを使えばReactを使った開発環境周りの整備が一気に進むでしょう。 React Serverの使い方 React Serverをインストールした後はyeomenのコマンドで起動します。 yo react-server 後は npm run start でサーバが立ち上がります。 ボタンをクリックすると「！」が増えます。 ファイル構成は次のようになっています。 ベースにな
ReactとAngular2の選択で迷ったときに考えたいこと - Qiita
まえがき 最近社内でLT大会がありまして、Angular2について発表したのですが（正式リリース直前でしたが）、結構内容的には、React vs Angular2みたいな内容になってたので、『（私が）ReactとAngular2の選択で迷ったときに考えたいこと』としてちょっと記事にしてみました。 ※1 この記事はあくまで両者を触ってみた『個人的な感想』になりますのであしからず。 ※2 そして、この記事は2016-09-18の時点での内容になります。 Reactはライブラリ、Angularはフレームワーク Reactが出始めた頃にはよく比較されることの多かったAngularですが、それは両者が似たような時期に盛り上がってきており、それでいてDOM周りの問題解決で謳っている機能がそれぞれちょっとずつちがっていたからかなと思っています。（それぞれDOMの構築とデータバインディングについての機能を
City Generator - Web上に動かせる3D地図を表示
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました JAXAが公開している細かいメッシュでの地球上の高度データを使ってどんなことができるのか。主な目的は災害対策であったり、都市計画を立てる際の基礎データになるのですが、そういった目的で使う人は限られた業界の人たちになるでしょう。 もっと面白い使い方が考えられれば、地図データの活用幅も広がります。今回はその一つ、City Generatorを紹介します。 City Generatorの使い方 表示例です。東京駅周辺の3D地図です。 ライトの位置が変わると影が濃くなったりします。 お台場。海に埋もれてますね。 東京ドーム周辺。マウスでぐりぐり動かせます。 City GeneratorではJAXAのデータを使って3Dモデルとして都市を描いています。データは実際のものなので、再現される都市も
ReDoc - Swagger/OASを使ったWeb APIドキュメントジェネレータ MOONGIFT
開発者向けドキュメントの基本と言えるのがAPIドキュメントです。ライブラリだけでなく、最近ではWeb API向けのドキュメントも増えてきました。そのデファクトフォーマットになろうとしているのがSwagger/Open API Specification(OAS)です。 今回紹介するReDocはそんなSwagger/OASをベースにAPIドキュメントを生成するソフトウェアです。 ReDocの使い方 デモです。3カラム構成になっています。一番右側にJSON構造が書かれています。 スキーマが見やすくなっており、折りたたむこともできます。 右側のレスポンスについても折りたためますので見たいところだけをチェックできます。 SwaggerにはSwagger UIというビューワーがありますが、ReDocも負けず劣らず見やすいドキュメントではないでしょうか。公開されているJSONで自由に試せますので（CO
lightgallery.js - フル機能が揃った写真/動画ギャラリー MOONGIFT
写真や動画はコンテンツの質はもちろんのことながら、その見せ方も大事になります。ただ一覧に貼り付けるだけでは魅力に欠けるでしょう。そのためのギャラリーソフトウェアも幾つか存在します。 今回は写真と動画コンテンツに対応したギャラリーライブラリ、lightgallery.jsを紹介します。 lightgallery.jsの使い方 一覧ページです。四角く、整然と並んでいます。 写真詳細。下にサムネイルが並びます。 動画にも対応します。HTML5動画の他、YouTubeやVimeoが使えます。 写真を切り替える際のエフェクトも多数用意されています。 lightgallery.jsはjQueryなどの依存性がなく、十分な機能が用意されています。レスポンシブデザイン対応、プラグインによる拡張、マウスドラッグサポート、ソーシャルメディアでの共有サポートなど多数の機能が揃っています。 lightgaller
Cleave.js - Web上での入力にフォーマットを指定 MOONGIFT
HTML5のinput typeはdateやtimeなどの指定によって入力できる情報が変わるようになり、UXが改善されています。しかしさらに細かい入力制御を行う場合にはJavaScriptに頼らないといけません。 よりユーザビリティの高い入力インタフェースを実現したいならばCleave.jsを使ってみるのはいかがでしょう。 Cleave.jsの使い方 よくあるクレジットカードの入力フォームです。 桁数の制御はもちろん、カードの種別も出るようになっています。 電話番号。日本の場合は特に制御はなさそうですが、数字のみ入力できます。 日付の入力です。スラッシュが自動的に入力されます。 3桁ごとにカンマが入る入力です。 指定した文字ごとにスペースを空けたり、指定した文字（ダッシュなど）を追加できます。 郵便番号や電話番号の入力でダッシュが入っているからエラーなどという酷いUIのサイトはたくさんあり
Keen-UI - マテリアルデザインのUIコンポーネント集
デザインは徐々にシンプルな方向に進んでいます。フラットであったり、マテリアルデザインなどがそうです。しかしシンプルであるが故に空間の取り方であったり、マテリアルデザインならではのアニメーションなど実装が難しい部分も増えています。 今回はそんなマテリアルデザインに合わせた各種UIコンポーネントを提供しているKeen-UIを紹介します。 Keen-UIの使い方 スクリーンショットを多めに紹介します。まずはアラート。 入力補完。 アイコン付きの入力補完。 ボタン。 チェックボックス。 折りたたみ。 確認ダイアログ。 フローティングのボタン。 アイコンボタン。 アイコン。 メニュー。 モーダル。 ポップオーバー。 ローディング。 ラジオボタン。 ラジオグループ。 レーティング。 Keen-UIはUIコンポーネントなので、他のデザインフレームワークと組み合わせて使うのが基本になります。デザインに統一
Kajero - JavaScriptがその場で実行できるドキュメントシステム
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownを使うようになって、逆にその物足りなさを感じるのではないでしょうか。色が使えなかったり、装飾も限られたものしか使えません。その制限がちょうど良いのかも知れませんが、もっと高度なドキュメントにしたいという要望もあります。 しかしプログラマーであるならば制限されているそのものを使い続けるのではなく、自分で拡張だってできるはずです。今回はインタラクティブなドキュメントを実現するKajeroを紹介します。 Kajeroの使い方 こちらがドキュメントのページです。通常のMarkdown記法が使えます。 こちらが特殊な部分。コードが書いてあります。 右上の再生ボタンをクリックするとJavaScriptが実行されて結果が表示されます。 複数ある場合、変数が共有されます。 実行時間
JavaScript中級TIPS - Qiita
文字列リテラル HTMLを含む文字列を生成する際に便利なため、囲む時はシングルクォート'hoge'がよい セミコロン 末尾にセミコロンをつけなくても解釈してくれるが、バグを生む可能性があるのでセミコロンはつけるように習慣化する ES6のclass記法のメソッド末尾にはセミコロン不要 同値比較 基本的に===をつかう。==だと寛容過ぎる解釈のため、バグを生むことがある。 短絡評価 hogeFuncの引数にtrue相当の値が入ってきた場合、 ||の右側は読まれない。 hogeFuncの引数にfalse相当の値が入ってきた場合、 （false, null, undefined, NaN, "", 0） ||の右側を読みにいく。 function hogeFunc(e){ e || console.log('piyo'); } hogeFunc(1); // 何も出力されない。もし短絡評価がなけれ
electron-viz - GUIのGraphvizチャートエディタ&ビューワー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Graphvizを使うとノードを使ったフローチャート、クラス図をはじめ様々なチャートを画像にすることができます。ただし最初に環境を整えるのが手間であったり、dotファイルを書いた後にコマンドで変換しなければなりません。 そんな手間暇を軽減してくれるのがelectron-vizです。Electronで開発されており、GUIでGraphvizを編集できます。 electron-vizの使い方 electron-vizのメイン画面です。左側がエディタ、右側にチャートが描かれます。 例えばこのような図を描きました。オートプレビューが有効になっていれば編集した直後にチャートが描かれます。チャートの内容はGraphviz チュートリアルよりお借りしました。 二つに分かれるサンプル。 さらに複雑
Lever OS - サーバレス×マイクロサービスなWebアプリ実行環境 MOONGIFT
マイクロサービス、サーバレスアーキテクチャといったキーワードが盛んに言われるようになっています。確かにサーバレスアーキテクチャは小さなサービスを作るのに都合がよく、それらを合わせるとマイクロサービスとして成り立つかも知れません。 そんな2つを合わせて作られているのがLever OSです。まだ開発途中とのことですが、大きな可能性を秘めていそうです。 Lever OSの使い方 Lever OS自体はDockerでデプロイできます。起動したら例えばフォルダを作成し、その中にserver.jsとして次のようなコードを書きます。 module.exports.sayHello = function (name, callback) { callback(null, "Hello, " + name + "!"); }; そして lever.json というファイルを作成します。 { "name":
css-keyframer.js - CSS3のスタイル設定を使ったキーフレームアニメーション MOONGIFT
アニメーションは一コマ一コマ指定しながら作成することもできますが、作成に時間がかかります。それに対してキーフレームを指定して、そこへの変化（または移動）を指定する方式はコンピュータ側でアニメーションを補完してくれる分、効率的にアニメーションが作成できます。 今回紹介するcss-keyframer.jsはそんなキーフレームアニメーションをCSSのように指定できるソフトウェアです。 css-keyframer.jsの使い方 デモです。JavaScriptの中にCSS風にアニメーションを指定しています。複数のエフェクトが指定できます。 実際のアニメーションです。形を変えつつ、回転しつつ、さらに色が変わります。 css-keyframer.jsではCSS3で指定できるスタイル設定を、時間を変化させながら適用できます。例えば四角がいきなり角丸になるのではなく、徐々に変化していくことでユーザの目を引く
Slate - カスタマイズできるWeb用のリッチテキストエディタ MOONGIFT
HTMLのテキストエリアのUIが貧弱なのは有名な話で、文字入力が多いサービスにおいて素のテキストエディタをそのまま提供することはなくなっています。かといってかつてのWYSIWYGエディタのように機能がてんこ盛りなのも見かけません。 もっとスマートに、もっと使いやすい形で入力してもらうべきです。今回はWeb上にリッチなエディタ機能を提供するSlateを紹介します。 Slateの使い方 Slateの画面です。ツールバーは必要最低限に提供されています。 Markdownがサポート可能で、記法をリアルタイムに変換します。 ポップオーバーによるコンテンツの装飾機能。 リンクはダイアログで入力できます。 画像の差し込み。 コードのハイライトも。 Slateはフレームワークであり、カスタマイズしやすい形になっています。自分のサイトに必要な機能だけをピックアップして実装するのが良いでしょう。なお、執筆時点
mobile-videoplayer - iOSでも自動再生できる動画プレイヤー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました スマートフォン（特にiOS）は動画を自動再生してくれないという問題があります。また、動画再生時はフルスクリーンになってしまったり、JavaScriptから操作できないといった問題もあります。 それらを解決してくれるかも知れないのがmobile-videoplayerです。音は出ないですが、上記問題は解決できます。 mobile-videoplayerの使い方 動画の読み込み中…。この辺りでネタバレしているかも？ 再生開始しました。スムーズです。 さらに面白いのはスクロールして動画が表示されている時だけ再生してくれる機能です。 見えなくなると再生が停止します。 実際に試しているところです。停止しているのが分かるでしょうか。 種明かしをすると、これは実際には動画ではなくJPEGをつなぎ
video-resize - videoタグの大きさをダイナミックに変更
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5で追加されたタグの中で注目度が高いのはvideoタグではないでしょうか。動画は人気コンテンツの一つですし、Flashが終わる中とあってvideoタグに期待がかかっています。 しかしそんなvideoタグはあまり柔軟にできていません。例えばリサイズですが、標準では問題があるのでvideo-resizeを使ってカバーしましょう。 video-resizeの使い方 video-resizeを使っているところです。 大きいときの表示。 高さを変えた時の表示。 video-resizeが便利なのはウィンドウの高さの変化にも追従してくれることです。レスポンシブは幅の変化に合わせますが、video-resizeは高さにも関係してきます。そして、なるべく全体が見られるような状態を維持してく
GitHub Calendar - GitHubのアクティビティグラフを任意のサイトに埋め込み表示 MOONGIFT
GitHubでの活動はオープンソース・ソフトウェア開発者としてのアクティビティとも言えます。会社でGitHubを使っていれば緑の濃い部分ばかりになるかも知れませんが、さらに休日もちゃんと埋めようと活動している人もいるでしょう。 そんな方にお勧めなのがGitHub Calendarです。GitHubのアクティビティグラフを任意のサイトに埋め込めます。 GitHub Calendarの使い方 GitHub Calendarの使い方です。専用のJavaScript、スタイルシートファイルを読み込みます。 <!-- Prepare a container for your calendar. --> <script src="https://cdn.rawgit.com/IonicaBizau/github-calendar/gh-pages/dist/github-calendar.min.js
Weex - アリババ製のモバイルUIフレームワーク
スマートフォン用にWebサイトであったり、ハイブリッドアプリを提供する際には専門のUIフレームワークが欠かせません。デスクトップWebブラウザ向けとは異なるUI/UXが求められるためです。しかしそういった実装は簡単ではありません。 そこでUIフレームワークが重宝します。今回はアリババ社が作ったWeexを紹介します。 Weexの使い方 Weexでは多くのショーケースが登録されています。 マインスイーパのようなゲーム、計算機、さらに各種アニメーションもサポートされています。一般的なハイブリッドアプリはもちろん、ユーティリティ的なツールも作れそうです。 WeexではJavaScriptやHTMLを一つにまとめたtemplateと呼ばれる単位で開発を行います。Webコンポーネント的な考え方なのかも知れません。その中でアニメーションを実行したり、ページ切り替えを行うといった仕組みです。 Weexはn
Pica - Canvasよりも高品質、かつ高速な画像リサイズライブラリ MOONGIFT
HTML5のCanvasとJavaScriptを使うことによって画像をクライアントサイドで加工できるようになりました。特に多いのが縮小に関するニーズです。スマートフォンで撮影した画像はサイズが大きいので、転送にかかる時間や帯域の問題があります。そこで事前に縮小するのです。 しかし縮小した時の画像の品質はブラウザに依存してしまいます。それを防ぎ、より高品質にリサイズできるのがPicaです。 Picaの使い方 Picaの例です。細かくリサイズ時の設定ができます。 任意の画像で試せます。 独自の縮小アルゴリズムによって、高速かつ高品質なリサイズが実現しています。処理はWebGLとWebWorkerを利用について指定できます。Canvasで単純に縮小すると潰れてしまったり、シャギーが目立つような部分もPicaを使うと滑らかに縮小されているのが分かるはずです。 PicaはHTML5/JavaScri
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
