最近のWebフロントエンドフレームワークでは、デザインとコードの分離ではなく、画面の役割をもって分離しています。そのためデザインとコードが一つのコードの中にあり、デザイナーにとっては慣れるまでデザインしづらいと感じているかも知れません。 もしReactで開発しているプロジェクトならば、Utopiaを使ってデザインしてみると良さそうです。 Utopiaの使い方 エディタ画面です。 ストーリーボードなる機能もあります。 コードエディタです。左側にはファイルツリーがあります。 コンポーネントの構造も可視化されます。 マウスで選ぶと選択されているコンポーネントが斜線されます。 ズーム表示もできます。 Utopiaはコンポーネントを変更したり、右側にあるプロパティを変更することでリアルタイムにデザインを確認できます。Visual Studio Codeとデザインプレビューが組み合わさった形になります

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 昔と違って最近ではPDFを作成するのは難しくなくなっています。WindowsでもOfficeにPDF出力があり、WordやExcelを簡単にPDF化できます。しかしファイル一つずつ実行する必要があるのが面倒です。 そこで使ってみたいのがOfficeToPDFです。CUIで使えるオフィスファイルのPDF化コマンドです。 OfficeToPDFの使い方 日本語のWordファイルでもPDF化できます。 コマンドは次のようになります。 officetopdf.exe somefile.docx somefile.pdf OfficeToPDFはOfficeに実装されているPDFエクスポート機能を使っているので、日本語でも問題ありません。対応ファイル形式もExcel/Word/PowerPo

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Windowsのスクリーンショット機能は実は多彩です。ただ色々ありすぎて、個人的にはPrintScreenボタンで済ませてしまいます。これでは画面全体がクリップボードに入るので、余計な情報が増えてしまいます。加工も面倒です。 そこで使ってみたいのがYakitoriです。Windows 10のスクリーンショット撮影を補助してくれます。 Yakitoriの使い方 メイン画面です。ボタンでスクリーンショットを実行できます。 左上にカウントダウンが表示されます。 領域のスクリーンショットも簡単です。 ジャンプリストから呼び出せるのですぐに使えます。 Yakitoriは一般的にキーボードショートカットで呼び出す機能をクリックでできるようにしています。時々しか使わないショートカットを覚えるのは

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました パソコンでTwitterをディープに楽しんでいる人は、大抵TweetDeckを使っているようです。複数のカラムを使いこなし、さらに複数アカウントを上手に管理しようと思うとTweetDeckは使い勝手がいいでしょう。しかしスマホには対応していません。 そこで使ってみたいのがMTDeckです。TweetDeckをスマホ対応のデザインに変換するUserScriptです。 MTDeckの使い方 Androidの場合、KiwiBrowserを利用します。 インストール後にTweetDeckを見ると、一番左にあるカラム情報が下に並んでいます。 検索結果も使えます。 アカウントプロフィール。 MTDeckはTweetDeckをそのままスマホ対応させるUserScriptなので、デザインが大幅に変

複数あるファイル名をまとめて変換したいと思うことはよくあります。macOSの場合、Finderの一機能としてファイル名の置換が行えます（機能は限定的ですが）。Windowsの場合、一つずつ変更しなければいけません。 今回紹介するSmartRenameはExplorerに統合されたバッチファイル変更ソフトウェアです。 SmartRenameの使い方 ファイルを選択して、コンテクストメニューからSmartRenameを呼び出します。 変更画面です。条件が細かく指定できます。 変更後の名前も確認できます。 SmartRenameは選択したファイルとフォルダ、そしてフォルダ内のファイルを対象として名前の変更ができます。単純に置き換えることも、正規表現を使うこともできます。拡張子の変更もできるので、幅広い用途で使えるでしょう。 SmartRenameはWindows用、C++製のオープンソース・ソフ

XcodeはiOS、macOSアプリの開発に欠かせないIDEです。各iOSのバージョンによって利用できるXcodeが限られており、プロジェクトによっては古いXcodeで開発しなければならないこともあるでしょう。 そんな時に使えるのがXcodeUpdatesです。古い（または新しい）XcodeをGUIベースでインストールできます。 XcodeUpdatesの使い方 最初にAppleへのログインが必要です。 すべてのバージョンのXcodeが一覧されます。 バージョンを選ぶとインストールボタンが表示されます。 インストール中…。 インストールできればxcode-selectでバージョンを切り替えられるでしょう。古いXcodeはAppleのWebサイトにいけばダウンロードできますが、XcodeUpdatesならばもっと手軽にインストールまで完了します。iOS/macOSアプリ開発者にとって便利なソ

nodeを使って作られたツールが増えています。npmでインストールすればいいのですが、node自体のバージョンアップも激しく、追従するのも大変です。開発者であれば構わないでしょうが、開発者以外の方がnodeをセットアップして使い始めるのはちょっと敷居が高いです。 そこで使ってみたいのがboxednodeです。boxednodeを使えばnodeの実行エンジンとJavaScriptファイルをまとめてパッケージしてくれます。 boxednodeの使い方 パッキングする際のコマンドです。 $ boxednode -s example.js -t example パッキングしたら実行権限が付いているので、そのまま実行できます。 $ ./example こんにちは、世界！ boxednodeはnodeのコンパイルから実行するので、バイナリができあがるまでに時間がかかるのが難点です。なおバイナリサイズは

