paiza開発日誌

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

logo

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

どんなWebサイトも取り込んでコメントや編集ができるコラボツール「Ruttl」を使ってみた!

f:id:paiza:20220309112848j:plain

どうも、まさとらん(@0310lan)です!

今回は、さまざまなWebサイトのURLを入力するだけで、すぐに取り込んでコメントや編集ができるようにしてくれるサービスをご紹介します。

コメントを使った意見交換だけでなく、各要素のスタイルやテキスト・画像などを編集したコンテンツを意見として投稿できるのが特徴です。

シェアも気軽にできるので、お手軽なコラボツールとしてご興味ある方は参考にしてください!

Ruttl

f:id:paiza:20220309112936j:plain

■「Ruttl」の使い方

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

まずはサイトにアクセスして【Get Started】ボタンから無料のユーザー登録をしておきます。

f:id:paiza:20220309113017j:plain


メールアドレスとパスワードを設定するだけなので簡単です。

f:id:paiza:20220309113032j:plain


次に、自分のアバターを設定したら以下のようなダッシュボード画面になります。

f:id:paiza:20220309113053j:plain

この画面から新規プロジェクトの作成・管理が行えます。

また、アカウントの設定や公式ドキュメントなどにもアクセスできるため、最初に一通り確認しておくといいでしょう。

■Webサイトを取り込んでコメントしてみよう!

ここからは、任意のWebサイトを実際に取り込んで「コメント機能」を使ってみましょう。

コメント機能は、Webサイトのレビューを複数人でコラボしながら意見交換するときなどに最適で、さまざまな便利機能も搭載されているので合わせてご紹介しておきます。


まずは、先ほどのダッシュボード画面から【Create Project】ボタンをクリックして、新規のプロジェクトを作成しましょう。

f:id:paiza:20220309113123j:plain


好きなプロジェクト名を設定したらボタンをクリックしてください。

f:id:paiza:20220309113135j:plain


次に、コメントしたいWebサイトのURLを入力します。

f:id:paiza:20220309113149j:plain

自分が管理しているサイトはもちろんのこと、すでに公開されているさまざまなWebサイトを取り込むことが可能です。


読み込んだWebサイトが複数のページを持っている場合は、どのページを取り込むかを選択しておきましょう。

f:id:paiza:20220309113204j:plain


Webサイトが正常に取り込まれると、以下のような編集エディタが表示されます。

f:id:paiza:20220309113216j:plain


画面下部に「Ruttl」専用のメニューバーが配置されています。そこで、中央にあるコメントアイコンを選択してみましょう。

f:id:paiza:20220309113230j:plain

これで、コメントモードに切り替わります。

類似のサービスはWebサイトのスクリーンショットを取り込む場合が多いですが、「Ruttl」の場合はリアルタイムにレンダリングされたライブサイトであるのが特徴です。そのため、マウスをホバーすると各要素ごとに選択できます。


そこで、要素の好きな箇所をクリックすると、コメントを投稿できるウィンドウが表示されます。

f:id:paiza:20220309113247j:plain

任意のコメントを入力してボタンをクリックすると投稿完了です。

「@」を入力して任意のユーザー宛にコメントを送信できる機能もあります。


コメントが追加されると、画面右側のアクティビティパネルに表示されます。

f:id:paiza:20220309113305j:plain

複数人で共有している場合は、このパネルからすべてのコメントを確認したり、承認作業や自分宛てのコメントだけ表示したりなども可能です。


追加されたコメントには返信もできるのですが、テキストだけでなくスクリーンキャストの動画を投稿できる機能もあります。

f:id:paiza:20220309113319j:plain


スクリーンキャストを行っている間は、画面上部にレコーディングパネルが表示されています。

f:id:paiza:20220309113331j:plain

この状態であれば、画面の操作などを動画ファイルとして記録できるわけです。

また、鉛筆アイコンをクリックすると、画面内に線や文字を手描きできる機能も利用可能です。


投稿された動画は、コメントウィンドウの再生ボタンをクリックして確認できます。

f:id:paiza:20220309113350j:plain


動画はすぐにプレビュー画面で再生されるので確認も簡単です。

f:id:paiza:20220309113402j:plain

この動画に対して、さらに動画で返信するような使い方もできるので、テキストだけでは伝わりにくいコミュニケーションも円滑に進められるでしょう。

