Webの記事一覧
Prism - Rubyが使えるWebフロントエンドフレームワーク
Webブラウザで唯一実行が保障されているプログラミング言語はJavaScriptです。しかし規模の大きなシステムを書きたがらなかったり、サーバサイドは別な言語を使っているケースもあります。そこで今回はRubyでWebアプリケーションが書けるPrismを紹介します。## Prismの使い方デモです。!
Party Bingo! - Webブラウザでビンゴを楽しもう
ビンゴ大会などで、数字をランダムに表示したいと思うことはないでしょうか。ビンゴに限らず、参加者の中から当選者を決めたいという時もあるでしょう。それを画面上に大きく表示すれば、会場は盛り上がるはずです。今回紹介するParty Bingo!は名前の通り、ビンゴを実現するためのWebアプリケーションになります。## Part...
Spacekit - 太陽系の動きを3Dで表現
宇宙に憧れる人は大勢います。宇宙を知れば知るほど、自分の存在が小さなものだと思い知ります。また、地球以外には移住もできず、まだ月にしか足を踏み入れていない現状が未来を感じさせます。そんな宇宙の様子を3Dで表現するのがSpacekitです。## Spacekitの使い方各惑星は線の上を動きます。!
Responsive Viewer - レスポンシブWebデザインをまとめて確認
レスポンシブなWebデザインが当たり前になっており、その表示確認が大変になっています。Webブラウザの幅を変えたり、スマートフォンやタブレットでの表示を確認したりしている方は多いでしょう。そうした手間を減らせそうなのがResponsive Viewerです。一気に複数デバイスでの表示を確認できます。## Respons...
Uguu - 24時間で消えるテンポラリファイルアップローダー
Snapchatであったり、Instagramなどには投稿した情報を一定時間で消す機能があります。人に見せたいけれど、残したくはない、そんな情報は意外と多いのでしょう。ファイルを受け渡す場合も恒久的に残ってしまうのは問題、という場合もあります。そんな時に使えるのがUguuです。あくまでもテンポラリ、24時間で消えるファ...
YouTransfer.io - シンプルで簡単なファイルアップローダー
ファイルを相手に送る際にどんな手段を使っていますか。チャット、メール、AirDropなど多彩な方法がありますが、アップローダー経由というのがよくあるものになるでしょう。今回紹介するYouTransfer.ioは自分で立てられるシンプルなアップローダーです。## YouTransfer.ioの使い方メイン画面です。ここに...
Netdisco - ネットワーク/ネットワーク機器管理システム
社内外のネットワーク機器をどうやって管理していますか。ExcelやGoogleスプレッドシートにまとめているという方は多いのではないでしょうか。しかし機器によって必要な情報が異なるので、まとめて管理するのは容易ではありません。そこで使ってみたいのがNetdiscoです。自動的にデータ収集もこなしてくれるネットワーク機器...
Kung Fu Chess - ターン制を止めたチェス
すでに慣れたゲームも、本の少しルールを変えるだけで遊び方が大幅に変わる可能性があります。協力プレイで遊ぶはずのゲームで、お互いに邪魔しあった方が盛り上がるのはその典型といえるでしょう。今回紹介するKung Fu Chessはチェスゲームですが、ターン制という部分を破壊したゲームとなっています。## Kung Fu Ch...
PWA asset generator - PWA用のアイコン/スプラッシュスクリーン用画像を一気に生成
PWA（Progressive Web Apps）は今後のWebを担う大事な技術になっています。多数ある技術を合わせたものなので、すべてを実装するのは難しいですが、逆に一部からでもはじめられるのがメリットです。そんなPWAでアプリとしてインストールする機能に注目が集まっていますが、面倒なのが多数のアイコンを作成しなけれ...
Painterro - Webブラウザで簡易画像編集
画像のちょっとした加工でPhotoshopを立ち上げたり、専門のソフトウェアを購入したりするのは嫌だと思っている方は多いはず。最近では些細な修正であればWebベースでも行えるようになっています。今回紹介するPainterroはWebベースの画像編集ソフトウェアです。スクリーンショットにちょっとした注記を入れる程度であれ...
drawthe.net - Visioに頼らず綺麗なネットワーク構成図を手に入れる
開発者であれなネットワーク構成図を書く機会があるかと思います。そんな時、ドローツールを使うとメンテナンスが面倒だったり、変更時の差分確認もできず、徐々に運用が煩雑になっていきます。そこで使ってみたいのがdrawthe.netです。テキストから詳細なネットワーク構成を生成してくれるドローツールです。## drawthe....
Get Together - Meetup.comに似たイベント管理
Meetup.comはコミュニティ管理サービスとして有名ですが、その有料化施策や親会社であるWeの問題もあって利用者場慣れが続いています。離れる先として選ばれるのはオープンソースのコミュニティ管理サービスです。今回紹介するGet Togetherもそんな脱出先の一つです。UIもMeetup.comに似ています。## G...
Openki - 学ぼう、教えよう
開発者では昔から教え、教えられる文化があります。一つの技術を深く探求することも、新しい技術を学ぶこともできます。その文化によってオープンソースやコミュニティ文化が成り立っているといえるでしょう。今回紹介するOpenkiはそんな教え、教えられる人たちのためのサービスです。## Openkiの使い方基本は学びたいことを探す...
Quiet.js - 音を使ってデータを送受信
コンピュータから別なコンピュータに情報を伝える際には何か使うでしょうか。物理（USBメモリなど）とネットワークでいえば、最近はネットワーク利用が多いでしょう。そのネットワークにはインターネット、LAN、Bluetoothなど多彩な選択肢があります。今回紹介するQuiet.jsは物理でもネットワークもありません。なんと音...
lite-youtube - YouTube動画の軽量埋め込み表示
YouTubeの動画埋め込み表示機能は便利で使っている人も多いかと思います。しかし、あの埋め込み表示は動作が重たく、あまり大量に埋め込むとWebブラウザの負荷が高くなります。そこで使いたいのがlite-youtubeです。標準のツールに比べて圧倒的に軽快に動作します。## lite-youtubeの使い方lite-yo...
PureCSS Lace - CSSだけで絵画のような表現を実現
CSS3を活用すれば高い表現力が実現できます。イラストを描いたりすることだってできます。まるでドローであったり、SVGのような使い方が可能です。もちろん厳密な計算が必要です。そんなCSS3の作品例としてPureCSS Laceを紹介します。まるで絵画のようなCSS作品です。## PureCSS Laceの使い方こちらが...
Izmir - 画像にマウスカーソルを当てると情報を表示
リンクがある画像の上にマウスを載せた時に情報を追加表示できると、ユーザに見てもらえる可能性が高くなります。その際にちょっとしたアニメーションができれば、より見た目のインパクトが大きくなることでしょう。今回紹介するIzmirはそのためのライブラリです。ユーザのブラウジングがより楽しいものになるでしょう。## Izmirの...
Paged.js - Webページを電子書籍風に表示するCSS Paged MediaのPolyfill
Webページでテキストコンテンツを書籍のように楽しめるようにする、そのための仕様がCSS Paged Mediaです。まだ仕様が固まっていませんが、標準化されればコンテンツの楽しみ方がまた変わってくるでしょう。いち早くCSS Paged Mediaを体験したい方はPaged.jsを使ってみましょう。## Paged.j...
Fake Operating System - OS風機能を提供するWebコンポーネント
Webコンポーネントを使うことで、限られた機能をHTMLのタグ一つで使えるようになります。いわばプラグイン的な使い方であったり、UIコンポーネントとしてまとまった機能を手軽に利用できます。多くのWebコンポーネントはごく小さな機能なのですが、今回のFake Operating SystemはWebコンポーネントながら、...
DevShop - カンバンシステムを学べるゲーム
プロジェクト管理においてカンバンがよく使われるようになっています。各タスクに応じて人がアサインされ、こなしていきます。完了するとタスクが右側に移動していき、最終的にタスクが消えて終わります。そんなカンバンをゲーム形式で体験できるのがDevShopです。プロジェクト管理をゲーム風にシミュレーションできます。## DevS...