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

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

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

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

もっと見る

List

  • 2017/08/03

Decktape - HTMLプレゼンテーションをPDF化

HTMLでスライドを作成する方が増えています。スライドをWeb上にアップロードするだけで閲覧できる便利さは良いのですが、多くのスライド共有サイトではHTMLには対応していません。そこで使ってみたいのがDecktapeです。多数のHTMLスライドに対応したPDF変換ソフトウェアです。## Decktapeの使い方後は以下...

List

  • 2017/08/02

Paradeiser - ハンバーガーメニューに代わるモバイル向けメニュー表示

モバイル向けのWebサイトではメニュー表示にハンバーガーメニューがよく使われます。しかし、実際のところハンバーガーメニューが一般的に分かりやすいわけでもありません。むしろタップして何が出るのか分からず躊躇してしまう人が多いでしょう。そこで使ってみたいのがParadeiserです。ハンバーガーメニューに変わるメニュー機能...

List

  • 2017/08/02

Chameleon.js - 画像からカラーパターンをピックアップ

Webサイトのデザインを考える上で色彩は重要なパーツです。それだけに慎重に選ばざるを得ません。同系色でまとめれば良いという訳でもなく、一見すると合わないような色合いでも意外とマッチするケースもあります。そんなカラーパターンを既存の画像からピックアップしてくれるのがChameleon.jsです。## Chameleon....

List

  • 2017/08/01

p5.js - Processingライクに使えるグラフィックスライブラリ

Processingといえばグラフィカルなアート作品を生み出す言語として知られています(またはArduinoで使える言語として知っている方も多いでしょう)。しかし専用の言語を覚えないといけないという点において利用を躊躇してしまっている方も多いはずです。そんな方に使ってみて欲しいのがp5.jsです。グラフィックス、インタ...

List

  • 2017/08/01

PlantUML Editor - WebベースのUMLエディタ/ビューワー

個人的にはUMLは嫌いではありません。問題はビジュアルエディタと、UMLを非開発者層にまで理解させようとしたことにあります。開発者が開発者のためだけに用いるならばシステムの可視化は大きな意味があります。そんなUMLをテキストで作成し、さらに表示の確認までできるのがPlantUML Editorです。## PlantUM...

List

  • 2017/07/31

Sirius UI - Bootstrap/Vue.jsを組み合わせたUIデザインテンプレート

UIライブラリは幾つ知っておいても役立つものです。Webサイトの雰囲気に合わせてピックアップしたり、機能によって差別化もできるでしょう。すべての要件を一つのUIフレームワークで達成できる訳ではありませんので、色々知っておくとぴたりと当てはまる場面があるはずです。今回はSirius UIというUIフレームワークを紹介しま...

List

  • 2017/07/31

ExportToExcel - Web上でデータをExcelにエクスポート

Webブラウザでデータをダウンロードしたいというニーズはよくあります。データフォーマットとしては幾つもありますが、特に要望が多いのはExcelフォーマットではないでしょうか。CSVでも良いですが、より使いやすいフォーマットのはずです。そこで使ってみたいのがExportToExcelです。クライアントサイドでExcelフ...

List

  • 2017/07/30

pell - 1KBの軽量なWYSIWYGエディタ

Webでコンテンツを公開するのが当たり前になっている一方、HTMLを習得している割合はそれほど高くありません。そのため、コンテンツを作成する負荷を軽減するためWYSIWYGエディタの存在は大事になっています。今回はpellというエディタを紹介します。わずか1KBという軽量なライブラリです。## pellの使い方こちらが...

List

  • 2017/07/29

Faao - GitHubのIssue/Pull Requestビューワー

GitHubでは多くのデータがWeb APIで取れるようになっています。しかもトークンを使うことで取得できるデータの制限を自分で行えるようになっています。データの作成については制限も多いですが、取得については自由度が高いです。そんなGitHubの仕組みを使って作られているのがFaao、GitHubのIssue/Pull...

List

  • 2017/07/29

BotUI - Web上で作るボット対話UI

ボット系サービスにおいて大事なのはボットとの対話インタフェースです。何かこちらが疑問を投げかけると、それに対してボットが答えます。最近の質はAIによって急激に向上していますが、対話インタフェースはずっと昔から変わりません。今回紹介するBotUIはそんなボットとの対話インタフェースをWeb上で手軽に実装できるライブラリで...

List

  • 2017/07/28

