macOSを仕事で使う人たちが増えています。しかし日本のオフィスではまだまだWindowsが主流であり、データを相互にやり取りする際に不便を感じることがあります。その一つがZipファイルです。 macOSで作ったZipファイルは日本語ファイル名が文字化けしたり、 .DS_Storeなどの余計なファイルが含まれていることがあります。そこで使ってみたいのがmac-zip-windowsです。 mac-zip-windowsの使い方 普通に圧縮したファイルをWindowsに送った場合。 mac-zip-windowsで圧縮すると、日本語も文字化けせず、余計な不可視ファイルも含まれません。 さらにWindowsで使えない文字がファイル名に使われているとエラーになります。 mac-zip-windowsは普通の圧縮プログラムと同じく、ファイルやフォルダの圧縮に対応しています。Windowsに対して文

Excelを仕事で使っていると、メールでやり取りしたり誤った上書きを避けるためにコピーを作ったりして次第に同じようなExcelファイルに埋もれることになります。二つのExcelファイルを並べて、どこが違うのか見比べた経験は誰しもがあるのではないでしょうか。 そんな方に使ってみて欲しいのがExcelMergeです。Excelファイルの差分チェックツールです。 ExcelMergeの使い方 簡易的なExcelファイルを二つ比べています。 変更されたセル、追加された行などにジャンプできます。 設定で色や動作を変更できます。 ExcelMergeは将来的にマージ機能の実装を目指していますが、現時点では差分表示までとなっています。とは言え、差分が見える形になっているだけで作業負荷は大幅に軽減されるのではないでしょうか。Excelをよく使っている方にお勧めです。 ExcelMergeはWindows用

データベースを使った開発や運用時においてGUIの管理インタフェースが欲しいと思うことは多々あります。特にプロジェクトによってデータベースの種類が違ったり、接続先があちこちに存在するとそう感じるはずです。 そこで使ってみたいのがDBeaverです。多彩なデータベースに対応した管理UIです。 DBeaverの使い方 接続先の選択画面です。PostgreSQL/MySQL/MariaDB/DB2/Oracle/SQL Serverなどの基本に加えてMS Access、infomix、MongoDB、Firebirdなども選択できます。 SSHトンネルに対応しているので本番環境のデータベースも確認できるでしょう。 接続しました。 テーブルの一覧です。 データも確認できます。 ダイアグラムはリレーションなどの関係が分かるようになっています。 DBeaverを入れておけば、大抵のデータベースには接続で

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webの印刷機能は貧弱です。そのため多くのレポートはHTMLではなくPDFなどに出力されます。日本の業務システムは特に印刷内容の細かい制御が求められるのではないでしょうか（経済合理性はさておき）。 もっと手軽に印刷指定を行いたい、という方はGutenbergを使ってみましょう。モダンな印刷を実現するためのフレームワークです。 Gutenbergの使い方 元ドキュメント。 こちらが印刷時。装飾も容易です。 Web表示ではコードやテーブルも簡素ですが、Gutenbergでは綺麗に表示されます。Gutenbergでは印刷時に表示するもの、しないものを簡単に指定できたり、改ページの指定も簡単にできます。Gutenbergを一緒に使えば複雑な印刷指定も容易になるでしょう。 Gutenberg

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上で大量のDOMを表示するのは自殺行為です。Webブラウザの動きがガクガクになったり、フリーズしてしまったりします。そのためページネーションが使われるのですが、業務要件として全データの表示を求められることは多々あります。 そんな時にはscrollMonitorを使ってみましょう。大量のデータであってもスムーズなスクロールが可能になります。 scrollMonitorの使い方 利用例です。実際に表示されているのはこの見えている部分だけで、黄色と紫色の部分は消えたり、新しくDOMに追加表示されます。 見出しを残してスクロールもできます。 scrollMonitorではデータはメモリ上にありますが、それをスクロールにあわせて描画しています。また、不要になった部分は破棄しています。こ

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webフォームにおける入力検証の仕組みは大事です。一度サーバに送信してからエラーを返す方式はユーザのストレスも大きくお勧めしません。サーバ側での入力チェックは必要ですが、ユーザビリティのためにWebブラウザ側でも入力チェックをしましょう。 今回はそんな入力チェックを提供するJavaScriptライブラリ、Hyperformを紹介します。 Hyperformの使い方 利用例です。エラーメッセージをテキストボックスの下に表示します。 パスワードのように二つの入力欄に応じたケースもサポートしています。 チェックボックスが有効な場合だけ入力チェックが行われます。 URLやメールアドレス、時間などのフォーマットに合わせた入力チェックもできます。 エラーメッセージはフォームの上に出すこともでき

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プロジェクト管理なんていうと大げさですが、タスク管理というとちょっと物足りない…そんな規模間の作業は多いものです。何人かで共有する必要はあるのですが、プロジェクト管理としてRedmineなどを導入すると大げさになってしまうというケースです。 そこで使ってみたいのがRibbbonです。職人向けのプロジェクト管理システムと銘打ったソフトウェアです。 Ribbbonの使い方 まずユーザ登録/ログインします。 次にクライアントを作ります。 クライアントを作ったらプロジェクトを作ります。 プロジェクトの初期表示です。続いてタスクを作ります。 タスクはカンバン風の表示になります。 タスクのステータスを移動しました。ドラッグ&ドロップはできない（Safariでは）ようです。 ダッシュボードです。

