pipe2excel-CSVを文字列として安全にExcelで開く
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました CSVファイルをExcelなどの表計算ソフトウェアで開こうとして嫌になるのが、勝手に数値や日付などをコンバートしてしまうことです。それが嫌な場合はExcelを立ち上げてインポートにしなければなりません。 そんな嫌な思いをしてきた人に使ってみて欲しいのがpipe2excelです。CSVを送ってExcelで開いてくれる便利ユーティリティです。 pipe2excelの使い方 例えばこんなCSVがあったとします。これをそのままExcelで開くと勝手にコンバートされます。 0001,=1+1,03,4,5/2 "hogeohg 2",5555,3,"1st “ú–{Œê 2nd 3rd 4th" そこでpipe2excelを通して開きます。そうするとすべて文字列として送られます。 pipe2
http-live-simulator - レスポンスの遅延が体験できるHTTPサーバ
開発時には気付きづらく、リリースした後に実際のユーザ環境で試してはじめて分かることはたくさんあります。例えばネットワーク環境です。モバイル通信は予想よりも遅かったり、負荷によってサーバのレスポンスが低下したりします。 http-live-simulatorは開発用のHTTPサーバですが、レスポンスがランダムに遅延するという特徴を持っています。 http-live-simulatorの使い方 インストールはnpmで行います。 npm install -g http-live-simulator 実行すると 8080番ポートでサーバが立ち上がります。 $ http-live http-live-simulatorはアクセスごとに200〜500msの遅延が生じます。単純に速度が遅くなるだけではないので、ライブラリやリソースの読み込み状態によって表示に影響が出るのが確認できるかも知れません。こうし
WinDynamicDesktop - macOSのダイナミックデスクトップをWindowsに移植
新しいmacOS、Mojaveではダイナミックデスクトップという機能があります。これは時間に合わせて壁紙やステータスバーなどの色を変化させる機能です。より自然で、目の疲れを軽減する効果もありそうです。 そんなダイナミックデスクトップをWindowsで実現するのがWinDynamicDesktopです。 WinDynamicDesktopの使い方 最初にロケーションを設定します。 設定しました。 昼間の表示。 夜の表示。 WinDynamicDesktopではステータスバーなどは特に色は変わらないようです。ブルーライト軽減ライブラリと組み合わせたりするとより効率的でしょう。壁紙を何枚も組み合わせて実現しており、同じように壁紙を用意すれば自作のダイナミックデスクトップが実現できます。 WinDynamicDesktopはC#製のオープンソース・ソフトウェア（MIT License）です。 t1
mkcert - ローカル開発でもSSL/TLSを MOONGIFT
セキュリティ対策もあって、インターネット上のサーバではSSL/TLSを使って公開するのが当たり前になっています。しかし開発時にはローカルでHTTPを使っていたりしないでしょうか。そのため、設定などを切り替えたりして開発せざるを得ず、さらに公開時には不具合に繋がったりします。 そこで使ってみて欲しいのがmkcertです。ローカル開発環境でもHTTPSを使えるようにするソフトウェアです。 mkcertの使い方 まずインストールを使って証明書をインストールします。 $ mkcert -install 次にドメインを指定して証明書を生成します。 $ mkcert example.com '*.example.org' myapp.dev localhost 127.0.0.1 ::1 そうするとWebブラウザからHTTPS経由でアクセスできます。 mkcertで生成した証明書はApacheやngi
jquery.dgtable - 高パフォーマンスなテーブルライブラリ MOONGIFT
社内システムにおいて、検索結果の一覧表示はよくある機能です。100行程度のデータであれば問題ありませんが、10万行をHTMLで出力するとなれば表示方法を考えなければなりません。レンダリングだけで数分待たされていたら、担当者はストレスを感じることでしょう。 今回は大量のデータ表示を行う場合に使えるjquery.dgtableを紹介します。 jquery.dgtableの使い方 jquery.dgtableは特に表示やスクロールのパフォーマンスに重点を置いています。 複数カラムを指定したソートにも対応しています。 jquery.dgtableは100万行くらいの表示であれば難なくこなします。さらにソート、カラムの移動や幅の変更、マウスオーバーですべてのデータ表示といった機能があります。多機能ではありませんが、大量のデータを表示する際には導入検討したいライブラリです。 jquery.dgtabl
VBA-Web - VBA用のWebライブラリ
今はWeb APIやRESTfulといったキーワードを無視できなくなっています。それはExcelやAccessでも同じです。しかしVBAでやったことがある人は分かりますが、XML HTTP Requestで作るのはなかなか面倒です。 そこで使ってみたいのがVBA-Webです。VBAがインターネット上のリソースとデータの送受信をするのに最適なライブラリです。 VBA-Webの使い方 例えばGoogleマップの機能を使って二点間の距離を算出します。 他にもGoogle Analyticsのデータを取得することも。 VBA-WebはGET/POSTだけでなく、PUT/DELETEも使えます。Cookieにも対応し、JSONも扱えます。OAuth2認証にも対応していますので、最近のWeb APIであれば問題なく利用できるでしょう。 VBA-WebはVBA製のオープンソース・ソフトウェア（MIT L
PatternFly - Red Hat製のWeb UIフレームワーク
HTMLは自由度が高い反面、何でも自分でイチから作らなければならないイメージがあります。そのためUI、JavaScriptフレームワークは貴重です。それらを使うことで効率を大幅に高められます。 今回紹介するPatternFlyはUIフレームワークで、Red Hat社によって開発されています。 PatternFlyの使い方 例です。データテーブル。 管理画面。グラフも多数用意されています。 スライダー。 カード。 コメント。 通知。 ウィザード。 グラフ。 フォーム。 日付ピッカー。 テキストボックスフィルター。 パンくず。 ページネーション。 アコーディオン。 アラートとバッジ。 ツリービュー。 PatternFlyはjQueryを使っており、企業などのWebシステム開発において活躍しそうです。ウィジェットやデザインのパターンも多数用意されていますので、管理画面の作成など、様々なシステムに
Vue Designer - Vue.jsの表示を確認できるVisual Studio Codeプラグイン MOONGIFT
ReactやAngular、Vueなどは独自のタグを使ったWebコンポーネント型のシステムと言うこともあって、これまでのHTMLデザインの手法が通じなくなっています。デザインの確認などで苦戦している人も多いのではないでしょうか。 そこで使ってみたいのがVue Designerです。Visual Studio Codeプラグインとして動作するVueデザイン確認ツールです。 Vue Designerの使い方 エディタです。Vueファイルに対応しており、デザイナーを開くと右側にプレビューが表示されます。 もちろんリアルタイムに更新されるので、スタイルタグの内容を変えるとすぐに反映されます。 props、データの確認もできます。 Webブラウザなどで表示を確認するのも良いですが、プログラミングエディタの中に埋め込まれていることで、より確認が簡単にできるようになっています。Vue Designerを
Framework Inspector - Webサイトがどのライブラリで作られているのかチェック MOONGIFT
Webサービス、Webサイトを支える技術は無数に存在します。トレンドの移り変わりも激しく、どれを選んだら良いのか分からないという方も多いでしょう。そんな時、有名なサービスで使われているものを選ぶという選択は決して間違いではありません。 そこで使ってみたいのがFramework Inspectorです。気になるサイトがどんなCMS、フレームワークを使っているのが分かります。 Framework Inspectorの使い方 hifiveの例です。jQuery/Facebook/Twitter/Apacheなどが検出されています。 Drupalの場合。CMSとしてDrupalは当然として、nginxで動いているのも分かります。 Ruby on Railsのサイト。SPDYが使われています。 もちろん検出できないサイトもありますが、多くのサイトでアイコン表示が有効になるでしょう。そういったサイトが
dry - ターミナル上で動くDocker管理
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Dockerは便利なシステムで一旦慣れてしまうと何でもコンテナとして管理したくなります。その結果、コンテナが乱立したり、イメージの管理も煩雑になっていきます。そうすると欲しくなるのが管理UIになります。 GUIでもいくつかありますが、手軽に運用できるのはターミナル上で動くものになるでしょう。今回はその一つ、dryを紹介します。 dryの使い方 一覧で現在動いているコンテナが確認できます。 アクティブでないものも含めた一覧です。 詳細を見たり、ログを確認する、コンテナを再起動や終了させるといった操作もできます。 ログです。 プロセスやメモリの状態。 dryはデフォルトのDockerコマンドで収集できる情報を扱いますが、それでも操作がキーボードで選択していくだけなのでとても楽になります
StackEdit - ブラウザ用WYSIWYGなMarkdownエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 個人的に良いと思うMarkdownエディタは、記法の形は残しつつもWYSIWYGに表示が確認できるものです。二ペイン型は使い慣れた方にとってはいいですが、初級者には敷居が高いでしょう。 今回紹介するStackEditは二ペイン型ながらも記法がある程度エディタ部にも反映されるMarkdownエディタになります。 StackEditの使い方 メイン画面です。左側がエディタ、右側にプレビューがあります。 画像やリンクを追加する場合にはダイアログが表示されます。 画像を追加しました。編集、プレビュー両方に表示されます。 リストは改行した際に自動補完されます。 さらに文章を複数管理するための機能もあります。 StackEditではフッターに文字数、行数なども表示されます。長文を書くのに適して
layerJS - レイヤーを使ったUIコンポーネントフレームワーク MOONGIFT
Webアプリケーション化が進んでいく中で、画面遷移にも気を配る必要があります。従来のように全体を読み込み直すのではなく、アプリのように滑らかな画面遷移が求められます。もちろん、そういった動きの中でも履歴管理はきちんとしていなければなりません。 今回紹介するlayerJSは表示部をレイヤーとして構成することで画面遷移やパララックスなどを表現します。 layerJSの使い方 layerJSのデモです。スライダー。 サムネイル化されたコンテンツが表示されるデモ。縮小した時に最後に表示されていたコンテンツがそのまま表示されているのが面白いです。 パララックス。 メニュー。コンテンツが変化してもメニューやヘッダーと言ったレイヤーは残されます。 モーダル。 Webではレイヤーという考えはあまり使われませんが、よくよく考えてみればレイヤー化することで表現力が向上しそうです。レイヤーを差し替えて表示したり
VuePress - Vueを使った静的サイトジェネレータ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 静的Webサイトを生成するツールは多数存在します。多くはHTMLを吐き出すので、それをアップロードします。しかし静的ファイルを使うのでは前時代的なWebサイトと何ら変わりません。 そこで使ってみたいのがVuePressです。Vueを使って静的サイトを構築するソフトウェアです。 VuePressの使い方 サンプルです。 編集すると即座に画面へ反映されます。 見出しを付けたり、絵文字を使ったり。 コードも使えます。 VuePressの魅力は静的サイトでありながらVueによってページのリロードがないことでしょう。そのため、閲覧者がクリックすると、その内容が即座に反映されます。ユーザ体験としては素晴らしいものがあります。コンテンツはMarkdownで作りますので、これまでに作ったコンテンツ
regxr - macOS用の正規表現チェッカー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プログラマといえども難しいのが正規表現です。プログラミング言語によって方言もありますし、マッチした後の変換などでつい指定を間違えてしまったりします。Atomなどはマッチした部分が置換前にハイライトされますが、Emacsなどはそんな機能もないので何度もミスしてしまいます。 そこで使ってみたいのがregxrです。macOS用の正規表現チェッカーです。 regxrの使い方 上に正規表現、下にサンプルになるテキストを記述します。マッチした場所がハイライトするので分かりやすいです。 反映はリアルタイムに行われます。 正規表現の練習に良いですね。 regxrはSwift製なので、適用される正規表現はSwiftで使えるものになるでしょう。プログラムに組み込む前に正規表現を試したり、思ったマッチに
俺の調整さん - 調整さんクローン
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 元々リクルートが開発し、最近ミクステンドに譲渡されたサービスが調整さんです。何人かで予定を調整するのに便利で、個人的にも愛用しています。そんな調整さんですが、社内では使えなかったり、プライバシーが気になるという人もいるでしょう。 そこで使ってみたいのが俺の調整さんです。Herokuでも使える、調整さんクローンです。 俺の調整さんの使い方 イベントを作ります。 作りました。これを他の人と共有します。 出欠は本家と同じくマルバツ、そしてサンカクの3パターンです。 これは一人の場合。 サンプルです。マルの率によって行の色が変わります。 俺の調整さんは本家と同じような機能を提供します。目的に特化している分、誰でもすぐに使いこなせるでしょう。本家サービスでは足りない機能を追加することもできま
RSS Box - 様々なサービスの情報をRSSフィード化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました オンライン上の情報を集めるのにRSSフィードは便利な仕組みですが、最近はフィードを出していないサイトも数多くあります。特にソーシャルメディア系のサイトでは訪問しないと情報が見られません。 そこで使ってみたいのがRSS Boxです。RSSフィードに対応していないサイトをフィード化するソフトウェアです。 RSS Boxの使い方 これだけのサービスがフィード化に対応しています。 Twitterの変換例。 こちらはInstagram。 RSS Boxが対応しているのはTwitter/YouTube/Google+/Vimeo/Facebookページ/Instagram/Periscope/SoundCloud/Mixcloud/Twitch/Speedrun/Ustream/Dailymo
Javascript Downcast - ES6のコードをES5に変換
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました JavaScriptはES6以降によって記述が変わってきました。アロー関数であったり、オブジェクトの渡し方も変わっています。慣れれば難しいものではありませんが、従来のJavaScriptに慣れている人にとっては一瞬理解しづらいものに映るかも知れません。 そこで使ってみたいのがJavascript Downcastです。ES6で記述されたJavaScriptを従来の形式にコンバートしてくれます。 Javascript Downcastの使い方 例えば {a} という書き方。これを変換した結果が確認できます。 {function} の書き方を置き換えた例。 引数のデフォルト値。 残り全部という引数の渡し方。 クラス。これはちょっと難しいコードになりました。 Babelなどを使ってもでき
Web Code Editor - 実行結果付きのWeb上のコードエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました コードを学習する環境は素早く作れるのが理想です。色々なソフトウェアをインストールしたり、セットアップしていたら諦めてしまうでしょう。特にWeb系のように手軽に動かせることを期待されている環境はそうです。 PHPやJavaScriptの学習、コードを試す際に使ってみて欲しいのがWeb Code Editorです。 Web Code Editorの使い方 最初の表示です。上にHTMLコードがあって、下にその実行結果が表示されています。 変更して保存（Processボタン）を押せば表示が更新されます。 日本語も使えます。 Web Code Editorの仕組みとしては実行結果はiframeで囲まれた内容になっています。上のHTMLで記述した内容をサーバ側に送り、特定のファイルを更新してi
Tabullet - 既存のテーブルをメンテナンスしやすくするjQueryプラグイン MOONGIFT
業務システムでテーブル表示はよく使います。そんな時、ユーザから出てくるのがデータのメンテナンスを行いたいと言う要望です。行を追加したり、編集や削除するといった機能です。一つのテーブルだけであれば頑張って実装できるでしょう。しかし、画面が多数あったらどうしたら良いでしょうか。 そこで使ってみたいのがTabulletです。jQueryプラグインで、既存のテーブルに簡単にデータメンテナンス機能を追加します。 Tabulletの使い方 メイン画面です。 データの追加を押したところ。 編集もできます。すべてテキストボックスになるようです。 データの削除もできます。 Tabulletは既存のテーブルに対して簡単にデータの追加、更新そして削除機能を追加します。後は処理を行ったタイミングでサーバ側にデータを転送すれば非常にメンテナンスしやすい仕組みができあがるでしょう。 TabulletはjQuery/J
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Yett - JavaScriptの自動実行をブロック
