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

Webの記事一覧

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

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

もっと見る

List

  • 2019/05/25

Photonix - 機械学習を用いた写真管理

スマートフォンやデジカメで撮影する多くの写真をどうやって管理しているでしょうか。Webサービスを使ってもいいですが、永続性という意味において疑問符が付きます。突然サービス終了すると、そのデータを抽出するのも一苦労です。そこで自分で写真を管理しようと思うのですが、良いソフトウェアが見つからないかも知れません。そこで使って...

List

  • 2019/05/24

color-image-app - 色の持つイメージから新しいカラーリングを生成

色を決めるのは大変です。そのため、様々な補助ツールが存在します。写真からカラーパレットを抽出したり、有名なWebサービスと同じカラーリングを提示してくれるものなど様々です。それらを駆使してなお、良い色が決められないという人は多いでしょう。そこで使ってみて欲しいのがcolor-image-appです。色を表現から生成しま...

List

  • 2019/05/24

All Contributors - プロジェクト協力者をたたえよう

オープンソースで大事なのは協力者です。コードを書いてくれる人だけでなく、ドキュメントやサポート、デザインなど様々な人たちが関わってプロジェクトは成り立っています。彼らの活躍なくしてオープンソース・ソフトウェアは成り立ちません。そんな協力者たちを可視化し、たたえるためのソフトウェアがAll Contributorsです。...

List

  • 2019/05/23

IsometricSass - CSSだけで実現する3Dライブラリ

Web上で3Dを描くのは大変です。多くの場合、CanvasであったりWebGLを使いますが、そのためのライブラリを利用しなければなりません。覚えることもたくさんあり、ちょっとした表示を行うのには不便です。そこで使ってみたいのがIsometricSassです。Sassライブラリとなっており、CSSだけで3D表現を実現でき...

List

  • 2019/05/23

FullScreen Slider - アニメーションしながらコンテンツを切り替え

SPAなサイトではページ遷移がない分、コンテンツを切り替える時のアニメーションに気を配らないといけません。そうしないとコンテンツの変化が平凡になり、印象が薄れてしまいます。スムーズなスクロールはよくある手法です。今回紹介するFullScreen Sliderもそんなスクロール用ライブラリです。表示範囲全体をスライドさせ...

List

  • 2019/05/22

tetris - 遊びすぎに注意。Webブラウザベースのテトリス

Webブラウザ上で動くゲームは危険です。ダウンロードしたり、インストールする手間もなく、すぐに遊べてしまいます。普段ずっと使っているWebブラウザなので、常に立ち上がっており、いつだって遊べてしまうでしょう。今回紹介するtetrisはWebブラウザ上で動くテトリスです。これはとても危険な存在と言えるでしょう。## te...

List

  • 2019/05/22

Webring Starter Kit - 懐かしのウェブリングを現代に蘇らせる

かつてインターネットにはウェブリングという仕組みがありました。まだまだWebサイトが少なかった頃、そして検索エンジンもそれほど便利ではなかった頃に、趣味を同じくするサイト同士で巡回してもらうための仕組みです。相互リンク的なもののグループ版とも言えます。そんなウェブリングを現代に復活させたのがWebring Starte...

List

  • 2019/05/21

AreaMap - 日本/世界のカラム地図

情報の表示として、リストを使った一覧が最もよく使われますが、縦長になってしまうのが難点です。横幅がそれほど必要でない場合、タイル表示にするのも一案です。しかしタイル表示の場合、その並べ方に注意しないとどこにあるのか分かりづらくなります。今回紹介するAreaMapはその一案として面白そうなソフトウェアです。日本や世界の各...

List

  • 2019/05/21

bento-starter - PWAを学ぶ、実装するのに参考にしたいスターターキット

PWA(Progressive Web Apps)というキーワードに注目が集まっていますが、実際のところ何からはじめれば良いのか分からない人は多いのではないでしょうか。PWAは固有の技術を指し示すものではないので、特に分かりづらいでしょう。そこで参考にしたいのがbento-starterです。PWAとは何か、を学ぶのに...

List

  • 2019/05/20

Uix Kit - 120を超えるコンポーネントが用意されたBootstrap互換のUIキット

Webデザインテンプレートを用いることで、素敵なWebサイトを簡単に構築できます。しかし、このテンプレート作成者の想定範囲内の使い方であれば問題ないのですが、ちょっとしたカスタマイズにも対応しておらず、一から探し直すなんてこともよくあります。そういった点においてBootstrapの汎用性は高く、利用者も多いのです。しか...

