ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Webの記事一覧

プレミアムユーザー限定記事

MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから

もっと見る

List

  • 2019/12/06

Get Together - Meetup.comに似たイベント管理

Meetup.comはコミュニティ管理サービスとして有名ですが、その有料化施策や親会社であるWeの問題もあって利用者場慣れが続いています。離れる先として選ばれるのはオープンソースのコミュニティ管理サービスです。今回紹介するGet Togetherもそんな脱出先の一つです。UIもMeetup.comに似ています。## G...

List

  • 2019/12/05

Openki - 学ぼう、教えよう

開発者では昔から教え、教えられる文化があります。一つの技術を深く探求することも、新しい技術を学ぶこともできます。その文化によってオープンソースやコミュニティ文化が成り立っているといえるでしょう。今回紹介するOpenkiはそんな教え、教えられる人たちのためのサービスです。## Openkiの使い方基本は学びたいことを探す...

List

  • 2019/12/01

Quiet.js - 音を使ってデータを送受信

コンピュータから別なコンピュータに情報を伝える際には何か使うでしょうか。物理(USBメモリなど)とネットワークでいえば、最近はネットワーク利用が多いでしょう。そのネットワークにはインターネット、LAN、Bluetoothなど多彩な選択肢があります。今回紹介するQuiet.jsは物理でもネットワークもありません。なんと音...

List

  • 2019/12/01

lite-youtube - YouTube動画の軽量埋め込み表示

YouTubeの動画埋め込み表示機能は便利で使っている人も多いかと思います。しかし、あの埋め込み表示は動作が重たく、あまり大量に埋め込むとWebブラウザの負荷が高くなります。そこで使いたいのがlite-youtubeです。標準のツールに比べて圧倒的に軽快に動作します。## lite-youtubeの使い方lite-yo...

List

  • 2019/11/29

PureCSS Lace - CSSだけで絵画のような表現を実現

CSS3を活用すれば高い表現力が実現できます。イラストを描いたりすることだってできます。まるでドローであったり、SVGのような使い方が可能です。もちろん厳密な計算が必要です。そんなCSS3の作品例としてPureCSS Laceを紹介します。まるで絵画のようなCSS作品です。## PureCSS Laceの使い方こちらが...

List

  • 2019/11/27

Izmir - 画像にマウスカーソルを当てると情報を表示

リンクがある画像の上にマウスを載せた時に情報を追加表示できると、ユーザに見てもらえる可能性が高くなります。その際にちょっとしたアニメーションができれば、より見た目のインパクトが大きくなることでしょう。今回紹介するIzmirはそのためのライブラリです。ユーザのブラウジングがより楽しいものになるでしょう。## Izmirの...

List

  • 2019/11/27

Paged.js - Webページを電子書籍風に表示するCSS Paged MediaのPolyfill

Webページでテキストコンテンツを書籍のように楽しめるようにする、そのための仕様がCSS Paged Mediaです。まだ仕様が固まっていませんが、標準化されればコンテンツの楽しみ方がまた変わってくるでしょう。いち早くCSS Paged Mediaを体験したい方はPaged.jsを使ってみましょう。## Paged.j...

List

  • 2019/11/26

Fake Operating System - OS風機能を提供するWebコンポーネント

Webコンポーネントを使うことで、限られた機能をHTMLのタグ一つで使えるようになります。いわばプラグイン的な使い方であったり、UIコンポーネントとしてまとまった機能を手軽に利用できます。多くのWebコンポーネントはごく小さな機能なのですが、今回のFake Operating SystemはWebコンポーネントながら、...

List

  • 2019/11/26

DevShop - カンバンシステムを学べるゲーム

プロジェクト管理においてカンバンがよく使われるようになっています。各タスクに応じて人がアサインされ、こなしていきます。完了するとタスクが右側に移動していき、最終的にタスクが消えて終わります。そんなカンバンをゲーム形式で体験できるのがDevShopです。プロジェクト管理をゲーム風にシミュレーションできます。## DevS...

List

  • 2019/11/23

Fractal Fantasy - WebGLを使った芸術的表現

Webブラウザの表現力は年々増しています。特にCanvasやWebGLによって、表現できる幅が大きく広がりました。使いこなすのは簡単ではありませんが、これまでのWebとは一線を画す表現が可能になります。今回紹介するFractal FantasyはそんなWebGLを使った多彩な表現を集めたソフトウェアです。極めればここま...

