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

プログラミング言語 - JavaScriptの記事一覧

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

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

もっと見る

List

  • 2017/05/15

Code Snipper - コード(スニペット)を画像化

GitHub Gistのようにオンラインでコードを書いておけるサービスはあります。しかし、埋め込みコードが自分のサイトでは使えないというケースは多々あります。JavaScriptタグを危険なものとして全般的に不可としてしまっているケースです。そこで使ってみたいのがCode Snipperです。コードを画像にしてくれるソ...

List

  • 2017/05/14

PsiTransfer - 自前で立てるファイル共有サーバ

メールなどで巨大なファイルを送りつけるのはあまり良いことではありません。受ける側は強制的に受信せざるを得ませんし、そのせいで大事なメールが受信できなくなってしまうかも知れません。そのため、送受信両方でメールのサイズ制限を設けていることはよくあります。そんな時のために使えるのがファイルをシェアするサーバです。今回はPsi...

List

  • 2017/05/13

per-word-action - 単語や行ごとにデザインを変える

最近のWebサイトは多数のデバイス、多数の幅に合わせたレスポンシブデザインが求められてます。しかし幅が変わるとデザイナーの意図した描画にできない場合もあります。特にテキスト量に依存した処理は行数が変わると面倒です。一例として使えるのがper-word-actionです。行ごとにデザインを変えることができるライブラリです...

List

  • 2017/05/13

curvejs - 曲線を使ったアニメーションライブラリ

Web上でアニメーションを描くのはとても面倒です。一度表示するだけであればこだわったリッチな描画も可能ですが、アニメーションとなると話が変わってきます。Canvasで描画している場合は、その内容を消す操作が必要です。文字が揺れるようなアニメーションを実現したかったらcurvejsを使ってみると良さそうです。## cur...

List

  • 2017/05/12

Web Design Pirate - Webサイトの一部をピックアップして再利用

Webデザインはコンポーネント指向になってきています。Web componentsという仕様も作られており、さらにこの流れは加速するでしょう。Webサイトの一部を埋め込んだり、再利用性高い部品を使うのが当たり前になっています。そんなWebサイトの一部をピックアップするのに最適なGoogle Chrome機能拡張がWeb...

List

  • 2017/05/10

React Timekeeper - Google Keepアプリにインスパイアされた時間入力UI

時間の入力インタフェースは意外と古くさくて面倒な場合が多いです。日付はカレンダーで入力できるのに、時間はドロップダウンでいちいち選択しないといけません。テキストで入れる場合も数字のみしか入力できないようにしなければならないでしょう。そんな時間入力インタフェースとして作られたのがReact Timekeeperです。Go...

List

  • 2017/05/09

Pull Quote Center - 中央に引用を表示するレイアウト

HTMLはレイアウトの概念があまり強くありません。CSSを駆使すればできることもあるでしょうが、メンテナンス性が非常に悪くなったり、再利用性も低くなったりします。雑誌のようなレイアウトを再現するのは大変です。今回は2段組の雑誌構成でよくある中央に引用を表示するレイアウトを実現するPull Quote Centerを紹介...

List

  • 2017/05/07

pnpm - npmの高速化と容量削減を実現

npmは優れたパッケージ管理システムですが、使っていると速度が遅くてストレスを感じることがあります。その挙げ句にエラーが出たら目も当てられません。それを解決するためにyarnも作られていますが、まだ機能的に十分でないこともあります。そこで使ってみたいのがpnpmです。高速かつディスクスペースを低減してくれるnpmです。...

List

  • 2017/05/07

8192px - みんなで共有する広大なキャンバス

リアルの世界で無限のキャンバスを提供するのは困難ですが、デジタルの世界では簡単です。そしてみんなでキャンバスをシェアしたら、どんな楽しい作品が生み出されるでしょうか。そんな楽しさを垣間見せてくれるのが8192pxです。みんなでピクセルアートが楽しめる、そんなプラットフォームになります。## 8192pxの使い方現在のメ...

List

  • 2017/05/06

Pegmatite - PlantUMLを画像化するGoogle Chrome機能拡張

かつて信望者が多く、そして使われなくなってしまったUMLですが、個人的には技術的には悪くないと感じています。問題はシステム開発と密接に(スケルトンコード出力など)しすぎたことでしょう。システムを可視化したり、図化するのは良いことです。そこで使ってみたいのがPegmatite、PlantUMLをドローしてくれるChrom...

List

  • 2017/05/04

