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

Webの記事一覧

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

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

もっと見る

List

  • 2019/06/13

CSS-Only Chat - JavaScriptを使わないWebチャット

技術の凄さを感じるのはどんな時か。一見すると無理と思えるようなことを実現できてしまっている時もその一つです。最近では機械学習を用いて粗い映像を高画質化するプロジェクトもあります。SFと思わんばかりの世界が実現しようとしています。今回紹介するCSS-Only Chatもすごいです。JavaScriptを使わずにリアルタイ...

List

  • 2019/06/12

Automatic App Landing Page - アプリ用Webサイトテンプレート

個人または企業でアプリを作っている人は多いですが、それらのランディングページはちゃんと作っているでしょうか。アプリを作るのに必死で、Webサイトは適当になってしまっているケースは多いようです。それではダウンロードにも結びつきづらいでしょう。今回紹介するAutomatic App Landing Pageはアプリ用のWe...

List

  • 2019/06/12

Tetris - Zig製のテトリス

最近、あらゆるプログラミング言語でテトリスを作る試みが行われいるのでしょうか。かつてはWikiや掲示板が作られていましたが、テトリスもシンプルなルールですし、ゲームとしてのインタフェースの面白さもあります。今回紹介するTetrisはZigというプログラミング言語を使って作られたテトリスです。## Tetrisの使い方画...

List

  • 2019/06/11

Uguu.se - テンポラリファイル共有

ファイルを共有するというのは、何らかのサービスを使っていれば簡単なのですが、繋がっていないもの同士だと非常に面倒です。Apple同士であればAirdropがありますが、異なるOSだとさらに面倒になります。そこで使ってみたいのがUguu.seです。一時的なファイル共有として使えるサービスです。## Uguu.seの使い方...

List

  • 2019/06/10

konstellate - Kubernetesの設定をビジュアル化

Kubernetes(以下k8s)は設定ファイルを記述してアーキテクチャを指定しますが、慣れるまでは設定が抜けてしまったり、うまくリンクできなかったりします。さらに設定が複雑化すると、全体を俯瞰的に確認したいと思うことでしょう。そこで使ってみたいのがkonstellateです。k8sの設定内容をビジュアル化します。##...

List

  • 2019/06/09

drawgon - Web上でドロー

Web上で絵を描こうと思うとCanvasタグを使って行います。そして、そこに描かれた情報は画像としてダウンロード可能です。しかし、ベクターデータとして(SVGとして)欲しい場合もあるでしょう。そこで使ってみたいのがdrawgonです。Web上で使えるドローイングアプリケーションです。## drawgonの使い方最初にサ...

List

  • 2019/06/08

a2hs.js - iOSでもAdd to Home Screen

PWAに注目が集まっていますが、Androidに比べてiOSの対応は今なお微妙です。アプリケーションのようにインストールできるのですが、その手順も分かりづらく、インストールを促すバナーも出せません。これではiOS向けにはなかなか普及しないでしょう。それを若干でも改善できるのがa2hs.jsです。iOS向けにユーザビリテ...

List

  • 2019/06/07

imfunniee - 開発者向けポートフォリオテンプレート

開発者であれば自分のポートフォリオを持つべきです。それは個人のアイデンティティになり、転職時などにも有利に働きます。幸いGitHubのリポジトリはポートフォリオに使えるコンテンツになります。後は自己紹介やブログなどがあれば完璧でしょう。そこで使ってみたいのがimfunnieeです。GitHub Pagesで公開できるポ...

List

  • 2019/06/06

SuppleBox - プロテイン専用の口コミサイト

口コミが重視されるようになって久しいです。中にはなりすましや、ライバル店に対してネガティブな書き込みをするような工作、お金でレビューを買うような行為も見られますが、それでも口コミを重視して購入判断をする一は多いでしょう。今回紹介するSuppleBoxはプロテインに特化した口コミサイトです。プロテイン好きはぜひチェックす...

List

  • 2019/06/05

iru - Markdownをそのまま使うCMS

これまで、MarkdownをベースにWebサイトを作るソフトウェアは多数ありました。その多くはコマンドが用意されており、MarkdownコンテンツをHTMLに変換するものだったと思います。つまり静的サイト向けの使い方でした。今回紹介するiruはMarkdownファイルを読み込んで表示するタイプのWebサイトです。システ...

List

  • 2019/06/05

Hovercraft - Preziのようにページが切り替わるHTMLスライド

