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

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

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

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

もっと見る

List

  • 2017/09/25

Mobiledoc Kit - 好みのWYSIWYGエディタを作る

世の中には多くのWYSIWYGエディタが存在します。どれもそれぞれに特徴があり、選択が多くて迷ってしまうでしょう。しかし、それでもなお自分の目的にぴったりと合っていないことがあるかも知れません。そこで使ってみたいのがWYSIWYGビルディングキットです。今回はMobiledoc Kitを紹介します。## Mobiled...

List

  • 2017/09/25

Megadraft - Draft.JSをベースにしたリッチテキストエディタ

Facebookが開発している、WYSIWYGエディタのベースになるDraft.JS

List

  • 2017/09/24

smoothState.js - 滑らかな画面遷移を提供

スマートフォン向けのWebサイトなどでは画面遷移が大事です。普通のURLを遷移するような動きではUXがよくありません。新しいコンテンツがスライドしてきたり、前の画面と滑らかに入れ替わることでユーザの意識を切らさずに操作を継続できるようになります。そうした動きをサポートしてくれるライブラリがsmoothState.jsで...

List

  • 2017/09/24

Dawn - フロントエンド/node開発のビルドツール

フロントエンド開発はどんどん進化しています。その結果として様々なツールを組み合わせなければならなくなったり、手順が増えてしまっています。これでは手軽に開発できなくなってしまいます。そこで紹介したいのがDawnです。軽量なタスク管理を備えたフロントエンドの開発、ビルドツールです。## Dawnの使い方使っている場面です。...

None

  • 2017/09/22

Scotty.js - コマンド一つでS3/CloudFrontへのアップロード

簡単なWebサイトや静的サイトをAmazon S3上で公開するケースが増えています。さらに表示を高速化したり、SSL/TLSを使うためにCloudFrontを使うケースも増えています。しかしそのアップロード法は今なおFTP並のやり方のことも多いでしょう。そこで使ってみたいのがScotty.jsです。コマンド一つでアップ...

List

  • 2017/09/20

Ordinance format jp - Markdownで日本の公文書を記述

Markdownは広く使われるようになっていますが、シンプルな記法だけに簡易的なHTMLへの変換以外のニーズ向けとなると使い勝手が悪いことがあります。そのためグラフを入れられるようにしたり、チャートを描けるようにするソフトウェアが作られます。今回紹介するOrdinance format jpもその一つです。日本の公文書...

List

  • 2017/09/20

Chrome Calendar Groups - Googleカレンダーをグルーピングして簡単に切り替え

Googleカレンダーを使っている方は多いでしょう。基本のカレンダーは一つですが、プライベートとビジネスで使い分けたり、さらに共有で他の人やプロジェクトごとにカレンダーを分けたりします。そうしているとカレンダーが予定だらけになってしまい、必要に応じて表示/非表示を使い分けるようになります。そうなったら入れておきたいのが...

None

  • 2017/09/19

psi-local - ローカルサイトにPageSpeed Insightsを適用する

Webページの表示速度が遅くて良い理由はありません。ユーザ体験はもちろん、Eコマースサイトなどでは売り上げに直結するほどです。Googleも表示速度を検索順位の指標に組み込んでおり、その指摘を行ってくれるサービスとしてPageSpeed Insightsを提供しています。しかしこのPageSpeed Insightsは...

List

  • 2017/09/18

Plyr - YouTube/VimeoをサポートしたWebメディアプレーヤ

動画コンテンツをWeb上で再生するのに使えるのがvideoタグです。しかし素のままではとても使い勝手が悪いです。使いやすくするためには専用のプレーヤライブラリが欲しいでしょう。今回紹介するPlyrはHTML5のメディアプレイヤーですが、YouTube/Vimeoにも対応しているのがポイントです。## Plyrの使い方こ...

List

  • 2017/09/17

Fruumo - Google Chromeで綺麗なタブページを

Google Chromeで新しいタブを開くとGoogleの検索窓とよく使うサイトが表示されます。最低限で良いのですが、毎回同じ画面では面白みがなく、飽きてしまうでしょう。そこで使ってみたいのがFruumoです。綺麗な写真を使って格好良いページを表示してくれるChrome機能拡張です。## Fruumoの使い方新しいタ...

List

  • 2017/09/17