■Webサイトを編集してみよう!

「Ruttl」はコメントだけでなく、Webサイトの好きな箇所に変更を加えられる機能があるのでご紹介しておきます。

まずは、画面下部にある編集アイコンをクリックしてください。

f:id:paiza:20220309113422j:plain

これで、コメントモードから編集モードに切り替えることができます。

編集モードでは、各要素ごとのスタイルを取得・カスタマイズできるうえ、テキストや画像の変更なども可能です。

コメントで投稿するよりも、実際に自分でWebサイトを編集した結果を伝えたい場合に最適なモードであると言えるでしょう。


任意の要素を選択すると、画面右側にスタイル編集用のパネルが表示されます。

f:id:paiza:20220309113440j:plain


フォント、サイズ、カラー、余白…など、一般的なスタイルの編集項目は一通りカスタマイズ可能です。

f:id:paiza:20220309113454j:plain

(※キーボードの矢印キーを押して要素を移動させることもできます)


また、選択した要素に適用されているCSSを確認できる機能も搭載されているので便利です。

f:id:paiza:20220309113505j:plain


スタイルの編集以外にも、例えばテキスト要素であれば好きな文字に変更することもできます。

f:id:paiza:20220309113515j:plain


画像要素であれば、手持ちのファイルをアップロードしたり、提供されている無料画像に差し替えたりも可能です。

f:id:paiza:20220309113532j:plain


Webサイトの編集が完了したら、画面上部の【Save changes】ボタンをクリックすると投稿が完了します。

f:id:paiza:20220309113544j:plain


コメントしたときと同じく、画面右側のパネルに編集した内容が投稿されるので確認しやすいです。

f:id:paiza:20220309113600j:plain

変更したすべての項目が自動で記録されており、1つずつON / OFFしたり削除したりなども可能です。部分的に変更を受け入れるようなケースでも活用できるでしょう。

以下の公式動画では、コメントや編集をどのように行えるのか紹介されているので合わせて参考にしてください。

■プロジェクトの共有について

「Ruttl」を複数人で利用する場合のシェア機能について、簡単に解説をしておきます。

いくつかシェアする方法があるのですが、一般的な手順としてはプロジェクト画面の上部にある【Share】をクリックしてください。

f:id:paiza:20220309113624j:plain


プロジェクトをシェアするための設定画面が表示されます。

f:id:paiza:20220309132047j:plain

友人やチームで共同編集するような使い方の場合は、任意のメールアドレスを入力してボタンをクリックすると招待できるようになります。また、その際に編集権限を付与するかどうかも設定可能です。


共同編集ではなく、クライアントや不特定多数の人にプロジェクトをシェアしたい場合は画面下部にある専用リンクを使いましょう。

f:id:paiza:20220309113648j:plain

このリンクはSNSやメールなどでシェアすれば、誰でもすぐにブラウザから閲覧できるようになります(Ruttlにログインする必要はありません)。


また、リンクには「コメントの可否」など、いくつかの設定も可能です。

f:id:paiza:20220309132102j:plain


さらにプロジェクト自体のバージョン管理も可能です。

f:id:paiza:20220309113712j:plain

例えば、Webサイトの異なるデザインを比較検討したり、特定のバージョンだけシェアするなど、さまざまな用途に活用できるでしょう。

ちなみに、バージョンごとで名前を変更できるうえ、コメントなども区別されるので便利です。

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


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

このたび人気の「Python入門編」が全編無料となりました。他にもいろいろな動画レッスンを無料公開しておりますので、エンジニア・非エンジニアにかかわらず、プログラミングを学びたい方はぜひごらんください。

paizaラーニングについて詳しくはこちら
paizaラーニング

■まとめ

今回は、Webサイトを手軽に取り込んでコメントや編集などができるサービスをご紹介しました。

エンジニアやデザイナーなどの職種を問わず、チーム全体として誰でも扱いやすいコラボツールだと感じました。

サービス自体はまだ活発に開発が行われており、公式に公開されているロードマップにはいくつかの新機能やアップデートも予定されています。

ぜひ、みなさんもWeb開発で効果的に活用してください!


<参考リンク>



 

paizaラーニングでは、ほかにもJava、C#、Ruby、C言語、PHP、SQL、JavaScript、HTML/CSSなど、人気言語の動画レッスンを公開しています。

詳しくはこちら

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.