プレゼンテーションというと、退屈なスライドが並んでいて、切り替え時にちょっとしたアニメーションが起きる程度と思っているかも知れません。もっと聴衆の目を引くスライドを作ってみたいと思う方はPreziを使っていたりします。しかし、あれはデスクトップで動作するソフトウェアです。Webならもっと公開やシェアも手軽にできるのに…...

List

  • 2019/06/04

Audio GIF - 無茶しおる…アニメーションGIFに音声を埋め込む

アニメーションGIFの良いところは何でしょう。動画とは異なり、同じ場面を繰り返してくれること、音声がないことが挙げられます。制約も多いので、利用場面も異なってきます。しかし、技術の力で乗り越えられる壁もあるのです。それがAudio GIFです。その名の通り、アニメーションGIFの中に音声を詰め込むという無茶なソフトウェ...

List

  • 2019/06/03

hackaru - シンプルな作業時間測定アプリ

集中して仕事をするためには、時間に厳しくなくてはいけません。単位時間のパフォーマンスを上げていくことで、より生産性を高められるようになります。そのためにはまず、現在の時間の使い方を可視化しなければなりません。そのために時間管理ソフトウェアがあります。実行しているアプリケーション単位で厳しく時間測定できるものもありますが...

List

  • 2019/06/02

SwiftWasm - Webブラウザ上でSwiftを実行

WebAssemblyへの注目が集まっており、それ故に様々な試みが行われています。計算処理の高速化、Canvasを書き換えることでゲームに用いたり、JavaScriptを全く書かずにWebアプリケーションも開発できるようになります。そんな中、プログラミング言語をWebブラウザ上で動かそうと言う試みも増えています。今回は...

List

  • 2019/06/02

Fusuma - Markdownを使ったHTMLスライド

HTMLでスライドを作る場合、アニメーションやロゴの配置ではなく、コンテンツに集中して作れます。さらに記法がMarkdownであればスライドを作るのが苦手な人であっても問題ありません。さくさくと作れるでしょう。今回は新しいHTMLスライドのFusumaを紹介します。便利な機能がたくさん詰まっています。## Fusuma...

List

  • 2019/05/30

ken-burns-slideshow - ケン・バーンズ効果を実現できるWebコンポーネント

ケン・バーンズ効果という演出を知っていますか。複数を写真がある時、それを単に差し替えるだけでなく、ズームや左右上下にゆっくりとアニメーションしながら切り替えることで、単なる写真に命を与えると言われています。ケン・バーンズ監督が映画の中で使っていたことでそう呼ばれています。そんなケン・バーンズ効果を手軽に実現できるWeb...

List

  • 2019/05/29

Goodbye geocities.jp - 消失したGeocitiesのデータをWeb Archiveから発掘

懐かしのホームページホスティングサービス、Geocitiesが終了しました。無料スペースのサービスは99〜00年当時数多く存在しており、その中でも最大級だったのがGeocitiesです。その膨大な数のサイトは移転したり、そのままネットの渦に飲み込まれて消えてしまいました。そんな消えてしまったホームページを掘り起こしてく...

55270?type=list&url=https%3a%2f%2fimages.moongift.jp%2f2019%2f05%2fopen-source-medium+zoom-3.9bb82b39ed6f6eecc793a99f01393d86

  • 2019/05/29

Medium Zoom - Medium風に画像をズーム

Mediumは人にとって読みやすい、使いやすいUI/UXにこだわっています。様々な工夫がされており、それははっきりと分かるものもあれば、細かすぎて気付かないものもあるでしょう。しかしそういった細部にこそ神が宿るものです。今回紹介するMedium Zoomは画像のズーム表示をMediumライクに表現してくれるライブラリで...

List

  • 2019/05/27

Transmission - 車のギア変更をビジュアル化

ビジュアル化は理解を助けてくれます。文字だけでは実物が思い浮かばなかったり、具体的な場所が分からないことも、一つの画像や動画があるだけで理解度が全く変わってきます。作成するのはテキストよりも大変ですが、その効果は大きいと言えるでしょう。今回紹介するTransmissionは車のギア変更をビジュアル化してくれるという面白...

List

  • 2019/05/27

Beatnik - 音楽ストリーミングサービスの楽曲リンクを生成

音楽のサブスクリプションサービスが増えています。これらのサービスを優良で使っている場合、好きな音楽を好きなデバイスで聴けるようになります。そうした音楽を紹介したいと思っても、他の人は別なサービスを使っていると面倒です。そこで使ってみたいのがBeatnikです。様々な音楽サービスに対応したリンクを生成してくれます。## ...