gpu.js - WebブラウザでGPUを手軽に扱えるようにするライブラリ

GPUは単純な計算処理などを行うのに適しています。アニメーションのような処理も得意です。最近ではAIのモデル作成などにGPUが注目されていますが、CSS3アニメーションなどWebブラウザでも利用できる場面が数多くあります。今回紹介するgpu.jsはそんなGPUによる計算処理を手軽に実現できるようにするJavaScrip...

List

  • 2017/07/27

Comicbed - ブラウザベースのコミックリーダー

電子書籍は様々なデバイスで表示できるようになっています。DRMが使われているとWebブラウザで表示するのは難しいですが、PDFであれば殆どのWebブラウザで表示できますし、PDF.jsのようにPDFをJavaScriptから扱えるライブラリもあります。今回はそんなPDFが使えるコミックリーダー、Comicbedを紹介し...

None

  • Premium_s 2017/07/25

Web上でJavaScript以外の言語を使う

JavaScriptはWebブラウザ上で動作することを保証された唯一のプログラミング言語です。かつてはプラグインの仕組みもありましたが、HTML5になってプラグインはほぼ使われなくなっています。GoogleはDartを開発していましたが、Chromeへの組み込みは断念しています。そんな中にあって、Webブラウザ上でJa...

None

  • 2017/07/25

node-gmail-watcher - Gmailに新着メールがあったらプログラムをキック

メーラーを使っていると、新着メールが来ると通知が来るでしょう。これは便利ですが、常に通知がベストという訳ではありません。場合によってSlackに情報が欲しい場合もあれば、社内システムに書き込んで欲しいこともあるでしょう。そうしたメール受信に合わせてシステムを実行するのに向いているのがnode-gmail-watcher...

None

  • 2017/07/25

npm-icon-gen - スマートフォンアプリ/Webサイト用のアイコンファイルをまとめて生成

スマートフォンやWebサイトなどアイコンを使う機会は多いですが、それらはプラットフォームなどによってサイズがすべて違います。iOSであってもデバイスの画面の大きさや解像度によって異なります。これを一つ一つ作るのは大変です。そこで一つのSVG画像さえ用意すれば後は自動で生成してくれるnpm-icon-genを使いましょう...

List

  • 2017/07/25

Propeller - レスポンシブ/マテリアルデザイン対応の管理画面テンプレート

最近のWebデザインのトレンドはどんどんアプリ風に、複雑になっています。レスポンシブWebデザインによって、画面幅を意識したデザインになり、さらにマテリアルデザインによってユーザのアクションを意識するようになっています。これをすべて実装したサイトのデザインはとても難しいでしょう。そこで使ってみたいのがPropeller...

List

  • 2017/07/24

jquery-rsSlideIt - 2D/3Dでダイナミックなスライド切り替え

よりインパクトのあるスライドを目指すならば一つ一つのスライドはもちろん、そのスライドの切り替えにもこだわると良いでしょう。ダイナミックなアニメーションがあると目を引くプレゼンテーションにつながるはずです。今回紹介するjquery-rsSlideItはjQueryプラグインとして作られたスライド切り替えライブラリです。#...

Missing

  • 2017/07/23

Aperture - nodeを使ってコマンドラインでスクリーンキャプチャ

コンピュータの操作を記録するソフトウェアは幾つもあります。昔はあまり選択肢がなかったですが、今ではOS標準のソフトウェアでレコーディングできたりします。その多くのソフトウェアはGUIで、マウス操作を使って録画しなければなりません。もっとプログラマブルにレコーディングをしたければApertureを使ってみましょう。コマン...

None

  • 2017/07/23

google-apps-script - Google Apps Scriptをローカルで開発/管理

Google Apps Scriptを使うとGoogleスプレッドシートやドキュメントなどの自動操作ができるようになります。若干特殊なJavaScriptにはなりますが、デバッグ実行もできるので開発もしやすいです。難点はコードをすべてWeb上で書くという点です。開発をローカルで行いたいという方はgoogle-apps-...

List

  • 2017/07/22

Github Stars Manager - GitHubのスターを付けたリポジトリをタグで管理

皆さんがGitHubのスターを何のためにつけていますか。応援として使っている方もいるでしょう。スターを付けているリポジトリを取得することもできるので、ブックマークとして使っている方もいます。ただ、あまり便利に使える訳ではありません。そこで一緒に使っていきたいのがGithub Stars Managerです。GitHub...