Connect with us

プログラミング

Product Hunt(プロダクトハント)で気になったプロダクト 2019年10月30日(Line Awesome/Puppet Master/FontParings.ByPeople)

Published

on

Product Huntはユーザー投稿型のサイトで、作成したプロダクトに関する概要を投稿することができるようになっています。投稿に対してはユーザーが投票できるようになっており、日毎/週毎/月毎にその日のNo.1のプロダクトが決定され、Product Huntで上位になったプロダクトはちょっとした箔が付く感じになります。

Product Huntは残念ながら英語版しかありませんが、スタートアップがリリースしたばかりで有名になっていない面白いプロダクトも沢山投稿されます。この記事ではProduct Huntで個人的に気になったプロダクトについていくつか紹介したいと思います。

Line Awesome

概要

938735
Product Huntより引用(https://www.producthunt.com/posts/line-awesome)

Line Awesomeはオープンソースのアイコン集です。1380以上の無料アイコンをFont Awesomeのような形で利用することができます。その名の通り、線の組み合わせで構成するといった方針?があるようで、ベタ塗りは少なめのアイコンが多いです。

作成しているのはIcon8の会社です。Icon8の統計によると、Line icon(ラインアイコン)の方が、Filled icon(フィルドアイコン)よりも人気があるのだそうです。

公式ページより引用 (https://icons8.com/line-awesome/howto)

使い方

zipで公開されているダウンローバージョンを読み込んで利用できます。またCDNからも簡単に読み込めます。


読み込み方

利用する際にはHTMLでクラスを指定するだけです。

アイコンの使い方

Puppet Master

概要

Puppet MasterはヘッドレスChromeをREST API経由で操作できてしまうというサービスです。

ヘッドレスChromeとは、Google Chrome 59から搭載されたChromeの機能で、UIなしでChromeを操作できるというものです。普通はマウス等で操作するブラウザをコマンドで操作できるので、特定の処理を自動化したりするのに利用します。定期的に特定のホームページにアクセスしてスクリーンショットを撮ったりとかができます。詳細はGoogleの公式ページをご参照ください。

使い方

REST API経由でスクリーンショット撮影やPDF作成といった機能を呼び出して利用します。

Puppet MasterはGoogleが提供しているPuppeteerというヘッドレスChromeを操作するためのツールを利用しており、公式ページでも"Puppeteer As A Service"を自称しています。

正直、開発者であれば自分たちでPuppeteerを使える環境を整えてしまえばいいと思うのですが、Puppet Masterは環境を整えることが難しい人たちをターゲットにしているそうです。またPuppet Masterはオートスケールするため、ヘッドレスChromeを活用したサービスを構築する際にも有用とのことです。

料金

無料プランと有料プランの2つが存在します。無料プランは1時間あたりのAPIコール数が10回までとかなり限られていますが、定期的にちょっとしたスクショを撮ったりする程度はできそうです。

料金 - Puppet Master公式より引用 (https://puppet-master.sh/pricing)

FontPairings.ByPeople

概要

938843

FontPairings.ByPeopleはフォントの組み合わせのプレビューを確認して、ダウンロードまでできる無料ツールです。ウェブページを作る際、ひとつのフォントだけで完結するケースばかりではなく、複数のフォントを使うことが多くあると思いますが、フォント同士の相性は実際に目で見てみないと分からない部分があります。

このサービスでは、ホームページのテンプレートに2種類のフォントがセットになったペアを当てはめて、どんな感じに見えるのかを確認することができます。日本語フォントはないため、全てのケースでは使えませんが、いい感じの英文フォントの組みわせを発見するのには使えそうです。

使い方

使い方は至ってシンプルで、初めにサンプル表示されるホームページのテーマを選択します。初期設定ではスタートアップ向けのテンプレートが表示されていますが、ECサイト用など、様々なものが用意されています。

次にフォントの組み合わせの中から適当に選択してクリックします。すると即座に右型のサンプルページのフォントが更新されるので、あとは好みのスタイルの組み合わせが見つかるまで繰り返していきます。

ライセンス

気に入った組みわせのフォントはダウンロードすることが出来ます。ちょっと意外だったんですが、今の所ダウンロードできるフォントは全て無料で利用できるもののようです。てっきり有料フォントの販売に繋げてマネタイズするのかと思っていました。

フォントのライセンス

Continue Reading
Click to comment

Leave a Reply

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

プログラミング

Electron/Node.jsのABIバージョンの一覧と動的に取得すつためのモジュール

Published

on

はじめに

Electronでアプリを作っていると、使っているモジュールの再ビルドなどが必要になるケースがあります。その際にはElectronとNode.jsのABIバージョンの情報が必要になります。

このABI (Application Binary Interface : アプリケーション・バイナリー・インターフェイス)のバージョンはElectronとNode.jsのバージョンで定められているのですが、情報が探し難かったので自分のための備忘録を兼ねてこの記事でまとめたいと思います。

ElectronのABIバージョン一覧

ElectronのリリースノートなどにもABIバージョンに関する記載がなかったので、一覧にしました。基本的にはElectronのメジャーバージョンで一意に決まるようですが、Electron 4.x.yだけマイナーバージョンでもABIバージョンが更新されているので注意が必要です。

ElectronバージョンABIバージョン
2.x.y57
3.x.y64
4.x.y<4.0.4未満>
64
<4.0.4以降>
69
5.x.y70
6.x.y73
7.x.y75
8.x.y76
9.x.y80

なお、この一覧は後述のnode-abiパッケージ内の情報を参照しました。

Node.jsのABIバージョン一覧

Node.jsに関しては、公式のリリース一覧を見れば確認することができます。「NODE_MODULE_VERSION」という列がABIバージョンだという説明があります。

[1]: NODE_MODULE_VERSIONは、Node.jsのABI(アプリケーションバイナリインタフェース)のバージョン番号を指します。このバージョンは、再コンパイルすることなくC++アドオンのバイナリーをロード可能か確認するために使われます。

https://nodejs.org/ja/download/releases/#ref-1

ABIバージョンを動的に取得するモジュール

ビルドの自動化などのために、動的にABIバージョンを取得して利用したいケースもあると思います。node-abiを使えばABIバージョンからElectron/Node.jsのバージョンを取得したり、逆にElectron/Node.jsのバージョンからABIバージョンを取得することができます。

Continue Reading

プログラミング

使ってみて便利だったFlutterパッケージ4選

Published

on

Flutter/Dartには様々な便利なパッケージが公開されており、うまく利用することで開発の工数を大幅に削減することができます。この記事ではAndroid/iOSアプリをFlutterで開発した際に便利だったパッケージを紹介します。

cached_network_image

アプリを作っているとインターネット上から取得してきた画像を表示しなければならないシーンがあります。そういった場合、ネットワーク状態が不安定だったりサーバ側からの応答が遅かったりと、ローカル画像表示では問題にならない様々なトラブルを想定しなければなりません。

cached_network_imageはネットワーク上から画像を表示する場合に便利なパッケージです。ロード中のプレイスホルダー表示や、画像ダウンロードに失敗した場合のエラー表示を下記のような形でスッキリと記載することができます。

ちなみにFlutter1.10.15からはFlutterのImageProviderに大きな変更があったようで、その環境で利用する場合には2019年12月現在はではRC版であるバージョン2.0.0-rcをを利用する必要があります。

(2020年1月更新) 2.0.0からrcが取れてめでたく正式バージョンになりました。これで気兼ねなく使うことができます。

flutter_launcher_icons

Android/iOSアプリを開発するときに意外と面倒なのがアプリアイコンの設定です。flutter_launcher_iconsは、アイコン画像ファイルを一枚配置してコマンドを叩くだけでこれらの設定を完了してくれるという便利パッケージです。

まずpubspec.yamlでアイコン画像の指定を行います。ちなみにflutter_launcher_iconsはFlutterアプリに組み込むパッケージではないので、dev_dependanciesとして導入すればいいみたいです。僕は普通のdependanciesに入れてしまいましたが普通に動きました。

あとはコマンドを叩くだけです。ターミナルで次のようにコマンドを入力するだけです。アイコンファイルを更新した場合ももう一度このコマンドを叩けば上書きしてくれます。

webview_flutter

Flutterアプリ内部で特定のウェブページを開きたい場合があります。アプリのプライバシーポリシーなどは、誰でも見れるようにウェブ上に公開する必要があることに加えて、アプリ上でも表示してあげないといけません。ウェブページ+WebViewを活用することで工数を抑えつついい感じの実装ができます。

webview_flutterはWebViewを利用するためのパッケージです。iOS向けにはWKWebView、Android向けにはWebViewが内部的には使われているようです。2020年1月現在Developers Preview扱いではありますが、使っている限りでは普通に使えます。

url_launcher

WebViewは凄く便利な仕組みですが、外部アプリで特定のURLを開きたいケースもあります。例えばAmazon アソシエイトはAmazonのウェブページをWebViewで表示することを禁じているので、AmazonのページはブラウザかAmazonショッピングアプリで開くようにしないといけません。

そんな場合に便利なパッケージがurl_launcherです。一般的なhttp/httpsから始まるURLであればデフォルブラウザで開いてくれます。またAndroidの場合はカスタムURLスキームにも対応しているようで、Amazonショッピングアプリが入っている状態ではきっちりAmazonショッピングアプリでURLを開いてくれます。

この他、mailto/tel/smsから始まるURIにも対応しており、それぞれメールアプリ/電話アプリ/SMSアプリと連携できるようです。便利。

なおiOSで利用する場合、forceSafariCVというオプションをfalseに指定しておかないとWebViewとして開くことになります。

Continue Reading

プログラミング

Product Hunt(プロダクトハント)で気になったプロダクト 2019年11月1日( Hexometer/Previewmojo/Startup Gifs)

Published

on

Product Huntはユーザー投稿型のサイトで、作成したプロダクトに関する概要を投稿することができるようになっています。投稿に対してはユーザーが投票できるようになっており、日毎/週毎/月毎にその日のNo.1のプロダクトが決定され、Product Huntで上位になったプロダクトはちょっとした箔が付く感じになります。

Product Huntで11月1日に投稿されたプロダクトのうち、個人的に気になったものをいくつか紹介していきます。

Hexometer

概要

Hexometerはウェブサイトの解析・モニタリングツールです。AI技術と2800ものデータポイントを利用してウェブページを解析してくれるというのがウリです。他の多くの解析ツール同様、URLをスキャンを入力するだけで、解析結果をわかりやすく表示してくれます。

使い方

URLを入力して解析結果を見るだけなのでとても簡単です。見られる情報には下記のようなものがあります。画像は全て当ブログのトップページのURLを入力したときのものです。SEO対策に役立ちそうな情報が色々得られるので、

ドメイン/Whoisデータ

ドメインを取得した日だったり、そのドメインの有効期限まで分かります。

ドメイン/Whois 情報

ページのアセット内訳

ウェブページを構成する画像ファイル、Javascriptファイル、CSSファイルなどの占める容量を表示してくれ、総合的な表示の速さを教えてくれます。ウェブページをダイエットさせて高速化させるときの勘所が大体分かりそうです。

アセット

ウェブページのロード時間内訳

ウェブページをロードする際にかかっている時間の内訳を見ることができます。通信時のラウンドトリップタイムやサーバのレスポンス時間も確認できるので、これもウェブページの高速化に役立ちそうです。

ロードタイム

ウェブサイトで使われている技術スタック

ウェブページで使っている技術スタックがざっくり分かります。ライバルのページが何か面白いギミックを入れているときには、そのページが使っているものなんかを調べるのにもいいかも知れません。

技術スタック

メタデータチェック

メタデータが正しく埋め込まれていないページを探し出してくれます。

メタデータチェック

料金プラン

料金プランは下記のようになっており、無料プランでは解析できるウェブサイトの数が1つに限定されます。ベータ版として提供されているためか、今時点では普通に複数のウェブサイトの確認が可能でした。有料プランとしては月額8.25ドル(年払いで一括99ドル)のビジネスプランが用意されています。また解析可能なURLの数を任意に設定できるプレミアムプランも用意されています。

料金プラン

Previewmojo

概要

PreviewmojoはソーシャルメディアなどでURLを共有するときに作られるOGP画像をいい感じに生成してくれるツールです。ウェブページの内容を自動で解析して必要な情報をOGP画像として描画してくれます。読むのにかかる時間の目安を表示してくれる機能なんかいいですね。

サンプル

使い方

デザイン

ウェブページ上で画像のデザインを設定します。簡単なレイアウトやブランドカラーなどを設定可能です。

デザイン

ウェブサイトへの埋め込み

ウェブサイトに埋め込むためのコードを挿入します。Wordpress用、Ghost用の他、ピュアなHTMLで記述されたものも用意されています。Product Hunt上の質疑によれば、近いうちにWordpressプラグインも作りたいと考えているようです。

埋め込み用のコード

料金プラン

料金プランは下記の通りです。ドメイン1つであれば月額9ドル。5つまでのProプランは月額19ドル。年払いでさらにお得になります。

料金プラン

Startup Gifs

概要

Startup Gifsはスタートアップ関連?の面白Gifアニメを集めたコレクションです。

使い方

好きなGifをクリックするとクリップボードにGiphyのリンクがコピーされます。GiphyのリンクはSlackなどに貼れば自動で描画されますので、スタンプのようにして利用することができます。

Continue Reading

Trending