List

  • 2019/05/19

JS Cloudimage 360 View - 自由に360度させられる商品ビューワー

正面からの商品画像だけで購入を決めるのは難しい製品は多数あります。左右や後ろからの写真を見てはじめて自分の納得いくものかどうか判断するでしょう。しかしそのために動画を見るのは面倒です。今回紹介するJS Cloudimage 360 Viewは様々な角度から撮影した商品画像を使って360度回転できるウィジェットを生成しま...

List

  • 2019/05/19

leaderboard-app - プロジェクトへの貢献度を可視化する

プロジェクトへの貢献度で評価が分かれると言った場合、どのように貢献度を見れば良いでしょうか。開発者であればIssueへの対応具合によって推し量ることができます。プロジェクトをIssueを使ったチケット制にすることで、プロジェクトへ貢献していると自然とIssueへの投稿量が増えていくものです。今回紹介するleaderbo...

List

  • 2019/05/18

ローカルファイルリンク有効化 - Google Chromeからローカルファイルへアクセス

Webブラウザはユーザの安全性を第一に考えて作られています。インターネット上には悪意をもった人たちがたくさんおり、Webブラウザからアクセスしただけで被害に遭うのは問題があります。しかし、安全性を考慮しすぎると利便性が失われます。Google Chromeではデフォルトでは file:// は使えません。これはローカル...

List

  • 2019/05/16

Remix Icon - 小さめな表示にぴったりなSVGアイコン

アイコンはWebサイトのデザイン、特徴によって雰囲気に合わせて選ばなければなりません。そのため、一つのアイコンセットを知っていれば良いのではなく、様々なものを見ておくと良いでしょう。フォントと変わらない存在です。そんなアイコンセットとしてRemix Iconを紹介します。小さめのアイコンで、控えめなデザインが特徴です。...

List

  • 2019/05/15

Mongoku - クールなUIのMongoDB管理

MongoDBはNoSQL、ドキュメント型データベースとして注目を集めました。位置情報を扱うのに便利なデータベースでしたが、現在はMySQLやPostgreSQLも扱えるようになり、絶対にMongoDBでないといけない場面は減っているかも知れません。とはいえ個人的には今なお使っているのでMongokuのような管理UIは...

List

  • 2019/05/14

barba.js - スムーズなページ遷移を実現

Webページを素早く表示したいというニーズは強くあります。AMPのような技術しかり、PWAのCache APIもそうです。遅くて良いことなどありません。とにかくWebページは高速に表示すべきです。そしてそのためのライブラリも多数あります。今回紹介するbarba.jsは高速、かつスムーズなページ遷移を可能にするライブラリ...

List

  • 2019/05/14

OpenPlayerJS - 動画と音楽に対応したメディアプレイヤー

HTML5になってvideo、audioタグが追加されました。これらのタグを使うことで動画や音声ファイルをWebブラウザ上で扱えるようになりましたが、そのUIはとても貧弱です。素のままではとても使いづらいでしょう。そこで使うのがサードパーティー製のライブラリです。今回はシンプルで軽量なOpenPlayerJSを紹介しま...

List

  • 2019/05/11

Gandul - 簡単に画像の遅延読み込みを実現

Webサイトは縦長なページが多く、その中で画像を多用していることも多いでしょう。そんな時、HTMLを読み込んだタイミングで画像も読み込んでしまうとネットワークの負荷が高くなります。それを防ぐ遅延読み込みもありますが、技術的に面倒と感じている人も多いかと思います。そこで使ってみたいのがGandulです。簡単に遅延読み込み...

List

  • 2019/05/11

Water.css - 読み込むだけでちょっと綺麗なデザインに

Webは自由度の高いプラットフォームです。WebブラウザはHTMLとCSSを使ってデザインするのが前提で、デザインしない時の表示は酷いものです。しかし、こったデザインをするのは時間がかかります。そこで使ってみたいのがWater.cssです。CSSファイルを読み込むだけで、ちょっと良い感じのデザインにしてくれます。## ...

List

  • 2019/05/10

jQuery Rowspanizer - 動的にHTMLテーブルのrowspanを設定

これは良いアイディア!HTMLでテーブルはよく使われます。検索結果やレポーティングなど活躍の幅は広いです。そしてデータを表示する際に、重複した項目はセルを連結して表示するでしょう。しかし、colspan/rowspanをシステムで動的に設定するのは非常に面倒です。そんな時に使ってみたいのがjQuery Rowspani...