<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>extention &#8211; 6i6.jp</title>
	<atom:link href="https://6i6.jp/tag/extention/feed/" rel="self" type="application/rss+xml" />
	<link>https://6i6.jp</link>
	<description>LouisSakashitaArtAndSound</description>
	<lastBuildDate>Sun, 05 Apr 2026 03:37:28 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=4.9.26</generator>
	<item>
		<title>WEB-technique）[まるで動画のよう,手順をスクショ]ブラウザ機能拡張 Tango [これは便利だ]</title>
		<link>https://6i6.jp/2023/03/23/web-technique_learn-about-tango-extention/</link>
		<comments>https://6i6.jp/2023/03/23/web-technique_learn-about-tango-extention/#respond</comments>
		<pubDate>Thu, 23 Mar 2023 02:03:49 +0000</pubDate>
		<dc:creator><![CDATA[6i6]]></dc:creator>
				<category><![CDATA[Mov]]></category>
		<category><![CDATA[Sound Art]]></category>
		<category><![CDATA[WebTechnicTips]]></category>
		<category><![CDATA[AI]]></category>
		<category><![CDATA[brain]]></category>
		<category><![CDATA[browser]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[extention]]></category>
		<category><![CDATA[future]]></category>
		<category><![CDATA[genius]]></category>
		<category><![CDATA[idea]]></category>
		<category><![CDATA[impact]]></category>
		<category><![CDATA[Notion]]></category>
		<category><![CDATA[plugin]]></category>
		<category><![CDATA[tips]]></category>
		<category><![CDATA[web]]></category>

		<guid isPermaLink="false">https://6i6.jp/?p=12402</guid>
		<description><![CDATA[＝Tango＝ スクリーショット拡張を探 <a class="read-more" data-toggle="modal" data-post-id="12402" href="https://6i6.jp/2023/03/23/web-technique_learn-about-tango-extention/">.  ...</a>]]></description>
				<content:encoded><![CDATA[<h2>＝Tango＝</h2>
<p><img src="https://6i6.jp/wp-content/uploads/2023/03/tangoLogo400x126.gif" alt="tangoLogo400x126" width="400" height="126" class="alignleft size-full wp-image-12445" /><br clear=all><br />
スクリーショット拡張を探してて、Chrome機能拡張の中で見つけ入れてみたのだが、驚いた。こりゃ凄い、こりゃ賢い。<br />
これは（ある種の仕事をしている人にとって）とてつもなく便利な機能を与えてくれる。<br />
→<a href="https://chrome.google.com/webstore/detail/tango/lggdbpblkekjjbobadliahffoaobaknh?gl=JP&#038;hl=ja" rel="noopener" target="_blank">Tango機能拡張</a>へ飛ぶ<br />
→<a href="https://www.tango.us/" rel="noopener" target="_blank">Tangoサイト</a>へ飛ぶ</p>
<h4>●こういう人に必要な機能（私の昔話＝愚痴を聞いてくれ）</h4>
<p>過去に就職ウェブサイトのマニュアルを（最終的にはDTP=紙媒体に仕上げる）作る担当をしていたことがあるのだが、たとえばあるひとつの作業について記述するためにやることは、時系列を正しく整理すしながら/文章を作りながら/その素材集める/&#8230;ということなのだが、例えば</p>
<blockquote><p><small>1.A画面でIDパスワードを入れる<br />
2.小窓がポップアップするので<br />
3.OK（その文言はOKに限らず「ログイン」だったり、「変更する」だったりその時々で違うんヨ）をクリック<br />
4.B画面に遷移する（なんか、分岐したりする場合もあるし、Cならば、Dならばと、それぞれについて検証していかないといけないのヨ）<br />
5.次いで〇〇を確認し・入力・・・・・　とひたすらスクリーンショットを撮り、その手順を（細かく）メモし、必要な部分だけをクロップ（切り取り必要な画像として加工し、適切な名前で適切に分類し保存）し、そしてページネーション考えながらDTP作業し・・・・</small></p></blockquote>
<p>と、しちめんどくさい作業が延々と続くのダ。<br />
就職サイトなので、採用（企業さん）側とユーザー（就職希望者）側の二通りあり、企業情報、応募者管理と使う画像は膨大となるのダ。完成品（できた納品物）を見せる対象は違うのだが、文体とか画像につける枠とかネ、デザインのテイストは揃えないといけないじゃナイ？何かと下作業が大変複雑なんヨ。<br />
結構メモ漏れがあったり、同じ作業を繰り返したり、検証してみると、（無記入だとアラートが出たりするなど）また別の動きをしたり「エエェ？そんな馬鹿な？さっきと違うんじゃん？？」とかってよくあり、いろんなケースを想定して網羅しなくてはならず、さらにそのエラー部分は記事としてはサラッと書くなど、記事としての重要度の大小を考えながら構成・デザインの落とし込みもやらなければならず、神経を使うのダ。<br />
やったことがある人でないと分からない苦労があるのですヨ。そういう作業なんですヨ。<br />
1日で終わるわけではなく、翌日〜翌々日になると、これってどの作業の続きだったっけ？となるのですヨ。<br />
それでね＜就職サイト＞と＜転職サイト＞があったのヨ、つまりマニュアルを4つ作ったのヨ。上記作業を4倍繰り返したのダヨ！<br />
（今、久しぶりに思い出したのだが、トホホ感が甦ってきた。）（この作業を1人で行なっていた。）（むしろ1人でやった方がミスは少ないかもしれないが、孤独な学習作業ではあったのヨ。）（ディレクター的な人は居たんだろうが、タスクマネージメント寄りの業務なので少し距離を置いて「まずはやってみて」「完成したらチェックするから」という感じで投げっぱなしされほぼネ、1人の作業だったのダヨ。）（でも自分にとってホントいい経験になったなと後で思うのヨ。）</p>
<p>とまあ、ぐちぐち申し訳ないが、21世紀となり、山のようなウェブサービスがある今も（今だからこそ）、一部の職種の人はこういうことを延々とやっているんだと思うと本気で同情するワケなのヨ。</p>
<h4>●そんな人のために！ Tangoがこの作業をほぼ自動で行なってくれる</h4>
<p>オフィシャル動画（英語）<br />
<iframe width="600" height="338" src="https://www.youtube.com/embed/ilOG2PtUWJM?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen title="What&#39;s Tango?"></iframe></p>
<h4>●特長</h4>
<p>（諸々スタートまでの手続き／作業は省略するが、）<br />
○<b>まず自分でやってみるだけ、そうすると手順やサイト名（リンク先）をブロックで勝手に記録。簡単な作業のキャプションをつけ、保存すれば流れは既に自動作成されている</b><br />
○再生するものはマウスの動きに合わせピントが合うように自動でフォーカスするし、クリックする部分をハイライトしてくれるので、（つまり擬似的には<b>動画のように見える</b>）ので、とても分かりやすい<br />
○そしてやった行為を文字で記録してくれている（ここが賢いと思うのよ）（編集行為でそれを修正する・文字追記するなどができる）<br />
○Notionにも対応<br />
○Chromeだけでなく、Chrome拡張入れられるブラウザ（Brave/Safari/Vivaldi）でも使える/Edgeも（別サイトからだが、）使える<br />
○多種書き出し、Web埋め込み、共有ももちろんできる<br />
○有料プランでデスクトップ全体の記録も使える</p>
<h4>●Here is my sample</h4>
<p>私が試しにやってみて公開しているサンプルをご覧いただこう。（遊びでやってみた。）LaMDAをGoogleで調べて、AllAboutというサイトに辿り着き、ページをめくりながら、サクッと読むというとても簡単な作業なんだが、それでも特定の場所をクリックしたり、スクロールしたり、という作業は発生するわけで。</p>
<p>→<a href="https://app.tango.us/app/workflow/-lamda-----Workflow-with-Google-and-Allabout-028b2491f6ee47789aa62b3e2ccfe401" rel="noopener" target="_blank"><b>クリックで別窓</b></a>が開きます、</p>
<p>緩やかに下にスクロールして見てみてください。<br />
それをここをクリックするんだよ、画面が変わるんだよ、という、「手順」を区切って（記録したものを）再現してくれるんだ。その後チョチョイと「編集」をして、補足説明を加えれば、あら簡単。</p>
<p>作る側はユーザ登録必要だが、公開して、それを見る（ウェブアクセスする）分には、その必要はない。（この辺は無料）<br />
チームで色々やる場合のグループ限定公開とか、デスクトップアプリとして利用したりとか、その辺りは有料の部分になっていくようだ。<br />
<iframe width="600" height="338" src="https://www.youtube.com/embed/0qWjjP9rgkQ?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen title="Tango: Built for Teams"></iframe></p>
<h4>●動画でHow to</h4>
<p>動画、URLなど<br />
<iframe width="600" height="338" src="https://www.youtube.com/embed/KTVgn_A4vv8?start=50&#038;feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen title="Tangoを使って自動で手順書作成【超絶簡単にWebアプリの手順書が作れます。】"></iframe><br />
<iframe width="600" height="338" src="https://www.youtube.com/embed/v-kwW-oM4BE?start=71&#038;feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen title="TANGO Chrome extension BLEW MY MIND (Best tool to create how to guides)"></iframe><br />
　↑<br />
ロゴが古いな、1年前の動画です。</p>
<p>→<a href="https://www.google.com/search?q=tango+extension" rel="noopener" target="_blank">その他Google検索</a></p>
<p>Wow!こんな高機能な仕組みが、基本無料（機能拡張でサクッと入れられ／簡単に使い始められる）なんて！　なんともいい時代になったもんだ。</p>
<p>#昔話　#<a href="/tag/browser/">ウェブブラウザ</a>　#<a href="/tag/plugin/">Web機能拡張</a>　#<a href="/tag/notion/">Notion</a> #Tango #manual　#手順　#<a href="/tag/design/">design</a>　#<a href="/tag/tips/">tips</a>　#<a href="/tag/brain/">brain</a>　<br />
#長文　#<a href="/tag/genius/">天才</a> #<a href="/tag/future/">未来</a>　#<a href="/tag/idea/">アイデア</a>　#昔の自分に教えてあげたい　#この便利さはやったことがある人でないと分からない　#神経質または偏執狂な面が必要な仕事　#わざと変な文体にしてますw</p>

<div class="wp_rp_wrap  wp_rp_vertical_m" id="wp_rp_first"><div class="wp_rp_content"><h3 class="related_post_title">You may also like</h3><ul class="related_post wp_rp"><li data-position="0" data-poid="ex-in_8967" data-post-type="own_sourcefeed" ><a href="https://6i6.jp/2021/02/22/code-dreamweaver-legacy_edit-color/" class="wp_rp_thumbnail"><img src="https://6i6.jp/wp-content/uploads/2021/02/d27a67706e48aceb7e5af192c1d31510-150x150.jpg" alt="code)Dreamweaver-legacy)edit color" width="150" height="150" /></a><a href="https://6i6.jp/2021/02/22/code-dreamweaver-legacy_edit-color/" class="wp_rp_title">code)Dreamweaver-legacy)edit color</a></li><li data-position="1" data-poid="ex-in_6122" data-post-type="own_sourcefeed" ><a href="https://6i6.jp/2019/05/15/video-edit-tips_audio-spectrum/" class="wp_rp_thumbnail"><img src="https://6i6.jp/wp-content/plugins/wordpress-23-related-posts-plugin/static/thumbs/0.jpg" alt="VideoEditTips)Audio Spectrum他動画編集テク" width="150" height="150" /></a><a href="https://6i6.jp/2019/05/15/video-edit-tips_audio-spectrum/" class="wp_rp_title">VideoEditTips)Audio Spectrum他動画編集テク</a></li><li data-position="2" data-poid="ex-in_3238" data-post-type="own_sourcefeed" ><a href="https://6i6.jp/2018/02/08/dtm_omnisphere-tips/" class="wp_rp_thumbnail"><img src="https://6i6.jp/wp-content/plugins/wordpress-23-related-posts-plugin/static/thumbs/15.jpg" alt="DTM)Omnisphere TIPS" width="150" height="150" /></a><a href="https://6i6.jp/2018/02/08/dtm_omnisphere-tips/" class="wp_rp_title">DTM)Omnisphere TIPS</a></li><li data-position="3" data-poid="ex-in_7423" data-post-type="own_sourcefeed" ><a href="https://6i6.jp/2020/03/16/mov_cook-tips/" class="wp_rp_thumbnail"><img src="https://6i6.jp/wp-content/plugins/wordpress-23-related-posts-plugin/static/thumbs/30.jpg" alt="mov)Cook 料理Tips" width="150" height="150" /></a><a href="https://6i6.jp/2020/03/16/mov_cook-tips/" class="wp_rp_title">mov)Cook 料理Tips</a></li><li data-position="4" data-poid="ex-in_8632" data-post-type="own_sourcefeed" ><a href="https://6i6.jp/2020/10/31/dtm_e-drums-tips/" class="wp_rp_thumbnail"><img src="https://6i6.jp/wp-content/plugins/wordpress-23-related-posts-plugin/static/thumbs/4.jpg" alt="DTM)電子ドラム設定TIPS" width="150" height="150" /></a><a href="https://6i6.jp/2020/10/31/dtm_e-drums-tips/" class="wp_rp_title">DTM)電子ドラム設定TIPS</a></li><li data-position="5" data-poid="ex-in_7652" data-post-type="own_sourcefeed" ><a href="https://6i6.jp/2020/04/04/dtm_roli-and-memo/" class="wp_rp_thumbnail"><img src="https://6i6.jp/wp-content/plugins/wordpress-23-related-posts-plugin/static/thumbs/2.jpg" alt="DTM)ROLI andメモ" width="150" height="150" /></a><a href="https://6i6.jp/2020/04/04/dtm_roli-and-memo/" class="wp_rp_title">DTM)ROLI andメモ</a></li></ul></div></div>
]]></content:encoded>
			<wfw:commentRss>https://6i6.jp/2023/03/23/web-technique_learn-about-tango-extention/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
