paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

logo

ITエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

ノーコードで自分専用ダッシュボードを作成&公開できる「Widget Board」を使ってみた!

f:id:paiza:20210901114719j:plain
どうも、まさとらん(@0310lan)です!

今回は、誰でもお手軽に自分専用のダッシュボードを作成できるWebサービスをご紹介します!

さまざまな機能をブロック化したウィジェットを画面にペタペタと配置していくだけで、タスク管理・情報収集・旅行計画・エンタメ…など、多彩な用途に活用できるボードを作成できるのが大きな特徴です。

自由にデザイン可能なダッシュボードにご興味ある方は、ぜひ参考にしてみてください!

Widget Board

f:id:paiza:20210901115652j:plain

■ダッシュボードの作成例

「Widget Board」の詳しい使い方を解説する前に、まずはどのようなダッシュボードが作れるのかサンプル例をいくつか見てみましょう。

以下はToDoやカレンダーなどのウィジェットを組み合わせて、自分だけのタスク管理ボードを作成した例です。

f:id:paiza:20210901115705j:plain

他にも、時計・検索ボックス・テキストエディタなどのウィジェットも提供されているので、組み合わせしだいで作業のしやすいボードが簡単に構築できます。


また、仕事以外にもたとえば「Spotify」や「SoundCloud」のプレイリストを組み合わせて、お気に入りの楽曲を再生できる音楽ボードを作って楽しむことも可能です。

f:id:paiza:20210901115717j:plain

もちろん「YouTube」や「Vimeo」などの動画共有サービスから、好きな映像を組み合わせて視聴できるダッシュボードも作れます。


画像やテキストエディタを組み合わせて、独自のレシピ調理ボードなんかも手軽に作れます。

f:id:paiza:20210901115726j:plain

ダッシュボードは公開して友人・知人と共有できる機能もあるので、お互いのレシピを交換して遊んだりもできて便利です。

このように複数のウィジェットを好きなように組み合わせるだけで、自分だけのダッシュボードを素早く構築できるのが「Widget Board」の魅力なのです。

■「Widget Board」の使い方

それでは、「Widget Board」をどのように使えばいいのか詳しく見ていきましょう!

まずはサイトのトップページ上部にある【CREATE ACCOUNT】ボタンをクリックして、無料のユーザー登録を済ませておきます。

f:id:paiza:20210901115754j:plain


Googleアカウントで簡単にログインできますが、メールアドレスとパスワードを設定して登録も可能です。

f:id:paiza:20210901115803j:plain


登録が完了すると、以下のような「マイページ」が表示されます。

f:id:paiza:20210901115812j:plain

この画面から新規のダッシュボードを作成・管理できるようになっています。

■ダッシュボードを作ってみよう!

それではシンプルなダッシュボードを作ってみましょう。

まずは「マイページ」に表示されているボタンをクリックして、新規のダッシュボードを作成します。

f:id:paiza:20210901115828j:plain


以下のような専用のエディタ画面が表示されます。

f:id:paiza:20210901115843j:plain


基本的な作り方ですが、画面左のメニューから好きなウィジェットをドラッグ&ドロップするだけなので簡単です。

f:id:paiza:20210901115852j:plain


試しに「時計」の機能を提供するウィジェットを配置してみましょう。

f:id:paiza:20210901115900j:plain


詳細な設定も可能ですが、今回はこのまま【SAVE】ボタンをクリックします。

f:id:paiza:20210901115909j:plain


するとダッシュボードに時計が配置されます。

f:id:paiza:20210901115918j:plain

配置されたウィジェットは、ドラッグしてサイズを変更したり好きな位置に移動させることも可能です。


今度は「カレンダー」機能を提供するウィジェットを選択して配置してみましょう。

f:id:paiza:20210901115929j:plain


複数のウィジェットを配置したら、それぞれを移動させて並び替えなども簡単におこなえます。

f:id:paiza:20210901115938j:plain


さらに「検索エンジン」の機能を提供するウィジェットも追加してみましょう。

f:id:paiza:20210901115946j:plain


Google, YouTube, Twitter, Reddit, Amazon…など、検索で利用したいサービスを複数選択してから【SAVE】ボタンをクリックします。

f:id:paiza:20210901120052j:plain


これでダッシュボードから任意のキーワードで検索が可能になります。

f:id:paiza:20210901120100j:plain


あとは「テキストエディタ」を配置すれば、ちょっとした調べ物を記録するのに便利でしょう。

f:id:paiza:20210901120108j:plain

「Widget Board」を使うとこのように好きなウィジェットを自由に配置して、自分が使いやすいダッシュボードを手軽に構築できるようになります。