iframeを使ってWebサイトのコンテンツを埋め込めるサービスが増えています。特に多いのがYouTubeやVimeoなどの動画共有サイトです。埋め込むのは簡単なのですが、厄介なのはコンテンツがレスポンシブでないことです。 ブログなどをスマートフォンで表示すると動画の分だけ表示がはみ出てしまいます。そんな状態を改善するのがReframe.jsです。 Reframe.jsの使い方 Reframe.jsを実行するのは簡単です。以下のコードだけで使えます。 reframe('selector'); デスクトップサイズの場合。 幅を縮めても問題ありません。 Reframe.jsの特徴としては外部のJavaScriptライブラリに非依存ということでしょう。特にブログなどで活躍するのではないでしょうか。またハイブリッドアプリでも使えそうです。 Reframe.jsはJavaScript製のオープンソー

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Electronの利用される場面が広がっています。これまでWebベースで提供されていたものまでElectronを通してデスクトップアプリになっています。従来と逆の流れと言えそうです。 今回はElectronを使ってデータベース（MySQL）管理を実現するElectroCRUDを紹介します。 ElectroCRUDの使い方 まずは新しい接続を作成します。SSHトンネルもできるので、開発時だけでなく利用もできそうです。 プロセス一覧画面もあります。 テーブルのカラム一覧です。表示するものを選択できます。 データ一覧です。 面白いのがウィジェットと呼ばれる機能で、特定のデータを表示しておくことができます。 このようにデータの上に表示しておけます。累計ユーザ数や平均購買額など興味あるデータ

