プログラミング言語 - JavaScriptの記事一覧
mr2.js - ローカルコンピュータをインターネットに公開
ローカルで開発しているものを人に見てもらいたいと思うことがあります。そんな時、インターネット上に公開されているサーバへデプロイするのは面倒です。ローカルをそのまま公開できれば良いのにと思ったことがあるでしょう。そんな時に使えるのがmr2.jsです。ローカルの特定のポートをインターネット上に公開できます。## mr2.j...
glfx.js - JavaScriptで画像を加工
画像を加工する場合、画像編集ソフトウェアが使われます。そして加工したファイルを保存し、Web上にアップロードするでしょう。しかしこの場合、再度編集する際に備えて元ファイルは保存しておかなければなりません。また、同じ加工を何十枚もの画像に施すのも大変です。そこで使ってみたいのがglfx.jsです。JavaScriptを使...
Try Puppeteer! - クラウド上でPuppeteerを実行
Puppeteerを使ってChromeをヘッドレスで実行することがあります。単純な自動操作はもちろん、テストなどにも使えるので便利です。しかし、環境構築を各ローカルコンピュータで用意しなければならないのが面倒です。そこで使ってみたいのがTry Puppeteer!です。Puppeteerのスクリプトをクラウド上で実行し...
mario.js - マリオをWebサイトに追加
デスクトップに小さなキャラクターを表示するデスクトップマスコットが知られています。ちょっとした機能もあり、目にも楽しい存在です。同様の存在をWebサイトにも付けてみたいと思ったことはないでしょうか。今回はその一例としてmario.jsを紹介します。あなたのサイトにマリオを表示できます。## mario.jsの使い方実行...
Medium to own blog - Meduimから独自ブログへの移行に
Mediumが有料化を強めているせいか、徐々に抜け出そうという動きが出始めています。FreeCodeCampがMediumに有料化を迫られたために移行すると発表したのも大きな要因になっているようです。フリーミアムモデルにおける課金率は大きな問題ですが、それを迫るようなやり方はよくありません。もしあなたがMediumを使...
Encryptic - 暗号化して保存されるWebノートアプリ
Webサービスとプライバシーは常に相対する存在です。個人のデータを預けるというのは信頼がおけるサービスでないといけません。データ漏洩なども頻繁に発生しており、その度に個人情報が危険にさらされています。防ぐための手段として、サーバ側のデータを暗号化する方法があります。今回は暗号化に対応したノートアプリ、Encryptic...
md2pdf - CSSを組版に使ってMarkdownをPDFに変換
MarkdownをPDFにするソフトウェアは幾つもありますが、細かい組版に対応しているものは多くありません。ごく簡単なものであれば問題ありませんが、ドキュメントなどで体裁にこだわりたい場合もあるでしょう。専用アプリもありますが、自動化したいというニーズもあります。今回紹介するmd2pdfはコマンド一つでMarkdown...
CodePicks - React Native製のニュースアプリ
最近、テックメディアが目立つようになっています。主にキュレーション系で、あまりに多くなっている情報をサマライズしたり、絞り込んで提示してくれます。限られた時間の中で効率的に情報収集できるのが便利です。そんなテックメディアを提供するアプリがCodePicksです。## CodePicksの使い方トップ画面です。!
Translate side by side - 翻訳前後の文章を横並びで表示するGoogle Chrome機能拡張
Google翻訳を使って英語ページを日本語にしている人は多いかと思います。そんな時、変な訳にぶつかって原文を確認したいと思うこともあるでしょう。Google翻訳ではページ全体の翻訳または原文表示の2パターンしかサポートされていません。これは不便です。そこで使ってみたいのがTranslate side by sideです...
WebGL Fluid Simulation - 流体の動きをシミュレーション
流体の動きは実に不思議です。そもそも私たちに最も身近である水ですら、とても不思議な特性を持ち合わせています。水の上に水彩絵の具を垂らして、それが広がっていく様子を楽しんだり、紙に写し取ったりして遊んだ経験は誰もがあるのではないでしょうか。そんな流体の動きをシミュレートしたのがWebGL Fluid Simulation...
Zdog - SVGやCanvasにドロー
Illustratorなどで描いたキャラクターも、そのままでは単なる絵と変わりません。SVGであれば、JavaScriptを使ってインタラクティブな操作が実現します。そうすれば、画像とは違った楽しみ方が生まれるでしょう。今回紹介するZdogはJavaScriptでイラストを描き、3Dのように回転もできるライブラリです。...
sqleton - SQLiteのデータベース構造をSVGで可視化
データベース設計を定期的に確認することで、全体が分かりづらくなっていないか、不要なカラムが追加されていないかなど健康状態をチェックできます。そんな時、Excelなどではなくビジュアル化されていると分かりやすいでしょう。そこで使ってみたいのがsqletonです。データベース構造をSVGファイルにしてくれます。## sql...
drawgon - Web上でドロー
Web上で絵を描こうと思うとCanvasタグを使って行います。そして、そこに描かれた情報は画像としてダウンロード可能です。しかし、ベクターデータとして（SVGとして）欲しい場合もあるでしょう。そこで使ってみたいのがdrawgonです。Web上で使えるドローイングアプリケーションです。## drawgonの使い方最初にサ...
a2hs.js - iOSでもAdd to Home Screen
PWAに注目が集まっていますが、Androidに比べてiOSの対応は今なお微妙です。アプリケーションのようにインストールできるのですが、その手順も分かりづらく、インストールを促すバナーも出せません。これではiOS向けにはなかなか普及しないでしょう。それを若干でも改善できるのがa2hs.jsです。iOS向けにユーザビリテ...
get-browser - デスクトップ/スマートフォンのWebブラウザを特定
かつてあったブラウザ戦争はなくなり、ほぼWebKit一強になりつつあります。そんな中、スマートフォンやタブレットなど画面解像度やサイズの多様性が生まれており、その中で開発者が対応すべきことも増えています。どのWebブラウザからのアクセスなのか、特定に苦労している人も多いのではないでしょうか。そこで使ってみて欲しいのがg...
imfunniee - 開発者向けポートフォリオテンプレート
開発者であれば自分のポートフォリオを持つべきです。それは個人のアイデンティティになり、転職時などにも有利に働きます。幸いGitHubのリポジトリはポートフォリオに使えるコンテンツになります。後は自己紹介やブログなどがあれば完璧でしょう。そこで使ってみたいのがimfunnieeです。GitHub Pagesで公開できるポ...
iru - Markdownをそのまま使うCMS
これまで、MarkdownをベースにWebサイトを作るソフトウェアは多数ありました。その多くはコマンドが用意されており、MarkdownコンテンツをHTMLに変換するものだったと思います。つまり静的サイト向けの使い方でした。今回紹介するiruはMarkdownファイルを読み込んで表示するタイプのWebサイトです。システ...
Hovercraft - Preziのようにページが切り替わるHTMLスライド
プレゼンテーションというと、退屈なスライドが並んでいて、切り替え時にちょっとしたアニメーションが起きる程度と思っているかも知れません。もっと聴衆の目を引くスライドを作ってみたいと思う方はPreziを使っていたりします。しかし、あれはデスクトップで動作するソフトウェアです。Webならもっと公開やシェアも手軽にできるのに…...
hackaru - シンプルな作業時間測定アプリ
集中して仕事をするためには、時間に厳しくなくてはいけません。単位時間のパフォーマンスを上げていくことで、より生産性を高められるようになります。そのためにはまず、現在の時間の使い方を可視化しなければなりません。そのために時間管理ソフトウェアがあります。実行しているアプリケーション単位で厳しく時間測定できるものもありますが...