ReLaXed - Web技術からPDFを生成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました PDFを作るのは数年前に比べると、さほど難しくなくなっています。プリンタドライバ形式でPDFを生成するプロダクトは多く、簡単な体裁のものであればすぐに作成できます。 しかし、よりこだわったレイアウトであったり、自動化となると、まだまだ技術が必要です。今回はWeb技術でPDFが作れるReLaXedを紹介します。 ReLaXedの使い方 ReLaXedはコンテンツをPug（かつてのJade）フォーマットで記述します。そしてPDFを生成します。 日本語も使えますが、フォントの指定が必要です。 ReLaXedはPugをテンプレートに採用することで、Webブラウザでの閲覧とPDFによるダウンロードの両方がサポートされます。CSSも使えるので、表示のカスタマイズも容易です。eBookや履歴書、
JavaScriptのイベントをたくさん見られるサイト - 開発時に役立つ。JavaScriptのイベント処理を確認 MOONGIFT
JavaScriptでのアプリケーション開発において肝になるのがイベントのハンドリングです。マウスやキーボード操作などによって多様なイベントが呼ばれます。それらの購読、解除によってアプリケーションを構築するのですが、慣れている人であっても複雑で分かりづらいものです。 どんなイベントがあって、どうデータが送られてくるのかを理解するのに便利なのが「JavaScriptのイベントをたくさん見られるサイト」です。 JavaScriptのイベントをたくさん見られるサイトの使い方 イベントの内容は開発者ツールに出てくるのであらかじめ開いておきます。 例えばスクロールやリサイズイベントで呼ばれているのが確認できます。 マウス系イベント。 フォーム系。 メディア系。動画再生時などにイベントが呼ばれます。 アニメーション。 このサイトではクライアントサイドだけで処理ができるイベントを多数確認できます。似たよ
Stencila - ドキュメントと表計算をシームレスに連携させるオフィススイート MOONGIFT
Pythonを使っている人にとってはお馴染みのJupyter Notebook。コードと文章を一緒に書けるのでプログラミングに関連したコンテンツが見やすくなります。様々な種類の文書を埋め込む際には同様の手法が便利です。 オフィスでよく使われる文書や表計算でも同じことができそうです。それがStencilaです。 Stencilaの使い方 ドキュメントと表計算が一つのドキュメントにまとめられます。こちらはドキュメント。 こちらは表計算。 埋め込むとこんな感じになります。計算式を埋め込むことができます。 グラフも表計算を使って表現できます。 Microsoft OfficeでもOLEを使って連携はできます。しかし元ファイルを移動してしまったらリンクが切れてしまったりします。更新も複数のアプリケーションを使うのが面倒です。Stencilaは一つのファイルとしてまとまっているので、メンテナンスしやす
Simple Keyboard - Web上のシンプルなバーチャルキーボード
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました セキュリティへの意識が高いサイト、例えば銀行などではログイン時にソフトウェアキーボードを提供しています。しかしアルファベットの順番がキーボードと異なるので入力しづらいこともしばしばです。 そこでより本格的なバーチャルキーボードとしてSimple Keyboardを紹介します。日本語入力はできませんが、標準キーボードと変わらず利用できます。 Simple Keyboardの使い方 右側に表示されているのがSimple Keyboardです。あらかじめ用意されているJavaScriptとCSSを読み込むだけで使えます。 ちゃんと文字が入力できます。 Simple Keyboardは大きめのキーボードですが、スタイルシートで調整することもできるでしょう。.comのようなカスタマイズができ
PatternFly - Red Hat製のWeb UIフレームワーク
HTMLは自由度が高い反面、何でも自分でイチから作らなければならないイメージがあります。そのためUI、JavaScriptフレームワークは貴重です。それらを使うことで効率を大幅に高められます。 今回紹介するPatternFlyはUIフレームワークで、Red Hat社によって開発されています。 PatternFlyの使い方 例です。データテーブル。 管理画面。グラフも多数用意されています。 スライダー。 カード。 コメント。 通知。 ウィザード。 グラフ。 フォーム。 日付ピッカー。 テキストボックスフィルター。 パンくず。 ページネーション。 アコーディオン。 アラートとバッジ。 ツリービュー。 PatternFlyはjQueryを使っており、企業などのWebシステム開発において活躍しそうです。ウィジェットやデザインのパターンも多数用意されていますので、管理画面の作成など、様々なシステムに
GUN - 分散型グラフデータベース
グラフデータベースというキーワードが聞かれるようになっています。SNSのようなデータ同士の関連性を管理するような場合に向いており、用途を選ぶデータベースと言えます。有名なところではNeo4jであったり、Amazon Neptuneなどがあります。 GUNもグラフデータベースの一つです。特徴としては分散型、オフラインファーストという点が挙げられます。 GUNの使い方 デモです。分散型なので、二つのデータベースは分かれた存在です。 片方にデータを入れると、他方にも同期されます。 同期しているところです。 GUNは中央サーバがないのでスケーリングが容易になっています。データはWeb Socketを使うことでリアルタイムに更新されます。P2Pなのでネットワークがなかったり、携帯電話が圏外にあっても使えるのが利点となっています。 GUNはJavaScript製のオープンソース・ソフトウェア（ライセン
twentytwenty - 上下または左右で画像を比較
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 二つの画像を見比べて何が違うのか判断するにはどうしたら良いでしょうか。横並びにしてもなかなか分かりづらいかも知れません。逆に変換前後でファイルサイズが軽減されている場合は、見た目が変わっていないことを理解させたいこともあります。 そんな時に使えるのがtwentytwentyです。スライダーを使って左右の画像を差し替えます。 twentytwentyの使い方 基本的な使い方は縦に分かれていて、左右に動かせるものです。 マウスオーバーで前後のラベルが出ます。 上下で変化を見せることもできます。 二つの画像はサイズが同じである必要があるでしょう。そしてスライダーを動かすことで変化している、または変化していないことを確認できます。時々このような表示を使いたくなることがあるので覚えておくと便
docxtemplater - テンプレートからWord/PowerPointファイルを生成 MOONGIFT
エンジニアであってもオフィススイートを使う機会はあります。例えばWordを使ったり、PowerPointでプレゼンを作ったりするでしょう。資料はMarkdownやシステムに入っていて、それを取り出してファイルの内容に埋め込んだりする作業は手間です。 そこで使ってみたいのがdocxtemplaterです。テンプレートされたオフィスファイルを使ってWord/PowerPointファイルを生成します。 docxtemplaterの使い方 デモです。 {} で囲まれた部分がテンプレートとして置き換わります。 繰り返し処理もできます。 状態による分岐処理も。 XMLを埋め込むこともできます。細かい文字装飾はそちらでできます。 テーブルでも繰り返し処理ができます。 リスト。 docxtemplaterではもっと多機能なものはPro版として販売されています。しかし簡易的な文書であればオープンソース版でも
CodiMD - リアルタイムコラボレーション付きのMarkdownエディタ MOONGIFT
Markdownは業務の中でも広く使われるようになっています。個人でメモとして使う範疇を遙かに超えて、Markdownなしでは仕事が回らないというチームすらあるのではないでしょうか。 そんな方達にお勧めなのがCodiMDです。共同編集をサポートしたMarkdownノートアプリです。 CodiMDの使い方 エディタです。2ペインになっています。左側が編集、右側にプレビューが表示されます。 他のブラウザの編集がリアルタイムに反映されます。 画像はドラッグ&ドロップでアップロードされます。 メニューです。プレゼンテーションモードや各種フォーマットでのダウンロードが可能です。 PDFは残念ながら日本語が表示されませんでした（Herokuに日本語フォントが入っていないせいだと思いますが）。 テーブルもサポートされています。 PDFの埋め込み。 MathJax。 Graphvizによるグラフ埋め込み。
Rete.js - ビジュアルプログラミング用フレームワーク MOONGIFT
小学校などの教育でプログラミングが取り入れられるようになります。プログラミングをはじめるにあたって、最初はビジュアルプログラミングが分かりやすいでしょう。例えばScratchなどは有名です。 そうしたビジュアルプログラミング環境を作ることができるのがRete.jsです。 Rete.jsの使い方 ノード同士をつなぎ合わせてプログラミングできます。 線は自由に切り離したり、付け替えたりできます。 キーイベントを取ったりもできます。 Rete.jsはあくまでもベースなので、ノードの中で数値や文字を設定して、次のノードに受け継ぐのは主な役割になります。ビジュアルプログラミングも良いですが、システムのマクロ化などユーザベースでアクション設計を行えるようにするといった使い方もできそうです。 Rete.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 retej
JavaScript初心者にもオススメ！クリーンなコードでHTMLを拡張する「Stimulus」とは？
HTMLやCSSは得意だけれど、JavaScriptは苦手…という方は、多いのではないでしょうか。HTMLやCSSは書き方がある程度統一されていますが、JavaScriptは数えきれないフレームワークやライブラリがあるので、どれを使えばいいのか迷ってしまいます。 そのような方にこそおすすめしたいのが、StimulusというJavaScriptライブラリです。 今回は、*クリーンなコードでHTMLを拡張する「Stimulus」*の概要や基本的な操作方法を紹介します。初心者でも比較的簡単に扱えるので、ぜひ利用してみてはいかがでしょうか。 Stimulusとは？ Stimulusは、世界的なプロジェクトマネジメントツールBasecamp(旧37シグナルズ)を開発しているメンバーによって開発されているフレームワークです。 JavaScriptはフレームワークだけでも、Angular.JSやReac
Dejavu - Elasticsearch用Web UI
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Elasticsearchはオープンソースの有名なデータベースです。MOONGIFTの検索機能でも使っています。細かな条件指定ができるので、検索としてはもちろんデータベースとして使っている人も大勢います。 そんな ElasticsearchのWeb UIとしてDejavuを紹介します。 Dejavuの使い方 トップページです。 クエリを実行できます。 結果を確認できます。 データを選択して削除できます。 DejavuはJSONデータを表形式に並べてくれるので内容が確認しやすくなっています。Webで公開されている Elasticsearchに接続して内容が確認できるので、本番環境にインストールする必要もないでしょう。データが正しく入っているか、確認するのにも便利です。 Dejavuは
GROWI - 情報共有を潤滑にするWikiエンジン
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 社内の情報共有はとても大事です。情報の格差が生まれると、結果にも差が生まれ、社内で壁が生まれていきます。全員が情報をオープンにし、共有しなければなりません。 そのための仕組みとしてWikiを導入するのは良いことです。今回はMarkdownで記述できるチーム用WikiのGROWIを紹介します。 GROWIの使い方 最初にアカウントを作ります。 設定画面です。 ページを作ります。 Markdownで記述します。 テーマを変更できます。 プレゼンテーションモードもあります。 差分を確認する機能。 コンテンツは階層管理されます。 GROWIはLDAP認証にも対応し、社内での利用にも向いています。検索はElasticsearchを用いており、全文検索できます。さらにログインしていないユーザに
electron-recorder - Electronアプリの画面を動画化
Electronを使えばWeb標準の技術でデスクトップアプリを開発できます。しかし、デスクトップのソフトウェアとしてどれくらいのことができるのか気になる人は多いでしょう。 今回紹介するelectron-recorderはElectronでウィンドウのレコーディングを行うソフトウェアです。 electron-recorderの使い方 ウィンドウです。 こんな感じに文字が回転しています。この回転自体はCSS、JavaScriptで行っています。 できあがるのは動画です。こちらはそれをアニメーションGIFにしたものです。 electron-recorderはウィンドウをそのまま刻々と記録して、まとめて動画にしています。Electronアプリの画面操作を記録したり、アプリ上で動画を作成するといった時に使えそうです。 electron-recorderはElectron/JavaScript製のオー
Rabbit Ear - 折り紙をWeb上で表現 MOONGIFT
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 折り紙は日本が世界に誇れる文化です。海外によく見られるペーパークラフトとは異なり、一枚の紙を切らずに折りきるところに折り紙の良さがあります。できあがった形だけを見ると、どう折ったらこうなるのかと疑問に思うことさえあるでしょう。 そんな折り紙をWeb上で表現するのがRabbit Earです。 Rabbit Earの使い方 一例です。折り目を表示し、その結果が右側に表示されています。 この折る部分はマウスで動かせます。 プログラマブルに折り線を記述できます。 マウスクリックで一部分だけ色を変えることもできます。 クリックする度に折れ線が増えていくデモ。 より複雑な折り目、そしてその結果も表現できます。 Rabbit Earを使うことで、例えば鶴のような作品も表現できます。Web上でイン
Secure Spreadsheet - CSV/Excelファイルにパスワードを付与 MOONGIFT
Excelファイルでセキュリティを保ちたい場合にはパスワードをかけておくでしょう。しかしCSVファイルはパスワードがかけられず、平文のままで扱われたりZip圧縮してパスワードをかけられます。 そんな運用に不便さを感じたら使ってみたいのがSecure Spreadsheetです。 Secure Spreadsheetの使い方 Secure SpreadsheetはCSVやExcelファイルに対してパスワードをかけられるCLIツールです。実行するとExcelファイルになります。 $ cat event.csv | secure-spreadsheet --password secret > output.xlsx できあがったファイルを開こうとするとパスワードが聞かれます。 Secure Spreadsheetを使えばファイルのパスワードロックが簡単にできます。CLIなので、バッチ処理でまとめ
ml5js - もっと簡単にWeb上で機械学習を
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 機械学習を試してみたいと思うエンジニアは多数いるでしょう。しかし、その環境を作ったり、データ整備するのに時間がとられるとあって、躊躇してしまっている人も多いはずです。 そんな方にお勧めなのがml5jsです。Webブラウザ上で動かせますので、開始までの敷居は低いはずです。 ml5jsの使い方 デモが幾つもあります。まずは写真に写っているオブジェクト（今回はコマドリ）を特定するデモ。 Webカメラの映像からでも読み取ります。 携帯電話も認識します。iPodと出ることもありました。 テキストを生成するデモ。 記述した文脈を読み取りつつ、その後の文章を生成するデモ。 元の写真を別な写真風に描くデモ。 雰囲気がぐっと変わります。 もちろんこれもWebカメラの映像でも使えます。 顔などの特徴点
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Popcode - 学生向けのWeb開発/実行環境 MOONGIFT
QiitaPolice - Qiitaのコンテンツに対してスパム判定
Yett - JavaScriptの自動実行をブロック