プログラミングはコードを書くだけではありません。時に人が書いたコードを見ることもあります。外部のライブラリを使う際などはコードを閲覧する時間のが長いかも知れません。そんな時に使い勝手の悪いソースコードビューワーはがっかりするでしょう。 そこで使ってみたいのがSource Browserです。.NET系プロジェクトのコードを閲覧するのに使えるソフトウェアです。 Source Browserの使い方 メイン画面です。ファイルが左側にツリー表示されています。 ファイルをクリックするとコードが見られます。 変数にマウスを当てると同じスコープの変数がハイライトします。 定義元にジャンプすることもできます。 検索も可能です。 Source BrowserはC#/VB/MSBuild/TypeScriptに対応しているとのことなので、.NET系プロジェクト向きでしょう。また、サーバはIIS/ASP.NE

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 日本（だけとは限りませんが）の帳票に対するこだわりは異常です。ちょっとしたずれさえ認められなかったり、判子の位置などにこだわったりします。その殆どがこだわったとしても意味のないものです。 同じように感じる人にお勧めなのがInvoice Printerです。定型ですが、とても簡単に請求書が作成できます。 Invoice Printerの使い方 Invoice PrinterはRubyスクリプトです。こんな感じのシンプルな請求書がオブジェクトに値を当てはめるだけで作成できます。 フォントを適用すれば日本語も使えます。 Invoice Printerの良いところはデザインを一切行わないで良いところでしょう。もちろん変更は可能ですが、その場合はデザインを決定しているスクリプトを編集する必要

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近、Webにおけるアクセシビリティという言葉が注目されています。それだけWebが一般化されてきたということでしょう。単純に文字が大きければ良いという訳ではなく、万人にとって使いやすいシステムというのを考えなければなりません。 そのアクセシビリティに注目して作られたモーダルライブラリがModaalです。 Modaalの使い方 Modaalはアクセシビリティの基準であるWCAG 2.0のレベルAAに準拠して開発されています。デモコードです。まずはフォーム。 ブラウザいっぱいに出すこともできます。 画像。この辺りのバツ印の出す場所も大事なのでしょう。 確認モーダル。背景色と前景色のコントラストも大事なのだと思います。 Instagramの表示。 Modaalはiframe/Ajax、単

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 絵文字はここ数年で一気に使われるようになってきました。チャットサービスはもちろん、コメントで使われたり、iOS/Androidのようにキーボードの中で提供されるようにもなっています。コミュニケーションの基本にさえなっていると言えそうです。 そんな絵文字をWeb上で使いやすくするのがEmojiOne Areaです。ぜひ自分のサイトに組み込んでみましょう。 EmojiOne Areaの使い方 デモです。テキストエリア、テキストボックスに絵文字アイコンが表示できます。 右上のアイコンをタップすると一覧が出ますので、ここからアイコンを選択できます。 オートコンプリートもあります。 EmojiOne Areaでは自動補完はしないようにしたり、特定のカテゴリを非表示するようなオプションも指定で

ユーザ向けに使うライブラリを使いたいと思うかどうかは、UIが優れているかどうかに大きく左右されます。特にBootstrapが出てきてから、その傾向が強くなっているように感じます。 今回はReactと組み合わせて使うUIライブラリRebassを紹介します。実に57種類（執筆時点）もある、UIライブラリです。 Rebassの使い方 スクリーンショットを多めに、主立ったUIコンポーネントを紹介します。まずはアロー。 アバター。 ラベル。 ブロック。 引用。 パンくず。 ボタン。 丸形ボタン。 ドーナッツ型。 YouTubeの埋め込み。 フォームもあります。インプット。 パネル。 プログレスバー。 レーティング。 ウィザード風に。 スイッチ。 テーブル。 ツールチップ。 Rebassはこの他にもたくさんのUIコンポーネントが揃っています。これだけあれば、Webサイトを自由に作成できることでしょう。

実際のプロダクトで使われているソフトウェアは実践でもまれている分、より細かなニーズに応えられるようになっています。理想的な形ではなく、より実践的な視点で構築されているものでしょう。 今回紹介するOffice UI FabricはMicrosoftの提供するOffice 365で使われているフロントエンドフレームワークになります。 Office UI Fabricの使い方 Office UI Fabricのデモです。よくありそうな動画一覧画面です。 メニュー表示。 アイコン。 フォーム。 トグル。 テキストフィールド。 テーブル。 パーソナルカード。 写真付きのリスト。 パネル。 より詳細な設定ができるリスト。 カレンダーピッカー。 コマンドバー。 Office UI Fabricはフラットかつ落ち着いた色合いがちょっとだけ使われているといった白い部分がより強調されているフレームワークとなっ

