)
GAS 家計簿 - Google Apps ScriptとVueで作られたWeb家計簿
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 家
Indie Icons | VISIWIG
AddAirplaneAlien FaceAlign CenterAlign JustifyAlign LeftAlign RightArrow BackArrow DownArrow LeftArrow RightArrow UpAtomBar ChartBasketballBattery 0Battery 1Battery 2Battery 3Battery 4BeakerBellBinocularsBlockBookBookmarkBracketsBriefcaseBrowserBullhornCalendarCalendar AltCameraCartCheckmarkChevron DownChevron LeftChevron RightChevron UpCircle LargeCircle MediumCircle SmallClockCloudCloverClubCode
アイソメトリック図で描けるダイアグラム作成Webアプリ・「Isoflow」
Isoflowはアイソメトリック図で描けるダイアグラム作成Webアプリです。仕様は単純で、アイソメトリックな3Dアイコンを配置してダイアグラムを作成する、というもの。 現状使えるアイコンがあまりに少ないので作れるダイアグラムは限られますがリクエストを送る事も出来るみたいなので今後に期待でしょうか。 アイソメ図のダイアグラムは見栄えも良いし感覚的に頭にも入りやすそうなイメージなので割といいかもしれないですね。利用は無料ですが保存やエクスポートにはユーザー登録が必要です。 Isoflow
)
FontCDN - GoogleのWeb Fontをまとめてプレビュー
GoogleではWebフォントを無料で公開しています。サイズが大きくなりがちなWebフォントをGoogleが高速なCDNで配信し、さらに多数のWebサイトで共有することでキャッシュも有効になります。 日本語フォントはあまり多くありませんが、多少のフォントは対応しているようです。そんなWebフォントでの表示をまとめて確認できるのがFontCDNです。 FontCDNの使い方 トップページです。多数のフォントでのプレビューが表示されています。 日本語で表示を指定した場合。 表示をタイルからリストにした場合。 使い方も分かります。 FontCDNはGoogleのWebフォントでの表示をまとめて確認することで、細かな違いも一目で分かります。フォントをカテゴリや名前でフィルタリングできるので、使いたいフォントに合わせて確認するのが容易です。 FontCDNはJavaScript製のオープンソース・ソ
無料かつロイヤリティフリーなアニメーションつきベクター画像をダウンロード可能な素材サイト「Pixel True」
拡大しても線や色を滑らかなまま保つことができるベクター画像で描かれたイラストを集めたサイトが「Pixel True」です。無料でダウンロードできる画像が多くそろえられており、画像はすべてロイヤリティフリーで使用できます。 Pixel True - Beautiful illustration packs https://www.pixeltrue.com/illustrations Pixel Trueは上記URLからアクセス可能。無料でダウンロードできる画像の一覧を見るには「Free illustration」をクリックします。 無料でダウンロードできる画像は記事作成時点で100種類以上あり、中にはアニメーションつきの画像もありました。UFOにさらわれる牛や落ちたアイスクリームなど、独特なラインナップ。 アニメーションつきの画像は、画像にマウスオーバーすればアニメーションを再生可能。 以
【2023】おしゃれな配色パターンが見つかる！カラーパレット人気ツール28個まとめ | Web Design Trends
配色はデザインにおいて重要な要素の1つですが、慣れている人でないとバランスの取れた配色を決めていくのは簡単ではありません。 そこで、今回は初心者の方でもおしゃれな配色ができるカラーパレットツール・配色パターン見本サービスをまとめました。下記のように、おすすめのツールや使用する色数ごとに分類しています。 おすすめカラーパレットツール・サービス AIを使ったカラーパレットツール 2色の配色パターン見本 3色の配色パターン見本 4色の配色パターン見本 5色の配色パターン見本 その他のカラーパレットツール・サービス グラデーションの配色パターン見本 2022年に流行するWebデザインの最新トレンド10個まとめ 2021年のミニマリズムを中心としたトレンドが注目されていましたが、2022年は鮮やかで、奇抜で、記憶に強く残るようなデザインを中心としたトレンドが注目されています。 今回は、2022年に流
)
Screenshot.Rocks - スクリーンショットを使ってWebブラウザのモックアップを作成 MOONGIFT
スクリーンショットをそのまま貼り付けるだけでは芸がありません。そこには余計な情報も入ってしまっているかも知れませんし、アイコンなどを消したいと思うこともあります。 そんな時に使ってみたいのがScreenshot.Rocksです。Webブラウザのモックアップを使ったスクリーンショットを作成します。 Screenshot.Rocksの使い方 適当な画像をアップロードすると、Webブラウザっぽい枠を表示します。 上に載せる情報は自由にカスタマイズできます。 さらに背景色を変更しました。 できあがった画像はダウンロードできます。 Screenshot.Rocksを使えばPhotoshopなどで作ったWebサイトのデザインをモックアップのWebブラウザ枠で囲めます。自分のWebブラウザでは機能拡張のアイコンや、アドレスバーのURLなど載せたくない情報になっていることもあるでしょう。Screensho
手書きイラスト苦手克服！数千種類のイラスト素材を無料ダウンロードできるサイトOuch
手書きイラストレーションは、最近よく見かけるデザイントレンドとして、ウェブサイトやソーシャルメディア、プレゼン資料などあらゆるシーンで利用されています。 しかし、イラストをしっかり手書きできるというデザイナーはあまり多くはないでしょう。新しくアップデートされたイラスト素材サイトOuchでは、追加された数千に及ぶベクターイラストにだれでも無料でアクセスできます。 イラスト素材を無料ダウンロードできるサイトは、以下の記事でも紹介しており、国内向けの日本発イラストもまとめています。 全て無料、本当は教えたくないフリーイラスト素材サイト83個まとめ【商用OK】 イラスト素材サイトOuchの特長 初代Ouchは、2年前に300種類ほどのイラスト素材ライブラリの無料公開をスタートしました。最近メジャーアップデートを行い、数千ものプロフェッショナルなイラスト素材が追加され、だれでも無料でダウンロード可能
プレゼンで使ってみたい！横棒グラフのデータ変化をアニメーションで表示するオンラインツール -Bar chart race
SNSやテレビなどで見かける、横棒グラフの変化をアニメーションで表示するオープンソースのオンラインツールを紹介します。 データは.csvにも対応しており、誰でも簡単に利用できます。 値の変化が非常に分かりやすく、プレゼンなどにもいいですね。 Bar chart race -GitHub Bar chart raceの特徴 Bar chart raceの使い方 Bar chart raceの特徴 Bar chart raceは、横棒グラフがレースをするかのようにその変化をアニメーションで表示するオンラインツールです。 MITライセンスで、商用プロジェクトでも無料で利用できます。 上記のロングバージョン Bar chart raceの使い方 Bar chart raceは、下記ページから利用できます。 横棒グラフのデータ（.csv）を用意し、アニメーション時間を設定するだけです。データが無い人
)
ゆるGIFメーカー - 画像を振るわせてアニメーションGIFを生成 MOONGIFT
アニメーションGIFは動いていなければ意味がありません。しかし、アニメーションを一から作るのは大変です。動画などの素材をベースにするのはそのためです。コマ撮りで作るのは時間も労力もかかります。 そこで一枚の画像からでもアニメーションGIFが作れるゆるGIFメーカーを使ってみましょう。フルフルと震える、新しいかわいらしさを秘めたアニメーションGIFが作成できます。 ゆるGIFメーカーの使い方 画像を指定します。 線画やイラストがちょうどいいです。 フルフルと震えます。 パラメータをいじると、震え方が変わります。 ちょっと激しくしました。 ゆるGIFメーカーはアイコンファイルなどを使うとよさそうです。仕組み的に画像をSVGに変換して振るわせているので、複雑なものよりも線画などシンプルなものがいいでしょう。Twitterアイコンなどで試してみると面白そうです。 ゆるGIFメーカーはVue製のソフ
台風の様子をほぼリアルタイムで更新される衛星画像でチェックできる「Zoom Earth」
ハリケーンや台風の様子を衛星画像でほぼリアルタイムにチェックできるウェブサイトが「Zoom Earth」です。Zoom EarthはGOESやひまわり8号、Meteosatといった気象衛星からのライブ衛星画像、NASAのGIBSやEOSDISから画像データ、MicrosoftのBing Maps PlatformやEsriから地図データ、National Hurricane Center・Joint Typhoon Warning Center・IBTrACSといったサービスから台風情報を得て作成されています。 Zoom Earth – ライブ衛星画像を見る https://zoom.earth/ Zoom Earthはこんな感じで、ほぼリアルタイムの衛星画像をチェックできるウェブサイトです。 画面左上には表示している衛星画像が撮影された日時および、特定の場所を検索するためのサーチバー。
)
table-magic - CSV/TSV/HTML/Markdownの相互変換 MOONGIFT
HTMLのテーブル組はよく使われますが、その組み方は意外と面倒です。CSVから手軽に変換できるといいなと思うことがよくあります。同様にMarkdownでの表組も記法が複雑で、ずれることがよくあります。 そんな苦労を味わった方であれば便利さが分かるのがtable-magicです。CSVとHTML、そしてMarkdownを相互変換できます。 table-magicの使い方 サンプルのCSVです。 Markdownでのプレビュー。 SQLでの出力結果もあります。 HTMLの場合。 フォーム。ビジュアル的に編集できます。 修正結果は他のプレビューにも反映されます。 プレビューはHTMLの表示です。 table-magicを使えばCSVやTSVをMarkdownに変換したり、HTMLへの変換が一発でできます。さらにデータを編集することも可能です。table-magicのURLをブックマークしておくと
FlexboxやCSS Gridでよく用いられるレイアウトのコードを提供する・「1-Line Layouts*」
1-Line Layouts*はFlexboxやCSS Gridでよく用いられるレイアウトのコードを提供するプロジェクトサイトです。 センター配置やサイドバーを持った2カラムレイアウト、ヘッダ/メインコンテンツ/フッターを1カラムで揃えたパンケーキスタイル、なつかしのHoly Grailレイアウトやカードを並べたUIなどよく見かけるレイアウトが揃えられています。 例えばこのようなカードを並べたようなレイアウトはかなり使われている印象ですね。 CSSをよく学んでおられる方には不要だと思いますが、そうでない方には結構有益なプロジェクトサイトではないかなぁと思います。 1-Line Layouts*
Web制作の面倒な作業をラクにするCSS便利ツール87個まとめ
この記事では、Webデザイン制作の面倒な作業をラクにするCSS便利ツール87個をまとめています。なお、新しいツールを随時アップデートしています。 CSS FlexboxやGridをつかったレイアウト生成ツールや、レスポンシブ対応の画像ツール、配色に困ったときに便利なツール、多彩なCSSアニメーション、話題のニューモーフィズムなど、CSSスタイリング時間節約や、さまざまな問題を瞬時に解決することを目的に作成された便利なツールが揃います。 Web制作に活用したい最新ツールと合わせてチェックしてみてはいかがでしょう。 これだけあれば困らない！Web制作を快適にする最新オンラインツール48個まとめ Web制作�の面倒�な作業をラクにするCSS便利ツールまとめ CSS box-shadow Examples さまざまなサイトで実際に使われているCSS box-shadowを集めているライブラリ。お好
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Remove background from image for free - slazzer.com
アドビとGoogleが連携、ブラウザでPDF変換・圧縮できる「.new」
シンプルなものからユニークなものまで様々なCSS製のスピナーやローダーをまとめた・「CSS3 Loader & Spinners」
Warp SVG online
架空の都市の地図を作成出来るオープンソースのWebアプリ・「Map Generator」
)
particles.js - Web上のパーティクルライブラリ MOONGIFT