List

  • 2019/11/23

Google Calendar event link generator - Googleカレンダーに予定を登録するリンクを生成

Googleカレンダーを自分のスケジュール管理に使っている人は多いかと思います。そして、Webサービス提供側としても日程情報が決まったら、それをGoogleカレンダーに登録するリンクを表示したいと思うことでしょう。今回紹介するGoogle Calendar event link generatorはまさにその目的にぴっ...

List

  • 2019/11/22

MEGAMOJI - Slack用のアニメーションする絵文字を作成

Slackでは絵文字をリアクションやメッセージに含めることができます。そして、それらの絵文字はカスタマイズが可能で、自作した絵文字をアップロードしている人も多いでしょう。今回紹介するMEGAMOJIはSlack用の絵文字を簡単に自作できるWebアプリケーションです。## MEGAMOJIの使い方テキスト、または画像をベ...

List

  • 2019/11/21

aimAndShoot - 学習するタンクゲーム

AIや機械学習によって、様々なゲームがコンピュータの手に落ちています。最近では麻雀でさえ強力なプレイヤーが登場してきました。人の思考という揺らぎさえも凌駕するAIの存在は怖いものがあります。そんな中注目したいのがaimAndShootです。タンクゲームのようになっていますが、ニューロベースの進化をする仕組みが組み込まれ...

List

  • 2019/11/21

Listly - あなたのリストを一カ所に

普段の生活の多くはリストで管理されます。Todoはもちろん、プロジェクトにおけるタスク管理、買い物メモなどリストで管理して、それを消し込んでいく作業がなんと多いことでしょう。そこで紹介したいのがListlyです。何でもリストとして登録できるWebアプリケーションです。## Listlyの使い方最初の画面です。まだ何もあ...

List

  • 2019/11/20

System Font CSS - OSネイティブのフォントを利用するCSS設定

CSSでOS標準のフォントを使いたいときには `system-ui` という指定を行います。ただし古いWebブラウザで使えなかったり、解釈においてまだ課題があるようです。各OSともフォントにはこだわりを持っているはずで、その標準フォントはOSにマッチして表示されるはずです。そこで使ってみたいのがSystem Font ...

List

  • 2019/11/20

Adventar - アドベントカレンダーシステム

11月になって、アドベントカレンダーの話が出てきました。日本でのアドベントカレンダーシステムとしてはQiitaとAdventarが知られています(他の国で同じような試みをみたことがないですが)。Qiitaではプログラミングに関係するものが多いように感じます。もう少し広い話題も許容するならばAdventarの方が良いでし...

List

  • 2019/11/19

GitHub name Alias Chrome Extension - GitHubのユーザ名にエイリアスを追加してサジェストを使いやすく

ユーザ名と表示名が一致していないために、メンションを送る相手が分からないことが良くあります。アイコンで見分けができれば良いですが、アニメアイコンやデフォルトのアイコンだったりすると探すのも大変です。GitHubのPRやIssueなどでそう感じたことがある人はGitHub name Alias Chrome Extens...

List

  • 2019/11/18

Alf.io - オープンソースのチケット販売システム

チケット販売システムとしてよく知られているのはti.toやPeatixなどです。便利なサービスなのですが、手数料が高く感じたり、多言語対応していないと言った問題があります。筆者の運営するDevRelCon Tokyo

List

  • 2019/11/18

Webtest.app - アドブロックの有無でサイトの表示速度をチェック

アドブロックを入れることでWebページ表示が高速化されることはよく知られていますが、どれくらい速くなったのか計測している人は少ないでしょう。何となく体感として速くなっている程度の認識かと思います。そこで使ってみたいのがWebtest.appです。Webサイトごとに広告を表示した場合としなかった場合の比較ができます。##...

List

  • 2019/11/17

Mobile First Animation in React - React製のスマートフォンアプリ風UXコンポーネント

Webがどんどんネイティブアプリに近い体験を提供できるようになっています。WebブラウザのAPIもそうですが、アニメーションの高速化によって、スマートフォンアプリのようなUXも実現できます。今回紹介するMobile First Animation in ReactはモバイルWeb向けにアニメーションを提供するReact...