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

Webの記事一覧

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

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

もっと見る

List

  • 2017/04/03

HexoPress - Googleドキュメントを使ったブログシステム

ブログエンジンで必ず必須になるのが管理画面ではないでしょうか。コンテンツをためておいて、一覧したり編集できる仕組みが必要です。静的なブログエンジンの場合はローカルのフォルダが管理する機能になるでしょう。そんな中面白いのがHexoPressです。なんとGoogleドキュメントをコンテンツを蓄積する場としています。## H...

List

  • 2017/04/02

Redaxscript - モダンなデザインと軽量さが売りのPHP製CMS

CMS(コンテンツ・マネジメント・システム)はWebの黎明期はもちろんのこと、現在でも多種多様に新しいソフトウェアが登場する分野です。トレンドも変わっていますし、新しいキーワードを取り込んで進歩し続けています。今回はモダンで軽量さを謳ったCMS、Redaxscriptを紹介します。## Redaxscriptの使い方イ...

List

  • 2017/04/01

Alloy Editor - 多機能でWYSIWYGなMarkdownエディタ

Markdownは覚えやすい記法だと思いますが、それでも一定の書き方を覚えないと使いこなせません。そのため多くのMarkdownエディタでは2画面のプレビューがある(間違っていないかすぐに確認できる)ものとなっています。個人的には2画面があまり好きではないのでWYSIWYGなものがないかと思っていました。そこで出会った...

List

  • 2017/03/31

Key Surfer - Google ChromeのWebブラウジングを高速化

Webブラウザはマウスやタッチパッド操作が基本です。リンクをタブキーで辿ることはできますが、何回も入力したりするのは面倒に感じる人も多いでしょう。その結果、プログラマであってもWebブラウザを使うときにはマウスを使い続けることになります。そんな操作が嫌だという方はKey Surferを使ってみましょう。リンクを辿るのが...

List

  • 2017/03/30

OpenPGP.js - JavaScriptで使えるOpenPGP

今、セキュアに情報を管理しようと思うと採用したいのが秘密鍵/公開鍵ではないでしょうか。ビット数によりますが、十分に長ければおいそれと解除されることはないでしょう。問題は一般ユーザに普及していないことです。もしWebサービスで導入したかったらOpenPGP.jsを使ってみてはいかがでしょう。JavaScript上でOpe...

List

  • 2017/03/29

Gutenberg - Webページの印刷用フレームワーク

Webの印刷機能は貧弱です。そのため多くのレポートはHTMLではなくPDFなどに出力されます。日本の業務システムは特に印刷内容の細かい制御が求められるのではないでしょうか(経済合理性はさておき)。もっと手軽に印刷指定を行いたい、という方はGutenbergを使ってみましょう。モダンな印刷を実現するためのフレームワークで...

List

  • 2017/03/28

HTML5 Bombergirl - HTML5製のボンバーマン

最近のゲームはやり方を覚えるまでにそれなりに時間がかかります。そのため、時間がない人は遊びたくともなかなかできません。その点、昔ながらの古典的ゲームであれば操作もシンプルですぐに遊べます。今回は昔懐かしいボンバーマンをWeb上で再現したHTML5 Bombergirlを紹介します。## HTML5 Bombergirl...

List

  • 2017/03/28

Clappr - 機能拡張できるWeb用動画プレイヤー

動画コンテンツが一気に広がっています。スマートフォンやアクションカメラ、360度動画など様々な撮影デバイスも登場しており、今後もますます利用が広がっていくことでしょう。そんな動画コンテンツで必要なのがプレイヤーです。今回紹介するClapprは機能拡張がサポートされた動画プレイヤーになります。## Clapprの使い方使...

List

  • 2017/03/27

Resumable.js - HTML5 File APIを使ったリジューム付きファイルアップローダー

Webで面倒に感じるのがファイルのアップロードです。特に途中でネットワークが切れた時には大きなストレスになります。1回で数百MB、数GBの大きなファイルをアップロードするとなればリジューム機能が欲しくなるはずです。そこで使ってみたいのがResumable.jsです。HTML5のFile APIを使ってリジューム機能を実...

List

  • 2017/03/26

Smart Answers - インタラクティブに進めて答えが得られるシステム

世の中には計算が若干面倒という場面が多々あります。例えば通貨の換算であったり、カロリーの計算なども面倒でしょう。そうした時、ロジカルに考えていく方法が分かっていれば、考えるプロセスはとてもシンプルになります。そうした思考プロセスを補助してくれるソフトウェアがSmart Answersになります。## Smart Ans...