MMRA - Mediumの可読性を上げるChrome機能拡張

日本では撤退してしまいましたがMediumはブログプラットフォームとして非常に大きなサービスです。カスタムドメインを使ってMedium上でブログを提供しているサービスも多数あります。しかし上下にバナーが出て、デザイン上非常に煩わしいです。そこで使ってみたいのがMMRAです。Mediumを見やすくしてくれるChrome機...

List

  • 2017/09/16

CrossStorage - クロスドメインで使えるlocalStorage

HTML5で追加されたAPIの一つにlocalStorageがあります。特定のサイト内で使える簡易的なストレージですが、一つのサイトでしか使えないのが難点です。時に別なサイトでも使いたいと思うことがあるでしょう(特にサブドメイン)。そこで使ってみたいのがCrossStorageです。クロスドメインで使えるストレージです...

List

  • 2017/09/15

adsenseLoader.js - AdSenseをレスポンシブWebデザインに対応させる

Webサイトの収益増加のためにAdSenseを使っている方は多いでしょう。そんなAdSenseの欠点として、レスポンシブでないという点があります。モバイル用とデスクトップ用で分けなければならず、運用が面倒に感じている方も多いでしょう。そこで使ってみたいのがadsenseLoader.jsです。これだけ入れればAdSen...

List

  • 2017/09/14

Marko - eBay製。サーバ/クライアント両方に対応したビューフレームワーク

Reactが導入したVirtualDOMという概念はあっという間に他のフレームワークにも影響を及ぼしていきました。最近では Webコンポーネントにも関連して、小さなパッケージを組み合わせる方法が主流になっています。今回紹介するMarkoもそんなフレームワークの一つです。特に高速な動作がポイントになっています。## Ma...

List

  • 2017/09/12

Responsivook - 縦書き/横書きに対応したレスポンシブな電子書籍

今のWebデザインはあらゆるデバイスに合わせてレスポンシブにすることが求められています。それは何もWebブラウザだけでなく、HTMLをベースとした文書にも適用されます。今回は電子書籍をターゲットにしたResponsivookを紹介します。縦書き、横書きともにレスポンシブになります。## Responsivookの使い方...

List

  • 2017/09/12

Chrome blank tab - Google Chromeの新規タブをブランクに

Google Chromeは新しいタブを開くとGoogleの検索窓が表示されます。また、よく使うサイトも一緒に表示されます。しかし、これらをクリックした経験はあるでしょうか。検索すらアドレスバーで行えば十分です。ということで使ってみたいのがChrome blank tabです。その名の通り、新しいタブをブランクにしてく...

List

  • 2017/09/10

wcode - Webブラウザ上で動作するプログラミングエディタ

AtomやVisual Studio Codeなど、Web技術を使ってプログラミングエディタが動くのが当たり前になっています。JavaScriptエンジンの高機能化はもちろん、HTML5の高機能化によって実現されています。wcodeは同じようにWeb技術を使ったコードエディタです。Webブラウザ上で動作するのがポイント...

List

  • 2017/09/09

qbrt - Geckoエンジンを使って特定サイトだけ立ち上がるアプリを生成

ElectronはWeb標準の技術を使ってデスクトップアプリケーションが作れるとあって人気があります。とは言え、よく使われるのはWebサイトのガワアプリで、特定のサイトだけ使える点においてセキュリティ上のメリットがあります。そんなガワアプリをコマンドラインで作れるのがqbrtです。さらにレンダリングエンジンとしてWeb...

List

  • 2017/09/09

Google Image Search extention for Safari - Googleの似た画像検索を呼び出すSafari機能拡張

Googleの画像検索はとても便利で、個人的によく使っています。ライセンスフリーの画像やアニメーションGIFを探すといった時に便利です。さらに便利なのが、似たような画像を探す機能です。画像をアップロードしても良いのですが、Google Image Search extention for Safariを使えばコンテスト...

List

  • 2017/09/07

drawio-desktop - Electron製。draw.io公式のドローツール

ElectronでWebサイトをラッピングする系統のソフトウェアはとても多いです。限定されたセキュリティ範囲で使えるのは便利ですが、結局のところ単なるガワアプリでしかないという印象があります。そんな中、drawio-desktopは違います。draw.ioがそのままデスクトップアプリケーションになったようなソフトウェア...