glua - ブラウザ、nodeで動く。JavaScript製のLuaVM

Luaは高速に動作するスクリプト言語で、移植性も高く、とても人気があります。nginxの拡張ができるなど、ゲームエンジンなどでもLuaによる拡張をサポートしている例が多数見られます。そんなLuaをWebブラウザやnode上で動かせるのがgluaになります。JavaScriptで書かれたLua VMになります。## gl...

List

  • 2017/05/01

mobster - マルチプラットフォーム対応のモブプログラミングタイマー

モブプログラミングはペアプログラミングの次の形、チーム全員が同じ問題に対して同じ時に同じ場所で取り組むというものです。実際にコーディングするのは一人なので、他の人たちは自分の考えを言語化して説明しなければなりません。そんなモブプログラミングを行い際に使えるツールがmobsterです。Web技術によるモブプログラミングタ...

List

  • 2017/04/28

mdpdf - スタイル設定が指定できるMarkdown to PDF

MarkdownはHTMLだけでなく、他のフォーマットに展開する際にも使える便利な記法です。よくあるのはPDFではないでしょうか。しかし殆ど装飾も行われないシンプルなPDFなので、業務や報告書で使うのはちょっと躊躇してしまいます。そこで使ってみたいのがmdpdfです。スタイル設定などが可能なMarkdownからPDFへ...

List

  • 2017/04/24

Offline Wikipedia - オフラインでも読めるWikipediaビューワー

Wikipediaは情報の宝庫です。読んでいるとついつい時間を忘れてしまうくらいです。そんなWikipediaだからこそ、オフラインな時はとても不便な思いをするかも知れません。先ほど見た情報を確認したいと思うことも多いのではないでしょうか。Wikipediaのオフラインでの閲覧を可能にするのがOffline Wikip...

List

  • 2017/04/23

Planck.js - JavaScript製、2D用物理エンジン

Web向けにゲームを作ったり、ユーザの操作に合わせてオブジェクトが動くようにしたりするのに必要になるのが物理エンジンです。単に横滑りするのではなく、他のオブジェクトや重力の影響を計算することでよりリアルなゲームになります。そこで使えるのがPlanck.jsです。2D向けの物理エンジンです。## Planck.jsの使い...

List

  • 2017/04/21

pocketplace - Canvasの内容を同期

HTML5のCanvasを使えばお絵かきボードのようなイラストを描ける環境を作ることができます。とは言え自分でイチから作るのは大変です。Canvasは通常のDOMと違い、描画や消したりする方法が全く異なります。そんなCanvasをシェアする方法を手軽に実装できるのがpocketplaceです。## pocketplac...

List

  • 2017/04/21

across-tabs - クロスオリジンをサポートしたタブ間通信ライブラリ

Webシステムを開発していて、ボタンを押したりリンクをクリックしたらタブが開くようにすることは多々あります。しかし無尽蔵に開いてしまうとメモリを食いますし、ユーザに嫌がられます。そこで使ってみたいのがacross-tabsです。タブ同士の通信を可能にするライブラリです。## across-tabsの使い方新しいタブを開...

List

  • 2017/04/20

Grid Garden - CSS Grid Layout Moduleについて学べる学習ソフトウェア

CSSの使い方をちゃんと覚えるというのは大変です。しかも日々進化しており、新しいプロパティが追加されたりします。もちろんすぐに汎用的に使える訳ではありませんが、先進的なブラウザからどんどん導入が進んでいきます。放置しておくとあっという間に時代に取り残されてしまうでしょう。今回紹介するGrid GardenはCSS Gr...

List

  • 2017/04/19

BigPicture - YouTubeやVimeoにも対応した画像/動画表示ライブラリ

画像や動画は見せ方が大事です。単にリンクを貼って、クリックしたら画像だけが表示される…なんてのはよくありません。最近は画像の解像度が上がっているので、サムネイルと実際の写真とをうまく見せる必要があります。今回紹介するBigPictureはWebベースの画像、動画表示ライブラリになります。## BigPictureの使い...

List

  • 2017/04/17

nanogallery2 - 多彩な表示をサポートした写真ギャラリー

スマートフォンやデジカメによって写真コンテンツは爆発的に増加しています。しかしそうやって撮りためた写真も見せなければストレージの肥やしになってしまいます。単なる一覧ではよくありません。そこで使ってみたいのがnanogallery2です。クラウドサービスにも対応した写真ギャラリーです。## nanogallery2の使い...