List

  • 2017/03/25

WebPack Playground - WebPackをWeb上で体験しよう

JavaScriptの利用範囲が広がるのに合わせてライブラリを使ったり、ソースコードが分かれているのを統合したりする必要が出てきました。その際に使われているのがBrowserifyであったり、WebPackです。今回はWebPackをWebブラウザ上で体感できるWebPack Playgroundを紹介します。## W...

List

  • 2017/03/24

LayaAir - 一つの言語からFlash/HTML5/モバイル向けにコード出力できるアニメーションエンジン

HTML5によって(またはiOSによって)Flashは絶滅に瀕しています。問題はFlashがなくなった後の世界でいかに効果的なアニメーションやインタラクティブな操作を実現できるかです。HTML5でできますが、非常に面倒でしょう。そこで使ってみたいのがLayaAirです。ゲームやアニメーションで使えるレンダリングを行って...

List

  • 2017/03/23

Shape Shifter - 異なるSVGに変化するアニメーションを生成

SVGとこれまでの画像バイナリと決定的に違う部分はなんと言ってもプログラムから操作しやすいということでしょう。アニメーションの定義などはSVG内でもできますが、より詳細なアニメーションはJavaScriptで制御できます。そんなSVGを使って形状変化するアニメーションを定義できるのがShape Shifterです。##...

List

  • 2017/03/22

ag-Grid - 業務要件の殆どを満たせそうなグリッドライブラリ

業務システムなどをWebベースで作っていると求められるのがリッチなグリッド機能です。ヘッダの固定、フィルタリング、チェック、カラムの順番変更、一回あたりのデータ表示件数変更…挙げれば実にきりがありません。そこで使ってみたいのがag-Gridです。ほぼこれでニーズを満たせるのではないかというくらいリッチなグリッド機能を提...

List

  • 2017/03/21

CanvasEffect.js - Canvasで画像にエフェクト

HTML5のCanvasを使うと画像を取り込んで表示し、エフェクトを行うことができます。しかしCanvasの扱いは意外と面倒で、コードも多くなりがちです。そのためメンテナンス性が低くなってしまいます。そこで使ってみたいのがCanvasEffect.jsです。画像を編集するための専用ライブラリとなっています。## Can...

List

  • 2017/03/21

Djvu HTML5 browser - WebベースのDjvuビューワー

Djvuというファイル形式があります。共通したDjvuビューワーをインストールしておけば、どのプラットフォームでも同じように文書を閲覧できるというものです。つまりPDFのような形式で、圧縮率に優れていると言われています。PDFに比べるとシェアは低いですが、Djvu HTML5 browserを使えばWebブラウザ上でD...

List

  • 2017/03/20

zPath.js - SVGをアニメーションしながら描画

SVGの良いところはベクターベースのデータである点と、内容がXMLなのでプログラマブルに操作可能ということです。バイナリデータと異なり、一部だけを描画したり色を変えると言ったことも簡単にできます。そこで使ってみたいのがzPath.jsです。SVGを読み込んでアニメーションしながら描画してくれます。## zPath.js...

List

  • 2017/03/19

Storytime - 書きやすさに特化したブログシステム

みんな誰しもが自分だけのストーリーを持っています。そんなことはない、私には何も語れるものはないと思う人がいるかも知れませんが、自分の常識は他人の非常識だったりします。言ってみると意外と驚かれる話題がきっとあるはずです。そんな自分の思いを綴れるサービスがStorytimeです。Medium風のライティングが可能なCMSと...

List

  • 2017/03/17

Export Tool for Vector Tiles to SVG - タイルデータを一つのSVGに統合

SVGはディスプレイの高画質化が進んでいく中で、バイナリに変わる画像フォーマットとして有力です。JavaScriptで動的に書き換えたり、拡大や縮小にも強い作りとなっています。今後ますます広がっていくことでしょう。そうした中面白そうなのがExport Tool for Vector Tiles to SVGです。地図デ...

List

  • 2017/03/16

Sly - 上下左右のスクロールを便利にするJavaScriptライブラリ

Webページの多くは縦長に作られています。縦方向のスクロールについてはホイールなどを使って簡単にできますが、それでもあまりに長いと操作が面倒です。さらに横向きのスクロールはストレスでしょう。そこで使ってみたいのがSlyです。上下または左右など一方向でのスクロールナビゲーションが便利になるライブラリです。## Slyの使...