Site.js - 静的/動的サイトまでこなせるJavaScriptフレームワーク MOONGIFT
最近は静的サイトフレームワークが多数出てきています。確かに便利なのですが、拡張していく中でダイナミックな部分が欲しくなることもあるでしょう。そんな時に別途APIサーバを立てるのも面倒です。 そこで使ってみたいのがSite.jsです。静的サイト開発から動的サイトまでこなせるJavaScriptフレームワークです。 Site.jsの使い方 こちらは最低限のWebサイト。 スタッツとしてアクセスを見られる機能もあります。 Site.jsはsiteコマンドを使ってベースになる静的サイトを作ったり、開発用サーバを立ち上げることもできます。ダイナミックな処理もJavaScriptで書きますが、コード量は最低限です。WebSocketも利用できます。 Site.jsはJavaScript製のオープンソース・ソフトウェア（GNU Affero General Public License）です。 Site
listmonk - 自分で立てるニュースレター/メーリングリストシステム MOONGIFT
メールマガジンを備えたWebサービスは多数あります。ソーシャルサービスがこれだけ流行りつつも、ビジネスで効果が大きいのはメールマーケティングだったりします。その管理するSaaSは多いですが、セキュリティ上の理由で自社管理しているところも多いでしょう。 外部サービスから移行したい、これからメーリングリスト、ニュースレターシステムを立ち上げるという時にはlistmonkを使ってみてはいかがでしょう。 listmonkの使い方 管理画面です。見やすいデザインです。 購読者の一覧です。 メールのテンプレート。 テンプレートの編集画面。 listmonkは購読を自動化するフォーム生成機能はないようです。つまり元になるデータは別にあり、それをインポートして使います。リンククリックの測定があるのでインターネット上に立てる必要があります。自社のCRMなどと組み合わせて運用するのが良さそうです。 listm
photoEditor - Webブラウザ上で画像編集
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webアプリケーションでできることの幅が広がっていますが、最近ではさらにWebブラウザ上だけでできることも広がっています。Webブラウザ上のJavaScript、ワーカー、WebAssemblyと機能が拡充しています。 今回はphotoEditorを紹介します。クリック一つで画像を加工できる、そんなWebアプリケーションです。サーバサイドは使っていません。 photoEditorの使い方 写真を開きました。元写真は友情 楽しい バックライト · Pixabayの無料写真より。 回転したり。 アスキーアート化も。 photoEditorは画像をCanvas上に読み込んで、それを加工しています。一部の加工はできず、画像全体に反映されます。ボタン一つで加工できるというのが手軽で使いやすい
Polar Bookshelf - WebサイトとPDFを管理する個人用ナレッジリポジトリ MOONGIFT
コンテンツをPDFで提供するケースは増えています。製品の取扱説明書、電子書籍、ヘルプドキュメントなどコンテンツは様々です。フォルダを作ってPDFを保存している人も多いでしょう。 そんな方にオススメなのがPolar Bookshelfです。PDFおよびWebコンテンツを蓄積するためのソフトウェアです。 Polar Bookshelfの使い方 メイン画面です。 Webサイトを取り込みます。 取り込んだらリストが更新されます。 PDFも取り込めます。 表示を変更した場合です。 Polar Bookshelfは内部的にはPDF.jsを使ってPDFを表示しています。速度的には特に問題ないと感じます。現状はPDFのみですが、JavaScript製のePubリーダーもあるので、電子書籍を管理するのも難しくはないでしょう。PDFを社内で多用していたり、自分のローカルにあるという人は使ってみてください。 P
Raneto - Markdownベースのナレッジベース MOONGIFT
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 開発者向けのサービスを提供する場合、ドキュメントは必須と言えます。しかも見やすく、分かりやすいドキュメントになっていなければなりません。それでいて、メンテナンスしやすいなど条件が様々にあります。 今回紹介するRanetoはMarkdownベースのナレッジベースになります。社外向けのみならず、社内向けにも使えそうなソフトウェアです。 Ranetoの使い方 インデックスです。カテゴライズされているので分かりやすいです。 ドキュメント表示画面です。左側にメニューが表示されます。 ハイライトなどもあります。 RanetoはMarkdown記法で文書を記述して、Webブラウザ向けに表示されるソフトウェアです。インデックスを見る限り、構造化されたドキュメントを書くのに向いていそうです。FAQで
RTP.PinchZoom.js - 画像をピンチ操作で拡大 MOONGIFT
スマートフォンアプリでよく使われるのがピンチ操作です。複数指を使って操作することで、デスクトップではできなかったような操作が可能になります。より直感的で、誰でもすぐに使いこなせるのも利点です。 そんなピンチ、ズームと言った操作をWeb上でも使えるようにするのがRTP.PinchZoom.jsです。 RTP.PinchZoom.jsの使い方 デモです。カエルの写真です。 ピンチ操作で拡大できます。別なDOMは拡大されていません。 二本指でドラッグもできます。 操作性としてはWeb版のGoogleマップ操作に近いように思います。スマートフォンは画面が小さいので、大きな写真を表示した際にピンチ操作によるズームは便利そうです。他のDOMもまとめて全体が拡大されてしまうのとは異なる動きになります。 RTP.PinchZoom.jsはJavaScript製のオープンソース・ソフトウェア（MIT Lic
Kopano - メール/カレンダー/ストレージなど機能十分なグループウェア MOONGIFT
グループウェアは企業の基盤です。メールやカレンダー、アドレス帳など企業活動で必要になるデータがすべてそこに集結されます。サイボウズ、Google Apps、Outlookなどソフトウェアは違えど、グループウェアを使っている企業は多いでしょう。 しかしどのグループウェアも手に馴染まない…そう思う方はKopanoを試してみましょう。 Kopanoの使い方 まずはWeb版。メール機能。 メール 新しいメールを作る画面です。 メール作成画面 カレンダー。週表示です。 カレンダー こちらは月表示。 月表示 アドレス帳。 アドレス帳 タスク管理。 タスク管理 ノート。 ノート ファイルストレージ。 ファイルストレージ デスクトップ版もあります。 デスクトップアプリケーション Kopanoで用意されているのはメール、カレンダー、アドレス帳、タスク管理、ノートそしてファイルストレージです。さらにWebミー
Docusaurus - Facebook製のオープンソース・ドキュメントサイト MOONGIFT
開発ドキュメントの整備は大きな問題です。ソースコードに書かれたりWikiや何らかのCMSを使ったりと様々な方法がありますが、これといった解決策はなかなか見つけられません。 そこで使ってみたいのがDocusaurusです。Facebook製のオープンソース・ドキュメントサイトです。 Docusaurusの使い方 メインページです。 文書はMarkdownで作成します。 ドキュメント部分です。左側に目次、右側にコンテンツが表示されます。 リンクはページ下に付きます。 DocusaurusのコンテンツはMarkdownとなっています。それだけにメンテナンスが容易です。また、UIはReactで作られていますので、表示が高速に行われます。オープンソースのプロジェクトに最適なドキュメント管理かも知れません。 Docusaurusはnode/JavaScript製のオープンソース・ソフトウェア（MIT
Commento - 自分で立てるコメントシステム
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ブログやニュースサイトなどコメント機能が欲しくなることは多々あります。しかし静的サイトにおいてコメントシステムのために全体をプログラマブルにするのは面倒です。そこで使えるのが外部のコメントサービスです。 有名なところではFacebookのコメントやDisqusなどがあります。もし自分で構築したいならばCommentoを使ってみましょう。 Commentoの使い方 デモです。コメントボックスが上にあります。 画像や簡単なMarkdown記法が使えます。 コメントには返信できます。 Commentoはユーザ登録がないのが利点です。また、外部サービスではありがちなトラッキングがないのも利用者にとって利点でしょう。コメント機能としてはシンプルなものですが、十分ではないでしょうか。 Comm
Megadraft - Draft.JSをベースにしたリッチテキストエディタ MOONGIFT
Facebookが開発している、WYSIWYGエディタのベースになるDraft.JSというソフトウェアがあります。Draft.JSを使うことで効率的に非開発者でも使いやすいエディタが開発できます。 今回はDraft.JSをベースとして、さらに拡張性を高めたMegadraftを紹介します。 Megadraftの使い方 デモです。リスト表示の例。 それぞれ編集、削除できます。 新しいリストの追加もできます。 画像や動画を埋め込んだりすることもできます。 Megadraftはユーザビリティ高く、プラグインによって拡張可能なライブラリとなっています。何でも作れると言うよりも、プラグインでテンプレートを作ることで、ユーザは特定のフォーマットに沿った入力を簡単にできるようになるというもののようです。 MegadraftはReact/JavaScript製のオープンソース・ソフトウェア（MIT Lice
adsenseLoader.js - AdSenseをレスポンシブWebデザインに対応させる MOONGIFT
Webサイトの収益増加のためにAdSenseを使っている方は多いでしょう。そんなAdSenseの欠点として、レスポンシブでないという点があります。モバイル用とデスクトップ用で分けなければならず、運用が面倒に感じている方も多いでしょう。 そこで使ってみたいのがadsenseLoader.jsです。これだけ入れればAdSenseが自動的にレスポンシブになります。 adsenseLoader.jsの使い方 遅延読み込みなので、最初はLoadingになります。 そして画面幅に応じて最適なサイズの広告が表示されます。 幅を縮めるとそれに合わせて広告も読み直されます。 スマートフォンサイズでもちゃんと表示されます。 adsenseLoader.jsを入れておけばブラウザの幅に関係せず最適な広告が表示されるようになります。AdSenseのせいで横にスクロールが発声してしまったりすることがあるのであらかじ
excel-to-markdown - Excel仕様書をMarkdownに
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 日本では（海外は知りませんが）なぜかExcelがワードプロセッサ代わりに使われます。特にシステム開発の現場で広く使われる傾向があるようで、テスト仕様書ならまだしも、基本設計書などもExcelで作られたりします。 検索性は低いですし、メンテナンスも面倒です。そこで使ってみたいのがexcel-to-markdownです。 excel-to-markdownの使い方 excel-to-markdownのヘルプです。 -i と -o オプションでExcelファイルがあるディレクトリとMarkdownファイルへの変換後のディレクトリを指定します。 $ ./excel-to-markdown -h NAME: excel-to-markdown USAGE: excel-to-markdown
qbrt - Geckoエンジンを使って特定サイトだけ立ち上がるアプリを生成 MOONGIFT
ElectronはWeb標準の技術を使ってデスクトップアプリケーションが作れるとあって人気があります。とは言え、よく使われるのはWebサイトのガワアプリで、特定のサイトだけ使える点においてセキュリティ上のメリットがあります。 そんなガワアプリをコマンドラインで作れるのがqbrtです。さらにレンダリングエンジンとしてWebKitではなく、Geckoを採用しているのが特徴です。 qbrtの使い方 例えば以下のように実行します。 qbrt run https://www.moongift.jp/ そうすると指定したサイトだけを表示して立ち上がります。 qbrt package url と実行するとアプリが作れます。これで特定のサイトだけが利用できるアプリが作られます。悪意あるサイトに情報を吸い取られる心配も減りますし、常時立ち上げておくサイトを指定しておくとWebブラウザを安心して再起動できるで
Agorakit - 市民のためのグループウェア
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました グループウェアと聞くと社内で使うイメージがありますが、情報を一元管理するという意味で考えると決してビジネスだけのものではありません。グループができたら、その情報をまとめるのはグループウェアなのです。 今回紹介するAgorakitはまさにそんなコンセプトのソフトウェアです。ビジネスではなく一般市民のためのグループウェアです。 Agorakitの使い方 基本的にグループがあり、その中に多くの機能が入っています。こちらは全グループ一覧。 グループ詳細。 メンバー一覧。 ディスカッション。掲示板機能です。 さらにディスカッションの詳細。 カレンダー。 ファイル。 マップ。 Agorakitはミートアップや小さなユーザグループがみんなで楽しむための機能が詰まっています。イベントの告知をしたり
Raneto - node製/Markdownのナレッジベース MOONGIFT
企業のWebサイトなどでよく見られるのがナレッジベースです。FAQ的なものですが、検索がついていたりカテゴライズもされていて、より洗練されたものとなっています。 今回はそんなナレッジベースを作成するためのソフトウェア、Ranetoを紹介します。 Ranetoの使い方 インデックスです。カテゴリ毎にタイトルが並んでいます。 詳細です。左側にインデックスが並びます。 管理者としてログインしました。見た目は特に変わりません。 編集画面です。フォーマットはMarkdownとなっています。 メタデータの編集もできます。 日本語も利用できます。 新しいページの作成も可能です。 Ranetoを使うとユーザ向けによくある質問集をまとめて管理できます。これは社外はもちろん、社内でも使ってみても良さそうです。まずセルフサポートできる形にすれば、より解決が早くなるでしょう。 Ranetoはnode/JavaSc
Publii - 静的Webサイトを構築するGUIアプリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 静的なWebサイトを構築するフレームワークは多数あります。その多くはコマンドラインのもので、サイトをプレビューしながら開発していくものではないでしょうか。開発者にとっては使いやすいですが、普通の方にはちょっと使いづらいと感じるかも知れません。 そこで使ってみたいのがPubliiです。GUIアプリケーションな静的サイト構築ソフトウェアです。 Publiiの使い方 最初にWebサイトを作ります。 記事を書きます。画像アップロードもできます。 WYSIWYGなので分かりやすいです。 メニューなども作れます。 サーバの設定をします。FTP、SCP、Amazon S3、GitHub Pagesなどがアップロード先に指定できます。 設定も多数あります。 Publiiを使えば簡単にサイトを構築し
Sirius UI - Bootstrap/Vue.jsを組み合わせたUIデザインテンプレート MOONGIFT
UIライブラリは幾つ知っておいても役立つものです。Webサイトの雰囲気に合わせてピックアップしたり、機能によって差別化もできるでしょう。すべての要件を一つのUIフレームワークで達成できる訳ではありませんので、色々知っておくとぴたりと当てはまる場面があるはずです。 今回はSirius UIというUIフレームワークを紹介します。多数のUIコンポーネントが提供されています。 Sirius UIの使い方 スクリーンショット多めで紹介します。まずはボタン、ラベル、バッジ、フォーム、アラートなど。 ナビゲーション、ドロップダウン、テーブル、ページネーションなどが提供されています。 ログインのモーダル実装例。 タブとイメージ、カルーセル。 トップページ風レイアウト。 機能一覧風。 フッター。 Sirius UIのベースはBootstrapとなっており、さらにFlexboxとVue.jsを組み合わせていま
Flarum - PHP製。すっきりしたデザインのフォーラム MOONGIFT
インターネットの基本とも言えるのがフォーラムや掲示板と言われるサービスです。これによって双方向性のコミュニケーションが生まれました。元々ニュースサーバにつないで読み書きしていましたが、徐々にWebブラウザ上で行うのが主流になっていきました。 そんなフォーラムシステムの最新版としてFlarumを紹介します。多彩な機能を持った掲示板ソフトウェアです。 Flarumの使い方 トップページです。スレッドが並んでいます。 スレッド詳細です。 コメントが並んでいます。 カテゴリによって色が違います。 ログインはソーシャルサービスが使えます。 新しいスレッドを立てる場合の入力フォームです。 コメントフォームです。 Flarumは拡張性を持ち、テーマを変えることでデザイン変更も可能です。さらにリアルタイムに更新される仕組みだったり、通知を使って参加者がコミュニケーションを取りやすくする仕組みを提供していま
share-this - Medium風にテキストをシェアする
オンラインのコンテンツはシェアされることで広まっていきます。Facebook、Twitter、Redditなど様々なサイトでシェアされ、さらに拡散されていきます。しかしシェアするというのも多少なりとも面倒なものです。 そこで使ってみたいのがshare-thisです。Webサイト内に仕込んでおくことで、シェアが手軽になります。 share-thisの使い方 使っているところです。文字列を選択すると、上からツールチップが下りてきます。 後はサービスを選択すると、ウィンドウが開いてシェアできます。Twitter、Facebook、Redditといったサービスに加えて、コメントを書くこともできます（右端）。 そしてコメントを残しておけます。 share-thisではこの他、選択した文字を読み上げる機能もあります。アイディアはMediumからきています。コンテンツをどんどん拡散してもらうためにも使っ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Akwaba - Notionをバックエンドにしたコメントシステム MOONGIFT