Figmaで無料で利用できるWebサイトやスマホアプリのUI用のデザインシステムを紹介します。UIコンポーネント、カラー、アイコン、タイポグラフィなどがまとめられており、すぐにFigmaで利用できます。 Design Systems for Figma ※画像は、クックパッドのデザインシステム Design Systems for Figmaには日本のサイトをはじめ、海外のサイトのデザインシステムがまとめられています。 サイトの利用は簡単で、登録など面倒なことは一切不要です。
![Web制作者は要チェック! Figmaで無料利用できるUI用のデザインシステムのまとめ -Design Systems for Figma](https://cdn-ak-scissors.b.st-hatena.com/image/square/aab8ae01c9d2823e68c659745e6ee39dbe9bf02d/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202204%2F2022103001%402x.png)
ウェブサイトの死活監視サービスは数多く存在しますが、自分でサーバーを用意する必要があったり、監視対象が一定数を超えると有料になったりと、導入に障壁を感じる場合もあります。無料の死活監視ソフトウェア「Upptime」は、GitHub ActionsやGitHub PagesといったGitHubのサービスを使って、簡単にウェブサイトの死活監視を行うことができます。 Upptime https://upptime.js.org/ GitHub - upptime/upptime: ⬆️ Uptime monitor and status page powered by GitHub https://github.com/upptime/upptime UpptimeはGitHub Actionsで5分ごとにウェブサイトの死活監視を行い、ウェブサイトがダウンした場合はGitHubのIssuesに報
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Googleマップではユーザがカスタマイズしてピンを立てたり、情報を付与する機能があります。便利なのですが、使うためにはJavaScript SDKを使いこなさなければなりません。また、データをどこかに保存しておく必要もあります。そのため利用を控えてしまっていないでしょうか。 今回紹介するsheet2gmapは世界一簡単なマップツールを自認しています。Googleシートを編集するだけで、Googleマップ上にデータを即座に反映できます。 sheet2gmapの使い方 最初の表示です。 Googleシートを開きます。 データを追加します。住所が入力されていれば、位置情報は自動的に補完してくれます。 再度マップを見ると、追加したデータのマーカーが立てられています。 sheet2gmap
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました IT技術の発展はめざましく、日々新しい技術が登場しています。例えばサーバレス、VueやReactの仮想DOM、ちょっと前であればRESTful APIなどがあります。それらを漏れなくキャッチアップするのは大変です。 今回紹介するGAS 家計簿はサーバレスにGAS(Google Apps Script)を使って家計簿Webアプリケーションを作るハンズオンを兼ねたソフトウェアです。 GAS 家計簿の使い方 デモです。動作しているのはGitHub Pagesです。サーバの管理が不要ですね。 データの追加用モーダルウィンドウ。フロントエンドはVueを使っています。 設定画面です。データはGoogle Apps Scriptを使ってGoogleスプレッドシートに保存されています。 GAS 家
複数のウェブサービスを連携し、定型作業を自動化してくれるサービスはIFTTTやZapierが有名ですが、特定のサービス以外は使えなかったり、有料プランでしか使用できない機能があったりします。オープンソースで使える自動化サービス「n8n」は無料で利用でき、自社製ソフトのような他の自動化サービスでは未対応のサービスも自動化できるとのことなので、実際に使ってみました。 n8n.io - Workflow Automation https://n8n.io/ まずはn8nのホームページにアクセスします。 ホームページ下部へと進むとインストール方法が記載されていました。今回はWindows 10の機能の一つであるWSL上のUbuntuにn8nをインストールします。 n8nを動作させるにはNode.jsが必要なので、記事作成時点で最新の推奨バージョンのNode.jsをインストールしておきます。 Nod
どうも、まさとらん(@0310lan)です! 今回は、Googleが提供しているスプレッドシートを表計算ではなく、Web開発の即戦力になる万能ツールへと変えてしまうサービスを厳選してご紹介しようと思います。 スプレッドシートのデータを活用して、Webコンテンツを作成したりデータベースとして活用するなどさまざまな開発手法に応用できるので、ご興味ある方はぜひ参考にしてみてください! ■スプレッドシートのデータを即座にAPIで提供する! 【 SwiftSheet 】 SwiftSheetはExcelやスプレッドシートなどで管理しているデータを、即座にRESTful APIとしてホスティングしてくれるのが大きな特徴です。 CSVで保存したファイルをアップロードするだけという簡単な操作のため、ユーザー登録や課金などは一切不要です。 たとえば、お店のリストをスプレッドシートで管理しているとします。 こ
Googleスプレッドシート上でもマクロに似た機能、Google App Scriptが利用できます。JavaScript(のサブセットですがネットワーク周りはむしろ使いやすい)で書けるのでとても簡単に使えます。 問題はWeb IDE上で書かないといけないことで、バージョン管理に対応していないことです。そこで使ってみたいのがgas-githubです。 gas-githubの使い方 Google Chromeの機能拡張として動きます。まずGitHubの認証情報とアクセストークンを登録します。 そうするとツールバーにリポジトリを選択するUIが追加されます。 後はコードを編集してpushしたり、逆にpullしてリポジトリと同期します。 ちゃんとコードがGitHubリポジトリに入ります。 バージョン管理できるだけで十分なのですが、GitHubへバックアップするのにもぴったりです。ローカルで編集して
デザインの指示書やスタイルガイドを作成するのは、なかなか時間がかかりますよね。 使用している要素のサイズやマージンやカラーやフォントなどの情報を自動で取得したり、コメントを添えたり、指示書やスタイルガイドをプロジェクトのメンバーと共有できる「Zeplin」を紹介します。 1プロジェクトまで完全無料、2つ以上から有料ですが、機能制限などは一切ありません。 Zeplin Zeplinの特徴 Sketchでの下準備 Zeplin ソフトウェア版 for OS X Zeplin ブラウザ版 for OSX, Win, Linux Zeplinのインストール Zeplinの特徴 Zeplinは、Sketchで作成したデザインリソースから指示書やスタイルガイドなどを自動で生成するソフトウェア(無料)とオンラインサービス(無料と有料)です。 無料と有料の違いはプロジェクト数だけで、機能はまったく一緒。
「DISQUS」というサービスをご存知でしょうか? wordpressデザインを学ぶための超有名ブログ「WEBクリエイターボックス」様を筆頭に、レベルの高そうなwordpressブログのコメント欄でよく見かけるサービスです。 これだけ多くのトップブロガー達が採用するには意味があるのだろう。と思い、正直まだ理解していない機能もあるのですが、当サイトでもコメント欄を「DISQUS」に変更する事にしました。 先に完成イメージからご覧ください。「DISQUS」を導入することにより、このように変わりました。 「DISQUS」はココが凄い! 私が把握している限りですが、「DISQUS」について簡単に説明しておきます。 「DISQUS」というサービスはwordpressのコメント欄を進化させるとことができるのですが、単なるコメント機能!という訳では無いようです。「DISQUS」の基本的な理念として【コメ
サイトのアクセス数を増やしたいとき、新たにページを増やすのが良いのか、既存のページを改善するのが良いのか判断する必要がありますよね。 その判断をするために、既存のページを修正することで、どの程度の数字を見込めるのかがまったくわからないと、闇雲に新しいページを作り続けてしまうことにもなりかねません。 そこで今回は、既存のページを改善することで、どのくらいのアクセスの増加を見込めるのか、教えてくれるサービスをご紹介します。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! 検索順位が上がったらどれくらいアクセスが増加するか予測する「Search Rank 」 「Search Rank」は、Google Analyticsのデータを使い、既存ページの検索順位を改善することで、どのくらいのアクセス増加を見込
自分のウェブサイトを作って公開するにはサーバーが必要ですが、自分で構築するのはかなり面倒ですし、レンタルすればお金がかかります。しかし、Dropboxのアカウントを持っていればクリックからたった数秒でDropbox上にウェブサイトを作成できて公開できるのが「Small Victories」です。実際にどれくらい簡単に作れるのか試してみました。 Small Victories http://smallvictori.es/ まずはSmall Victoriesのサイト中段にある「Connect to your Dropbox!」をクリック すると連携認証画面になるので「許可」をクリック こんなページに飛ばされます。 自分のDropboxページに戻ってみると「アプリ」というフォルダが作成されているのでこれをクリック 「smallvictori.es」というフォルダをクリック すると中には画像フ
GoogleのRSSリーダー「Googleリーダー」が7月1日でサービス終了すると発表されてから、多くのRSSリーダーやあとで読む系アプリが我こそはとしのぎを削っていますが、Evernoteをたった2ステップでRSSリーダーに変身させることが可能な「EverRSS」が6月27日にサービス開始しました。簡単にGoogle ReaderでRSS登録していたサイトのインポートが可能で、RSSリーダーとしてEvernoteを使用できるようになるので端末間をシームレスに利用可能です。 EverRSS - 2ステップでEvernoteをRSSリーダーに。 http://everrss.me/ ◆Google Readerに登録していたRSSのインポート EverRSSを使用するには上のリンクからEverRSSのトップページへ移動して、Google Readerに登録していたRSSのインポートから始めま
FacebookやTwitterからEvernoteにGmailまで、59個ものウェブサービスを連携させてさまざまな作業を自動で行えるようにする無料のクラウドアプリケーションが「IFTTT」です。このシステムの最大の特徴はサービスどうしを連携させるための設定がとてもシンプルな点で、難しいコードを書いたり複雑なパラメーターを入力する必要は一切ありません。ただクリックをして行くだけの簡単な作業でほとんどの設定が済んでしまうので、Yahoo! Pipesでは挫折してしまった、という人でも安心して利用できそうなサービスです。 IFTTT / Put the internet to work for you. https://ifttt.com/ ちなみに「IFTTT」とは「If This Then That」の略となっており、「コレが起こったらソレをしてね」という感じの意味で、ユーザーが使用してい
2012年ももうすぐ終わり。年末年始と言えば、やっぱり年賀状だ。最近はFacebookやmixi、TwitterなどのSNSと連係して、宛先の住所が分からなくても送付できるサービスが増えてきたのでまとめてみた。 激動の2012年ももうすぐ終わり。師走に入って、年末年始の準備を始めた読者の皆さんもいるのではないだろうか。年末年始と言えば、やっぱり年賀状。最近はFacebookやmixi、TwitterなどのSNSと連係して、宛先の住所が分からなくても送付できるサービスが増えてきたのでまとめてみよう。 メアドや電話番号だけでもOK――Yahoo!JAPAN年賀状 まず最初に紹介するのは「Yahoo!JAPAN年賀状」。FacebookやTwitterだけでなく、送付先のメールアドレスを知っていればメールで送付先の友人が受け取り手続きを進められるのが特徴だ。年賀状を注文すると宛先となる友人にお知
人気に拍車がかかる写真共有サービス、 instagramと同様に写真にエフェクトを 掛けて共有出来るpicplzも、ちらほらと ユーザーさんを見かけるようになりました。 そんな中、picplzの写真を簡単に表示 出来るjQueryプラグインが配布されたので ご紹介。 picplzもinstagram同様にエフェクトを掛けたり、共有したり、他サイトと連携したりと、ほぼドッペルゲンガーなんですが、多少の差もあります。 picplzとは instagramとの差は殆どありませんが、エフェクトや動作はinstagramのほうが充実しています。picplzは写真がスクエアでなくても投稿出来るのと、PCでのWebでいつでも確認出来る点が良いところですね。 picplz / App Storeへ そんなpicplzに投稿した自分のステキ写真をブログにも表示したい、という方もいらっしゃるかと思います。そん
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く