表示されているCSSの内容を確認する際には開発者ツールを利用するでしょう。しかし、情報が多すぎて分かりづらかったり、スタイルをコピーすると余計な情報もたくさん付いてきたりします。 そこで使ってみたいのがCSS Spiderです。開発者ツールよりも使いやすく、分かりやすいスタイルチェッカーです。 CSS Spiderの使い方 利用しているところです。マウスオーバーでスタイル設定が表示されます。 表示されている内容を変えると、その場で反映されます。 大きさが分かったり、コピーもできます。 CSS Spiderを使うことで、画面上の要素についてスタイル設定がすぐに分かります。情報量も適度で、デフォルトのものは含まれません。Google Chrome機能拡張なので、インストールしておくと役立つ場面が多そうです。 CSS SpiderはGoogle Chrome用のソフトウェアです。 CSS Spi

Webサイトのスクリーンショットを撮る際にはどうしているでしょうか。ドキュメントやヘルプ、スライドなどスクリーンショットが必要になる場面は実に多いです。ブラウザをそのままキャプチャしてもよいですが、個人の機能拡張など余計な情報が入ってしまいます。 今回紹介するScreenshoteerはスクリーンショットが取得できるCLIコマンドになります。 Screenshoteerの使い方 標準で実行すると、全体が取得できます。 スクロールをなしにする指定もできます。 PDFで保存も可能です。 ScreenshoteerはレンダリングエンジンとしてChromiumを使っています。ヘッドレスで動かして、その内容を画像やPDFで保存しています。ウィンドウの情報は載らないので、使いやすいスクリーンショットが撮れることでしょう。 Screenshoteerはnode/JavaScript製のオープンソース・ソ

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web検索エンジンといえば、Googleを思い浮かべる人が多いでしょう。プライバシーを気にする人の中にはDuckDuckGoを使っている人もいます。その他のサービスではこれらの検索エンジンを使っていることが多いので、結果は同じようなものになります。 しかし自分のデータをトラッキングされたり、内部で行っていることが不明確なことに不安を覚える人もいるはずです。そこでオープンソースなWeb検索エンジン、Infinityを紹介します。 Infinityの使い方 Web検索の他、画像や動画検索もできます。 日本語はインデックス化されていない模様です。 動画も検索できます。 Infinityタブでは、インデックス化されていない、リアルタイムなデータが表示されます。 Infinityはサーバ側、

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 世の中にはたくさんのチャートが存在します。ただ数字を並べるだけでは分かりづらく、可視化することでトレンドが見えたり、全体の雰囲気を学べるようになります。さらに一回表示するだけでなく、変化をアニメーション化することで、よりダイナミックな変化を掴めるチャートになります。 今回紹介するbarchartraceは横棒グラフでアニメーションするライブラリになります。 barchartraceの使い方 プログラミング言語ごとのStack Overflowの質問数グラフ。どのプログラミング言語に勢いがあるか分かりますね。 コロナウイルス（COVID-19）の国別感染者数。アメリカが一気に増えているのが分かります。 barchartraceのようにアニメーションさせることで、どのデータが一気に伸び

JSONがWeb APIのフォーマットとして使われるようになり、複雑なデータも作られています。そうした内容を確認する際に開発者ツールは便利です。一部だけ展開したり、折りたたんだりできます。 そんなJSON閲覧機能をWebブラウザ上で実現するのがObject Visualizerです。 Object Visualizerの使い方 使っているところです。クリックで折りたたみ/展開できます。 巨大なJSONでも分かりやすく閲覧できます。 Object Visualizerを使えば開発者ツール相当のJSON閲覧機能が提供できます。これは開発者向けのサービスを提供している場合に役立つでしょう。デバッグなどでJSONデータを閲覧する際に使えるはずです。 Object VisualizerはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 Object Visuali

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました システム開発時において、データベースは要になります。アプリケーションサーバのフレームワークなどは変更したとしても、データベースのスキーマはなかなか容易に変更できるものではありません。 途中からメンバーが入ってきたりすることもあります。データベースの定義はメンバー全体できちんと把握できているのが望ましいでしょう。そこで使えるのがMySQLSchemaDocです。 MySQLSchemaDocの使い方 表示例です。左側にテーブルの一覧、右側でその構造を表示します。 絞り込みもできます。 テーブル名も絞り込んで表示できます。 MySQLSchemaDocが面白いのは、その表示をXSLTで行っていることです。MySQL標準のダンプを使ってスキーマをXMLで出力し、それをXSLTで表示してい

スクリーンショットをそのまま貼り付けるだけでは芸がありません。そこには余計な情報も入ってしまっているかも知れませんし、アイコンなどを消したいと思うこともあります。 そんな時に使ってみたいのがScreenshot.Rocksです。Webブラウザのモックアップを使ったスクリーンショットを作成します。 Screenshot.Rocksの使い方 適当な画像をアップロードすると、Webブラウザっぽい枠を表示します。 上に載せる情報は自由にカスタマイズできます。 さらに背景色を変更しました。 できあがった画像はダウンロードできます。 Screenshot.Rocksを使えばPhotoshopなどで作ったWebサイトのデザインをモックアップのWebブラウザ枠で囲めます。自分のWebブラウザでは機能拡張のアイコンや、アドレスバーのURLなど載せたくない情報になっていることもあるでしょう。Screensho

Webアプリケーションやスマートフォンアプリの開発時に、ネットワークのやり取りを確認したいことがあります。その手のソフトウェアとしてCharlesが知られていますが、有償であるために避けている人もいるかも知れません。 そんな方に使ってみて欲しいのはLightProxyになります。Charles同様、ネットワークをキャプチャするWeb開発用プロキシです。 LightProxyの使い方 メイン画面です。hosts風にネットワーク設定を変更できるようです。 キャプチャしている内容です。 HTTPSの場合は専用の証明書を組み込みます。 一点注意点があるとすれば、CharlesもLightProxyもHTTPSのキャプチャにルート証明書を入れるということでしょう。そしてLightProxyはAlibaba製であるという点に注意してください。セキュアなネットワークでもキャプチャできるようになりますので