pad.js - ターミナルからでも使えるファイル共有サーバ MOONGIFT
ファイルを共有する仕組みは意外と簡単ではなかったりします。Apple製品同士であればAirDropが使えますが、異なるマシン間において、目の前の相手にデータを送りたいと思うことはよくあります。そして大抵メールになったりします。 今回はインターネットを介してファイルを送信、受信できるpad.jsを紹介します。 pad.jsの使い方 pad.jsが魅力的なのはコンソールで送れることでしょう。認証もいらず、さくっと送れます。 $ curl -F "file=@IMG_3721.jpg" http://127.0.0.1:9090/IMG_3721.jpg 逆に取り出す場合にはwgetでも良いでしょう。URLを指定するだけです。 $ wget http://127.0.0.1:9090/IMG_3721.jpg --2018-10-15 13:35:40-- http://127.0.0.1
Fiddly - MarkdownのREADMEを綺麗なHTMLで表示
MarkdownファイルはHTML生成のために使われることが多いです。生成するタグはごく基本的なものになるので、デザインは利用するWebサイト側に任されています。多くはシンプルなデザインであったり、GitHub風になっています。 今回紹介するFiddlyはMarkdownからより綺麗でデザインされたHTMLを生成するソフトウェアになります。 Fiddlyの使い方 サンプルです。 コードやリンクなどが分かりやすく表示されます。 テーブルです。 Todoにも対応しています。画像を並べて表示するのも良い感じです。 テーマを変更してダークモードにも。 Fiddlyはデザインがすっきりとして見やすいのはもちろん、絵文字のサポート、コードハイライト、画像の縮小表示、コードをiframeで安全にするといった工夫がされています。カスタマイズも可能なので、自分好みの使い方ができるでしょう。 FiddlyはJ
textlint - playground - Web上でtextlintを試す
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 各種プログラミング言語においてLintツールが存在します。そうしたLintツールを使うと、人に指摘されるよりもストレスが小さく、受け入れやすいと言われています。人だと感情が入りやすいですが、コンピュータだとそういった問題がありません。 今回はプログラミングではなく、テキストに対してLintを実行するtextlintのWeb版、textlint - playgroundを紹介します。 textlint - playgroundの使い方 左側がエディタ、右に指摘事項が並んでいます。 マウスを当てるとツールチップで指摘が確認できます。 ルールをクリックして有効、無効の切り替えもできます。 textlint - playgroundはオンラインで手軽に文章チェックできるのが便利です。デフォ
Papercut - シンプルなデスクトップ用SMTPサーバ MOONGIFT
よくある開発時のミスとして、メールの誤配信があります。メールアドレス確認などでメールを出したいと思ってSMTPサーバを適切に設定してしまったために他の機能のメールまで飛んでしまったりします。メールはしばしば大きな問題になります。 そこで使ってみたいのがPapercutです。ローカルで立てるSMTPサーバです。 Papercutの使い方 メイン画面です。 メールが届くと通知が表示されます。 メールが来ました。残念ながら日本語はコンバートされないようです。 オプションです。 設定です。メールのフォワードができます。 別な送り先に送れます。 開発用SMTPサーバに届いたメールは個人のアドレスに転送させて確認することもできるでしょう。また、URLクリックなどであればそのままPapercut上で十分と言えるでしょう。開発時に用意しておくと便利なソフトウェアです。 PapercutはJavaScrip
Worker DOM - Web WorkerでDOM操作を実現
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5 APIの一つにWeb Workerがあります。通常のWebブラウザ上で動作するJavaScriptとは別で、バックグラウンドで動作するJavaScriptです。時間のかかる処理を行ったりするのに便利ですが、一つの欠点にDOMが使えないという点が挙げられます。 そこで使ってみたいのがWorker DOMです。Web Worker上でDOM操作を可能にします。 Worker DOMの使い方 デモです。ボタンを推した際のイベントでDOMを書き換えます。 SVGの表示もできます。 テーブルの内容を書き換えることもできます。 さらに細かな表示制御も。 Todoアプリのデモもあります。 documentオブジェクトが使える訳ではないので、実際の利用には癖があるようです。とは言え、本
actual-code - コードを実行できるMarkdownエディタ
Markdownは開発者がよく使っているだけあって、内容にコードがよく含まれています。様々な言語が記述されており、そのコードをコピーしてローカルで実行したりすることも多々あるでしょう。 そんな時、Markdown上でコードが実行できれば良いのにと思ったことはないでしょうか。そこで使ってみたいのがactual-codeです。 actual-codeの使い方 左側がエディタ、右側がプレビューになります。JavaScriptが実行され、その結果が表示されているのが分かります。 actual-codeは一見するとMarkdownエディタですが、その中にプログラムの実行機能が備わっています。今のところJavaScriptだけですが、将来的に対応言語が追加されていくと面白そうです。 actual-codeはTypeScript製のオープンソース・ソフトウェア（MIT License）です。 eruki
JavaScriptの概念たち (前編) - Qiita
この記事は JavaScript Advent Calendar 2018 4日目の記事です。 昨日は@sasurai_usagi3さんで「CoffeeScriptからJavaScriptに移行する」でした。栄枯盛衰を感じます。「CoffeeScript」でググろうとしたらGoogleさんが「CoffeeScript オワコン」とサジェストしてきて悲しい気持ちになりました。 明日は@todays-mitsuiさんで「Ramda とか？について」です。 はじめに 今回はGithubの33個のJavaScriptの概念という記事がかなり良記事だったので、その記事に乗っていたサイトたちを元にそれぞれの章の解説を書いてみました。 これらの概念を知らなくてもJavaScriptを書くことは多分出来ると思いますが、知っておくと何かと便利かと思います。 元サイトたちは参考文献に載せておくのでさらに詳しく
Fiddle - すぐにElectronアプリ開発をはじめられる開発環境
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Electronを使えばWindows/macOS/Linuxなどマルチプラットフォームで動作するソフトウェアがHTML/JavaScript/CSSで作成できます。作ってみたいと思いつつも、環境を整える手間で躊躇してしまっている人もいるのではないでしょうか。 そんな方に使ってみて欲しいのがFiddleです。ダウンロードしてすぐにElectronアプリ開発がはじめられるソフトウェアです。 Fiddleの使い方 Fiddleを起動したところです。 開発環境は3ペインになっています。左側にあるJavaScript、右にあるHTMLを編集するのが基本です。 開発したらElectronアプリとして実行できます。各バージョンのElectronがFiddle上で簡単にダウンロードできます。 実
DayDream - ブラウザ操作を記録してPuppeteer/Nightmareの操作スクリプトを作成 MOONGIFT
ヘッドレスなChrome/Chromiumは幾つかありますが、今一番注目されているのがPuppeteerでしょう。理由としては開発しているのがGoogleということで、継続的な開発が期待できる点です。 そんなPuppeteerを操作するスクリプトをGoogle Chrome上で作成できるのがDayDreamです。 DayDreamの使い方 ツールバーにある録画アイコンをクリックすると操作を記録開始します。 できあがるとアイコンにバッジが表示されます。 クリックするとスクリプトが表示されます。 DayDreamはPuppeteerだけでなく、Nightmare向けのスクリプトも作成できます。DayDreamでできたスクリプトを使えば、テストや操作の自動化を簡単に実現できるようになるでしょう。 DayDreamはJavaScript製のオープンソース・ソフトウェア（MIT License）です
Canvas Sketch - ビジネスモデルキャンバスをWeb上で
ビジネスモデルを考える際にビジネスモデルキャンバスを使うと、見逃していた視点を発見したり、相互の関連性を俯瞰的に確認できるようになります。A4の紙を使ってすぐに作れるのも魅力でしょう。 今回はビジネスモデルキャンバスをWeb上で作れるCanvas Sketchを紹介します。Web上であれば何度も書き直したり、共有しやすいと言ったメリットがあります。 Canvas Sketchの使い方 こちらがCanvas Sketchの画面です。 Addをクリックすると入力するダイアログが表示されます。 こんな感じでどんどん書き足していきます。 Canvas SketchはWebブラウザベースなので、紙さえなくとも書き始められたり、保存しておいて何度も修正をかけることができます。変更履歴を取っておくことで、ビジネスモデルの変化や履歴を追いかけると言ったこともできるでしょう。 Canvas SketchはJ
myConsole - スマートフォン向けのJavaScript実行環境 MOONGIFT
JavaScriptの実行環境としてはWebブラウザの開発者ツールがよく使われますが、それはデスクトップにしか用意されていません。タブレットやスマートフォンでちょっとしたJavaScriptを実行したいと思うこともあるでしょう。 そんな時に使えるのがmyConsoleです。Webベース、スマートフォン特化型のJavaScript実行環境です。 myConsoleの使い方 メイン画面です。上にコードを入力し、下に結果が表示されます。 document.write を実行すると画面全体が書き換わってしまうので注意です。 myConsoleでは簡易的にJavaScriptを実行できますが、スマートフォンでコードを入力するのはやはり大変です。その意味ではスニペットをコピーして実行してみるくらいの使い方が良さそうです。 myConsoleはJavaScript製のオープンソース・ソフトウェア（MIT
Vuido - Vue.jsでデスクトップ向けネイティブアプリを開発 MOONGIFT
JavaScriptが多くの環境で動作するようになっています。Webブラウザだけでなく、サーバやスマートフォンアプリなど一つの言語でここまで幅広く動作するものはそうそうないでしょう（特にWebブラウザが問題です）。 そんなJavaScriptを使ってデスクトップアプリを作成できるのがVuidoです。Electronと異なる、ネイティブのデスクトップアプリを作ります。 Vuidoの使い方 VuidoはVue.jsを使います。下のコードはデモですが、確かにVue.jsの書き方です。 <template> <window title="my-project" width="400" height="100" margined v-on:close="exit"> <box> <text>Welcome to your Vuido application!</text> </box> </wind
jsc - Rustで書かれたJavaScriptコンパイラ
JavaScriptを利用できる場面は広がっていますが、実行するためにはJavaScript実行エンジンたるv8などが必要です。また、スクリプト言語なので実行時に解釈されるため、実行速度は若干遅くなるでしょう。 今回紹介するjscはそんな限界を超えるかも知れないソフトウェアです。Rustで書かれたJavaScriptコンパイラーになります。 jscの使い方 サンプルのコードです。main関数を実行します。
pico.js - わずか200行の顔認識プログラム MOONGIFT
画像の中から抽出される情報として、最も多いのは人の顔ではないでしょうか。セルフィはもちろん、集合写真であったり、友達や家族と撮影した写真には必ず顔が存在します。顔を見つけることで、様々な情報と結びつけられるでしょう。 今回紹介するpico.jsは、Webカメラから取り込んで人の顔を認識するコードをわずか200行で実現しています。 pico.jsの使い方 実行中です。顔の部分が赤い円で囲まれます。 ちょっと横を向くと認識が解除されます。 WebAssembly版もあります。こちらはより高速に動作するでしょう。 pico.jsはWebカメラの映像を取り込んで顔の部分を赤く囲むだけのシンプルなプログラムです。しかし、Canvasの画像解析をわずか200行で行っているのが凄いでしょう。200行であれば行っている処理を理解するのも難しくないかも知れません（またはトリッキーなコードで難解かも知れません
オバマやトランプなどインタビュー相手とチャットする感覚で読めるインタビュー記事を作成可能なツール「InterviewJS」
InterviewJSは、インタビュー記事の読者が実際に本人と直接会話しているかのような新しい形のインタビュー記事を作成できるツールです。interviewJSはアルジャジーラによって開発され、Digital News Initiative Fundによって支援されていて、無料で使うことができ、サービスのコードはオープンソースです。 Welcome to InterviewJS https://www.interviewjs.io/ InterviewJSを使えば、ジャーナリストは双方向のやりとりとしてインタビュー記事を構成することができます。InterviewJSで作成されたインタビュー記事の読者は、まるでインタビューの相手と直接チャットで会話をしながらインタビュー内容に触れることができます。また、アカウント登録を行えば、誰でも無料でインタビュー記事を構成することが可能です。 例として、
Slate markdown editor - ホットキーが用意されたMarkdownエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownエディタは数多く存在します。多くは二画面形式になっており、左側がエディタ、右側がプレビューになっています。しかし、この場合は編集している内容とその結果の両方を逐次確認しないといけません。 Slate markdown editorはそういった手間なく、その場で表示に反映されるので初心者にも分かりやすい仕組みになっています。 Slate markdown editorの使い方 Slate markdown editorの画面。左側がエディタ、右側には変換後のHTMLが表示されています。 画像は選択すると削除できます。 新しい画像を埋め込むこともできます。 Slate markdown editorは多数のキーボードショートカットが用意されており、その多くはMarkdo
Swipe-listener - スワイプ操作を検知してイベント実行
スマートフォンのWebブラウザも高速化し、Webアプリケーションを提供するのに躊躇することもなくなってきました。デスクトップ向けのWebアプリケーションがほぼそのまま提供できますが、画面の大きさの問題などもあって多少の工夫が必要です。 そんな中、スマートフォン特有の動きにも気を配る必要があります。今回はその一つ、Swipe-listenerを紹介します。 Swipe-listenerの使い方 表示した直後です。 右からスワイプしたところ。 左からスワイプ。 Swipe-listenerは左右からのスワイプ操作を検知してイベントを実行できます。アプリの場合は進む、または戻るの操作に割り当てられることが多いですが、SPAなどでは独自の工夫が必要かも知れません。そんな時に使えるライブラリです。 Swipe-listenerはJavaScript製のオープンソース・ソフトウェア（MIT Licen
Pennywise - 常に表示しておけるWebブラウザ
仕事をしていて、Webサイトを表示しつつ、その情報を使って作業するというのはよくある光景です。そんな時、ウィンドウを横並びにしたり、都度アプリケーションを切り替えながら作業しますが、とても面倒です。 そこで使ってみたいのがPennywiseです。任意のサイトを表示しつつ、透明度が設定できるWebブラウザです。 Pennywiseの使い方 起動すると、まずURLを入力します。 普通のWebブラウザとして使うこともできますが、あまり機能は多くありません。 常に前面表示にして使うこともできます。 そして透明度の設定もできます。 Pennywiseを使うことで常にWebサイトを表示しながら文書を作ったり、開発を続けられるようになります。参考にするのはもちろんのこと、スポーツのリアルタイム実況を表示したりと使いどころが多そうです。 PennywiseはJavaScript製のオープンソース・ソフトウ
VuePress - Vueを使った静的サイトジェネレータ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 静的Webサイトを生成するツールは多数存在します。多くはHTMLを吐き出すので、それをアップロードします。しかし静的ファイルを使うのでは前時代的なWebサイトと何ら変わりません。 そこで使ってみたいのがVuePressです。Vueを使って静的サイトを構築するソフトウェアです。 VuePressの使い方 サンプルです。 編集すると即座に画面へ反映されます。 見出しを付けたり、絵文字を使ったり。 コードも使えます。 VuePressの魅力は静的サイトでありながらVueによってページのリロードがないことでしょう。そのため、閲覧者がクリックすると、その内容が即座に反映されます。ユーザ体験としては素晴らしいものがあります。コンテンツはMarkdownで作りますので、これまでに作ったコンテンツ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
editableCell - 表計算のようにセル毎に編集/集計 MOONGIFT