■便利なウィジェットを紹介!

現時点で「Widget Board」が提供しているウィジェットは20種類以上あるのですが、なかでも特に便利だと思うものをいくつかピックアップしてご紹介しておきます。


まずは【To-Do】ウィジェットについて。

これはチェックボックス付きのタスクを登録&管理できる機能が提供されています。

f:id:paiza:20210901120127j:plain


複数のTo-Doウィジェットを並べれば、タスクをドラッグして移動させることも可能です。

f:id:paiza:20210901120137j:plain

つまり、カンバンボードのような使い方もできるので、ダッシュボードの活用範囲が広がると思います。


【AUDIO】ウィジェットは、たとえばSpotifyの公開プレイリストのURLを貼り付けて音楽プレイヤーを埋め込むことができます。

f:id:paiza:20210901120215j:plain


ウィジェットのサイズを変更するとプレイリストと簡易プレイヤーが一緒に表示されるので便利です。

f:id:paiza:20210901120223j:plain

SoundCloudの埋め込みコードも利用可能で、Web上に公開されているMP3音源なども使えるので作業用BGMとしても活用できるはずです。


【Embed Webpage】ウィジェットは、任意のWebサイトのURLを貼り付けてページを埋め込み表示できる機能を提供してくれます。

f:id:paiza:20210901120232j:plain


たとえば「はてな」のホットエントリーを以下のように表示させることもできます。

f:id:paiza:20210901120241j:plain

定期的にチェックしているWebサイトであったり、天気予報やオンラインエディタなど…標準のウィジェットにない機能を使えるので便利です。


【Map】ウィジェットは、任意のキーワードに関連する場所をGoogleマップで表示できる機能を提供します。

f:id:paiza:20210901120250j:plain


埋め込まれた地図は通常のGoogleマップと同じく、拡大・縮小や航空写真の利用なども可能です。

f:id:paiza:20210901120300j:plain


また、カウント系のウィジェットも豊富に揃っており、時刻・カウントダウン・タイマー・ストップウォッチが利用可能です。

f:id:paiza:20210901120309j:plain

常時ダッシュボードに表示させておく用途に最適で、仕事や勉強の効率を上げるような使い方もできるでしょう。

■ダッシュボードを公開してみよう!

「Widget Board」では、作成したダッシュボードを自分だけで楽しむ以外にもネット上へ公開する機能が提供されています。

これによりWebサイトのように不特定多数の人に見てもらうこともできるので、合わせてご紹介しておきます。


公開方法は非常に簡単で、ダッシュボードの作成エディタ上部にある【OPTIONS】をクリックします。

f:id:paiza:20210901120323j:plain


あとは「Public」のスイッチボタンをONにするだけで公開できます!

f:id:paiza:20210901120331j:plain

ちなみに公開する際に、URLの一部を任意の英数字に変更可能なので分かりやすい名称にしておくとよいでしょう。


また、Chromeブラウザ向けに専用の拡張機能も提供されています。

f:id:paiza:20210901120423j:plain

ブラウザから素早くダッシュボードを表示&作成したり、複数のボードを検索できるなど便利な機能が提供されています。


<参考リンク>

■動画&ゲームでプログラミングが学べるpaizaラーニング


動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。

Python体験編」「C#体験編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。

また、「STEINS;GATE(シュタインズ・ゲート)」とpaizaがコラボしたプログラミングゲーム「電脳言語のオルダーソンループ」をはじめゲームで楽しくプログラミングを学べるコンテンツもご用意しています。ぜひプレイしてみてください!


■まとめ

今回はノーコードで自分専用のダッシュボードを作成できるWebサービスをご紹介しました。

「Widget Board」は今後も新しいウィジェットを追加したり、他のWebサービスとの連携やオフライン対応なども予定されているので楽しみなサービスです。今回ご紹介した内容は無料プランでも利用可能ですが、配置できるウィジェットの個数に制限があるので注意が必要です。

ただし、複数のダッシュボードを作成&管理できるので用途に合わせて使い分けるのがオススメです。

ぜひみなさんもオリジナルのダッシュボードを作成して楽しんでみてください!


<参考リンク>




paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら
paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら
paizaのスキルチェック

paizaのおすすめコンテンツ

Webセキュリティ入門 ハッカー入門 Webセキュリティ講座がスタート!CVは内田真礼さん! Python✕AI 機械学習入門講座 CVに上坂すみれさんを起用!人気の機械学習講座を公開中!
paiza転職 paiza新卒 EN:TRY paizaラーニング 記事内に記載している情報は、記事公開時点でのものとなります。 Copyright Paiza, Inc, All rights reserved.