MozillaZine.jp フォーラム

@諸行無常

すみません。失念していました。現在はCodePenというプレビューつきのEditorを使っています。Glitchも
多分、機能的にはCodePenと同じと思うので併用して使っていきます。

ありがとうございました。

[quote="Utajima"]
Glitchを使うことにします。さっそく、オンラインコードエディターを使ってみたいのですが、
下記の状態からどのような手順で進めればいいでしょうか.
https://gyazo.com/887e6d4b52d6e4b55edaa99ecd07cc80[/quote]
Utajima さんの「これまでのコメント」から察すると、
「英文」を全く理解できないように感じますが？
英文がさっぱりダメでも、
「[url=https://forums.mozillazine.jp/viewtopic.php?f=23&t=17930]デスクトップアプリ「DeepL」翻訳[/url]」を導入（インストール）することで克服できるはずなので、
まずは、その「DeepL」翻訳の助けを得ながら
[url=https://help.glitch.com/kb/section/2/]Glitch（Getting Started：See how to set up an account and start creating!）[/url] を試行してみてください。

一応、実際の手順ですが
「[url=https://glitch.com/pricing]お尋ねのページ[/url]」は、
[quote]何を作りたいですか？
私たちのHelloアプリは、ベスト・プラクティスを念頭に置いて作られており、サンプル・コードをリミックスして自分のものにすることができます。また、最小限のテンプレートを使って自分で作ることもできます。
私たちはそんなあなたを応援します。
小さな静的なWebサイトから複雑なフルスタックのWebアプリまで、何でも無料で作ることができます。静的なサイトには常時接続のホスティングが提供され、フルスタックのアプリは [url=https://glitch.com/pricing]ブースト[/url] することができます。
[url=https://help.glitch.com/kb/article/38-what-types-of-apps-can-i-make-on-glitch/]さらに詳しく[/url][/quote]
と記述されています。

つまり、[url=https://glitch.com/pricing]ブースト[/url] にて
① Starter（初心者）：Free（無料）
② Pro（ベテラン）：$8/ per month, billed annually（$8/月額、年間で課金）
の二択から選択し、
アカウントを作成して利用することになります。

アカウント作成には、
パスワードマネージャーの使用をお勧めします。
私の好みは、ローカルに管理する「[url=https://keepass.info/]KeePass Password Safe[/url]」ですが、
万人向けには「[url=https://bitwarden.com/]Bitwarden[/url]」が適当かと感じます。
Bitwarden ならば、ブラウザの「[url=https://addons.mozilla.org/ja/firefox/addon/bitwarden-password-manager/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search]拡張機能[/url]」も利用でき、デバイス間をセキュアに同期できます。

諸行無常さん

詳しいご説明ありがとうございます。

Glitchを使うことにします。さっそく、オンラインコードエディターを使ってみたいのですが、
下記の状態からどのような手順で進めればいいでしょうか.

https://gyazo.com/887e6d4b52d6e4b55edaa99ecd07cc80

[quote="Utajima"]
>Glitch
ごく、最近CodePenというオンラインコードエディターを使い始めました。
HTML・CSS・JAVESCRIPT・Previewの構成になっているのですが、
こちらが間違ったコードを記述すると、間違った箇所を色で指摘してくれる機能はないのでしょうか。
Thimbleにはそのような機能があったようなきがします。[/quote]
私は当該関連のアプリケーションには無知なのですが、
せっかくなので好奇心から
「online code editor」をキーワードに検索してみました。
[url=https://support.glitch.com/search?q=online%20code%20editor]Search results for 'online code editor' - Glitch Support[/url]
検索結果： 35 results foronline code editor
▶ Advanced filters
Sort by ［　　　　　　　　］を活用して、表示内容を調整できます。

35件もヒットしたので全てをチェック（チラ見程度ですが）できなかったのですが、
おそらく「GlitchyPastePen」が適当かと感じました。
[url=https://support.glitch.com/t/megathread-glitchypastepen-create-simple-front-end-projects-using-an-online-code-editor-with-instant-hosting/25616][MEGATHREAD] GlitchyPastePen - Create simple front-end projects using an online code editor with instant hosting[/url]
[quote]
GlitchyPastePen BETA
CodePen のように、すぐにホスティングできるオンラインコードエディターを使って、シンプルなフロントエンドプロジェクト（主に HTML、CSS、JS を使ったもの）を作成します。

GlitchyPastePen はオンラインコード IDE を備えており、簡単な静的サイトを作成し、それらをすぐにホストすることができます。

GlitchyPastePen： https://glitchypastepen.glitch.me/ 14
GitHub リポジトリ: https://github.com/GlitchyPastePen/GlitchyPastePen 3
Discord サーバー招待: https://discord.gg/EzpVwR3 1
ステータス: https://glitchypastepen.statuspage.io 4
フォーラム: https://glitchypastepen.flarum.cloud 1
特徴
● 友人や他のユーザーとのライブコラボレーション（一時的に無効になります
● Ace.js による強力なコードエディタ
● テキストの折り返し、テーマ、フォントサイズなど、自分の好みに合わせてエディタを選ぶことができます。
● Intellisense powered by Ace.js
● コードを美しく表示することができます。
● プロジェクトのためのインスタントホスティング[/quote]
この話題に関しては、
無知同然なので「附則的な情報」を紹介したまででしたが、興味深い（おもしろそうな）アプリケーションと感じました。
デジタルデトックスのライフスタイルに改めたため、もう足を踏み込むことはありませんが、非常に新鮮な感覚を覚えました。
貴重な「トピック」をありがとうございました。

ガイダンスとして：
[url=https://glitch.com/features]Glitch: Features[/url]
Glitch はフレンドリーなコミュニティで、フルスタックのアプリケーションを構築し、1分以内に安全な URL で起動することが超簡単にできます。
[url=https://glitch.com/create-project]Glitch: Get Started[/url]
私たちの Hello アプリは、ベスト・プラクティスを念頭に置いて作られており、サンプル・コードをリミックスして自分のものにすることができます。また、最小限のテンプレートを使って自分で作ることもできます。
[url=https://blog.glitch.com/category/starter-kits]Tips & Tutorials（ヒントとチュートリアル） — Glitch Blog[/url]
Glitch を最大限に活用するために：次のコーディングプロジェクトを始めるためのガイドとリソース
[url=https://help.glitch.com/home/]FAQ[/url]
[url=https://support.glitch.com/faq]FAQ: Community Forum Rules - Glitch Support[/url]

[url=https://blog.glitch.com/]Welcome to the Glitch Blog[/url]
[url=https://blog.glitch.com/category/the-playlist]Apps We Love — Glitch Blog[/url]
注目のアプリ、コミュニティスポットライト、月刊ニュースレター
[url=https://blog.glitch.com/category/company]Company News（広報） — Glitch Blog[/url]
グリッチ本部からのお知らせと出来事
[url=https://blog.glitch.com/category/product]Product Updates（製品の最新情報） — Glitch Blog[/url]
新機能や製品の変更点について
[url=https://help.glitch.com/home/]Glitch Support[/url]

諸行無常さん

>Glitch
ごく、最近CodePenというオンラインコードエディターを使い始めました。
HTML・CSS・JAVESCRIPT・Previewの構成になっているのですが、こちらが間違った
コードを記述すると、間違った箇所を色で指摘してくれる機能はないのでしょうか。Thimbleにはそのような機能があったようなきがします。
すみません　ぶしつけに質問しまして

今更かもしれないですが、
件名「Thimbleに代わるもの」及び、
元スレ[url=https://forums.mozillazine.jp/viewtopic.php?t=18818&p=69387#p69387]「Thimbleのプレビュー画面」[/url] を踏まえての
トピックの出発点 [u][i]「Thimble プロジェクト」について（他の閲覧者などの参考になるように）附則的な情報まで[/i][/u]

[url=https://github.com/mozilla/thimble.mozilla.org]「Thimble」の公式リポジトリ[/url] の
GitHub - mozilla/thimble.mozilla.org: UPDATE: This project is no longer maintained. Please check out Glitch.com instead.
[url=https://github.com/mozilla/thimble.mozilla.org#readme]README.md[/url] によれば、
[quote]DEPRECATION NOTICE

Mozilla has made a strategic decision to sunset Thimble over the course of 2018-2019. We encourage you to check out Glitch and you can read our blog post to learn more about this partnership.

This also means that any issues, bugs, or pull requests created in this repository might not receive a reply or support. If you are encountering issues migrating your projects to Glitch or have questions about the partnership, please send us an email at thimbleglitchsupport@mozilla.org.[/quote]
と明示されています。
つまり、
Mozilla が事業の再構築（リストラ）のために、
（人員と資金を直接的に投下する）主体的な開発とユーザーサポートをすることを止め、
当初からのパートナーシップ関係で、実質的に開発とサポートを担ってきた[url=https://glitch.com/]「Glitch」[/url]に全面的に移行したのです。
要するに、
Thimble は、[url=https://glitch.com/]「Glitch」[/url]が全面的に継承しています。
このパートナーシップについては、ブログ記事 [url=https://medium.com/read-write-participate/a-note-about-thimble-b8ba0a51b8fd]「 A Note About Thimble | by Mozilla 」[/url] に明示されています：
Mozilla is partnering with Glitch to keep Thimble projects published and remixable（Mozilla は、Glitch と提携し「Thimble」プロジェクトの公開とリミックスを維持します）
プロジェクトを Glitch に移行する際に問題が発生した場合や、パートナーシップに関するご質問がある場合は、thimbleglitchsupport@mozilla.org

自分で見つけました。かえって目移りしそうです。
ブラウザー上でサクッとコードを書けるプレイグラウンド7選
https://www.webprofessional.jp/7-code-playgrounds/

[quote="Utajima"]下記のようなものができればいいです。ただし、フリーでオンラインでできるものがいいです。
練習用です。[/quote]
画像は Progate のスライドのようですが、「下記のようなものができれば」の指している意味がさっぱりわかりません。
紹介記事にあるものをお試しください。

下記のようなものができればいいです。ただし、フリーでオンラインでできるものがいいです。
練習用です。
https://gyazo.com/ac46ecb8fe4690a89500d5bb2b476948

EarlgreyTea です。
コメントが付いていないようでしたので、また私から。

用途とか求めているものがわかりませんし、私自身使ったことはあまりないのでアドバイスはできませんが、ググって見つかった紹介記事を書いておきます。

[list]
[*][url=https://qiita.com/righteous/items/9520164abae2b1140491]【Web開発】ブラウザさえあれば使える無料オンラインエディター紹介・比較 2019 - Qiita[/url]
[*][url=https://paiza.hatenablog.com/entry/2020/09/29/140000]すぐにコードを書いて試せる！オンラインプログラミング実行環境8選 - paiza開発日誌[/url][/list]

この辺を参考に試してみてはどうでしょう。

以前、オンラインエディターとしてThimbleを利用していたのですが、廃止になったそうです。その代替があれば紹介してください。