Web APIを使った開発や設定ファイルなどでJSONが使われるケースが増えています。XMLほど冗長的でなく、多数の言語でライブラリが提供されていることが大きいでしょう。 そんなJSONですが、テキストのままでは読みづらく、構造の確認や修正がしづらいといった問題があります。そこで使ってみたいのがWithSchemaEditorです。 WithSchemaEditorの使い方 WithSchemaEditorはElectronで作られたソフトウェアで、マルチプラットフォームで動作します。こちらはメイン画面です。 任意のJSONファイルを指定します。そうするとJSONに合わせて構造が変化します。 リストなども対応しています。 値の変更はJSON構造をベースにしてもできます。 プロパティの表示、非表示も切り替えられます。 JSONはシステムから自動出力するのが基本だと思いますが、その利便性もあっ

スマートフォンはそろそろ頭打ちと言われていますが、タブレットやスマートウォッチなど関連デバイスが増えています。さらにAndroidでは多様性があり、数多くの企業がデバイスを開発しています。 そんな中でスマートフォンアプリであったり、関連ビジネスを企画するさいに使えるデザインテンプレートをFacebookがリリースしました。それがDevicesです。 Devicesの使い方 Devicesでは各データをSketchまたはPNG画像でダウンロードできます。まずはスマートフォン。 スマートウォッチ。 タブレット。 コンピュータ。 ディスプレイもあります。 Sketchでデザインしている方はこれらを使うことで、アプリや関連サービスのデザインが簡単にできるようになるでしょう。企画者であっても画像をスライドや企画書に埋め込むような使い方ができそうです。 DevicesはFacebook製のソフトウェア

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ソーシャルボタンや動画などの埋め込みに際してiframeタグを使うのが基本となっています。iframeの中は別サイトとしてセキュリティも切り分けられている気がするのではないでしょうか。 しかしやろうと思えばiframe内のクリックを検知できるのです。それがjQuery iframe click tracking pluginです。 jQuery iframe click tracking pluginの使い方 この赤い枠やソーシャルボタンがiframeの部分になります。 クリックのタイミングで右上のところにクリックを検知したアラートが出ています。 クリックイベントをクリアすることもできます。 jQuery iframe click tracking pluginを使えばソーシャルボ

多くのWebサービスがデザインテンプレートを公開するようになっています。その恩恵はとても大きく、デザインテンプレートをベースにすれば格好良いデザインのサイトが簡単に立ち上げられるようになっています。 今回はその一つ、BuzzFeedが公開したテンプレートSolidを紹介します。 Solidの使い方 スクリーンショット多めで紹介します。まずはタイポグラフィ。 リスト。 カラーリング。ビビット系の強いカラーリングです。 ボタン。 フォーム。結構シンプルです。 大きさも変更できます。 グリッド。 テーブル。これもまたシンプルです。 ボーダー付きテーブル。 グリッドはレスポンシブ対応です。 レイアウト設定。 マージンもクラスで設定します。 ボーダーのクラス。 画像を丸く表示するためのクラスもあります。 Solidはシンプルなデザインテンプレートですが、色合いは強いものが多くの使われています。Buz

Webベースで業務システムを構築した場合、必ず必要になるのが一覧表です。そして、そこにExcel並の機能が求められます。ソートであったり、フィルタリング、ページネーションが欲しいと要望が出るはずです。 それらを一から自作するのは大変です。そこで今回はjQuery-KingTableを紹介します。 jQuery-KingTableの使い方 jQuery-KingTableのデモです。ページネーション、検索、並び替えができます。 並び替えると小さなアイコンが出ます（今回はGreenの横にアイコンがあります）。 カラーテーマを変更しました。 検索するとヒットした部分がハイライトします。 表示するカラムを絞り込めます。 表示をテーブルではなくカードに変更しました。 さらにパネルにも。 フィルタリング条件の追加もできます。 jQuery-KingTableは多機能なので、業務要件によってはこれで十分