CodePen Project 機能がやってきた! 有料会員になった!


CodePen の新機能、Project がやってきた!

たくさんの人達にサポートしてもらいながら、日々圧倒的成長をさせていただいているわけですが、「人間以外」では、CodePen に一番お世話になっています。コンパイルが必要な Sass や ES6 に対応しているし、jQuery や Vue.js といった外部ソースも使えるので、すぐにコードを試すことができます。実務でうまくいかないコードは、一旦 CodePen のシンプルな環境で実装することで切り抜けてきました。ありがとう CodePen。

そんなコードペンに大型新機能登場ということで、ついに有料会員になり、実際につかってみました。

結論から言うと、Sass, ES6 をコンパイルしてくれる。Webpack を使えるので import export もできる。普通のウェブサイトとしてディプロイできる。です。特に import export できるので、今まで CodePen でできなかった可能性が広がります。

作ったやつはこれです。

出来たページ https://6af12e09bc6d4b859434da10c5631970.codepen.website

エディター https://codepen.io/nakanishi/project/editor/DWRrRA/

まずは、恒例の勝手に全文日本語訳です。公式サイトの発表記事です。実際に自分が作業したメモは一番下です。

CodePen Projects Is Here!

CodePen Projects Is Here!

CodePen にプロジェクト機能がやってきました!

What is CodePen Projects?

コードペン・プロジェクトとはなんですか?

If you’re familiar with the term, you can think of it as an IDE (Integrated Development Environment) for building websites. Like all of CodePen, you use it right in your web browser.

プロジェクトという用語を聞いたことがあれば、IDE のことを思いうかべたはずです。このプロジェクト機能は、CodePen の他の機能と同じように、ウェブブラザ上で使うことが出来ます。

You have a sidebar with all your files. You can create new files and folders there (even by drag and dropping from your computer), as well as delete, duplicate, and rename them.

スライドバーの中にプロジェクトに使用するすべてのファイルがあるのがわかります。新しいファイルやフォルダをこの中に作成することができます。(自分のコンピューターからドラッグ・アンド・ドロップで追加することも出来ます) もちろん削除や、複製や、リネームも可能です。

You can view, edit, and rearrange your files in separate tabs.

各ファイルを編集するために、それぞれ別のタブを開くことができます。

Files can be preprocessed and tidied.

各ファイルはプリプロセッサで処理され、出力されます。

There is debugging in that your code can be checked for errors and you will be notified of problems.

デバグ機能を搭載していているので、コードにエラーがないかチェックし、問題を指摘してくれます。

 

You can preview what you are building as you build it.

リアルタイムにプレビューされます。

The CodePen Project Editor is both very powerful and very comfortable. There is no setup, you just start using it.

コードペン・プロジェクト・エディターは、パワフルで、しかも快適です。セットアップも必要ありませんから、すぐに使い始めることが出来ます。

Aside from this blog post, you can also check out our dedicated page for explaining Projects, as well as our documentation.

このブログの他にも、次の3つの記事も参照してください。

How Does it Work?

どうやって動いているの?

If you want a peek behind the curtains of how CodePen Projects works, stay tuned to CodePen Radio where we’ll be discussing that in coming weeks.

コードペンプロジェクトがどのように動いているのか知りたい人は、CodePen Radio をチェックしてください。数週間以内にこのテーマについて話をする予定です。

Here’s a high-level overview. When you start a new project or open an existing one, you have a direct connection to a real mini-server in the cloud. It’s actually a Docker container, set up just for this, with a real file system including all your files.

かなり大雑把に言えば次の様になっています。プロジェクトをスタートしたり既にあるプロジェクトを開くと、クラウド上にある実際のサーバーにアクセスします。具体的にはこのプロジェクトのために用意された Docker コンテナで、ここにあなたのアップロードしたすべてのファイルも配置されています。

When you add/delete/edit (then save) files, we’re watching that file system and doing the things we need to do to make it work. For example, we’ll process all the files (with our Gulp build process) and put them into place, and refresh your preview window. If you use Live View, it will update that as well.

あなたがファイルを追加したり、削除したり、編集して、保存をすると、我々のサーバーはそれを監視しているので、すぐにそれらの操作に対して、必要な作業を行います。例えば、ファイルを Gulp によるビルド・プロセスで処理し、その結果を適切な場所に配置し、そしてあなたが見ているウィンドウを再描画します。Live View 機能を使っていれば、それも同時に再描画します。

What Happens to Pens?

CodePen の標準機能はどうなりますか?

Nothing! The Pen Editor is here to stay. We often say it’s the heart and soul of CodePen. There are well over 10,000,000 Pens created with it.

何も変わりません!Pen Editor はそのままです。日頃からお伝えしていることですが、Pen Editor は CodePen の心臓であり、魂であります。優に1000万を超える Code があるんですから!

The Pen Editor and the Project Editor will co-exist. You can use whichever one makes sense to use for any given thing you are working on.

Pen Editor と Project Editor は共存していきます。あなたのプロジェクトに最適なほうを選んで使ってください。

How is it Different to the Pen Editor?

どんなところが Pen Editor と Project Editor では異なりますか?

Aside from being able to have multiple files and assets all together in one project, it isn’t too much different!

違いがあるのは唯一、Project Editor は複数のファイルや、画像などのアセットを一つのプロジェクトで使用できることができる点だけなので、そこまで違いはありません!

We try to make coding as comfortable as possible in both.

どちらの機能も、最大限快適なコーディングができるように努力していきます。

You Can Deploy & Domain Map Your Projects

自分のプロジェクトをディプロイし、独自ドメインと結びつけることができます

This deserves some of these: !!!!!

これはかなりすごいことですよ!

We think sharing a URL to the Project Editor is extremely cool. Like Pens, you’re getting to see the behind-the-scenes action of how the web is built. And with the live preview, you aren’t just looking at the code, but what the code is doing.

プロジェクトエディターは、ペンエディターと同じように、そのプロジェクトをシェアするための URL を発行しますが、この機能を私たちはとても気に入っています。これによってウェブサイトがどのように作られているのか、その裏側を見ることができるからです。しかもライブ・プレビューしてくれるので、コードを見るだけではなく、実際にコードが何をしてくれるのかも見ることが出来ます。

But we also want you to be able to build real things with CodePen Projects that are for the world to see. We want you to be able to share a website you’ve built without any of the CodePen interface. Just a website like any other.

しかしそれだけではなくて、さらに、皆さんが「本物」をコードペンプロジェクトで作り、そしてそれを世界中に公開できるようにもしたいと思ったのです。みなさんがつくったウェブサイトを、コードペンのインターフェイスが邪魔しない形で、公開できるようにするということです。シンプルなウェブサイトとしてです。

You can deploy a website to a special CodePen URL at any time. That will be an exact copy of your website. It is entirely public, for anyone to see.

プロジェクトエディターで作ったウェブサイトを、どのタイミングでも、特別な CodePen URL にたいしてディプロイすることが出来ます。これはあなたがエディターで作ったウェブサイトの完全なコピーです。完全にパブリックで、誰でも見ることが出来ます。

Deployments are on demand. Your deployed website will not change until you deploy it again. That’s nice, because it means you can work on your project without affecting the deployed site. Development and production!

ディプロイは自分の好きなタイミングで行うことが出来ます。また、一度ディプロイしたものは、再度ディプロイするまでは更新されません。これは気が利いた機能だと思うのですが、この仕様のおかげで、ディプロイしたサイトに影響をあたえることなく、自分のプロジェクトを編集することができます。

Taking this one step further, you’re able to map a real domain name to your deployed project. We give you IP addresses you can point DNS A-records at. Then your CodePen Project just becomes the way you manage your own website!

さらになんと、プロジェクトエディターで作ったサイトを、独自に用意したドメイン・ネームと結びつけることもできます。Codepe が IP アドレスを用意しますので、これを DNS の A レコードに設定できます。 つまり、あなたがコードペンプロジェクトで作ったものを、自分のサイトとして管理することができるのです!

Differences in PRO Plans

PRO プランとの違い

Free users are limited to one Project with 10 CodePen-hosted files, but otherwise all the same coding features that everyone else gets.

無料ユーザーは、1つのプロジェクトを作ることしか出来ません。また 10 個のファイルを保持することしか出来ません。しかし、それ以外のコーディングに関する機能は、無料ユーザーもすべてを使うことが出来ます。

PRO is really where Projects shines. Of course you get more Projects to work with with more files allowed per Project. Also, you get the deployment and domain mapping features we talked about. You’ll also get other PRO features you’re used to getting from CodePen, like Live View. Live View is great for writing code full-screen in one browser window and previewing in another. Not to mention testing across different devices in real time.

PRO ユーザーになっていただけば、プロジェクト機能を本当に輝いた形で使用をできます。まず無料ユーザーよりもよりたくさんのプロジェクトを立ち上げることが出来ますし、より多くのファイルを使うことができます。そして、ディプロイ機能と独自ドメインとのヒモ付もできます。他にも Live View のように、CodePen の Pro ユーザーに提供していた機能も、使用できるものがあります。Live View 機能は、コーディングはフルスクリーンのブラウザでしておいて、それを他の端末でプレビューすることが出来ます。いうまでもなくこれは様々なデバイスでリアルタイムにテストするのに最適です。

Here’s the breakdown:

Examples / Templates

When you start a brand new Project, you’ll see an (ever evolving) set of template projects in the sidebar:

まずプロジェクトを開始すると、テンプレートプロジェクトがスライドバーにあることに気がつくはずです。(このテンプレートの数は、常に増え続けています)

You don’t have to use those, they are just there to give you some ideas or demonstrate how different types of Projects might work. If you upload a file or manually create one, those template options will disappear and you can work from scratch.

この機能は必ずしも使わなくてはいけないわけではありませんが、どんなことができるのかというアイデアを与えてくれますし、また様々なタイプのプロジェクトがどんなふうに機能するのか、ということを確認することが出来ます。自分のファイルをアップロードしたり、作成した後には、このテンプレートオプションはなくなります。そしてそこからは自分の作業をはじめることができます。

You can also Explore Projects to find other folks interesting work:

他の人が作った面白いプロジェクトを探してみるのもいいでしょう。

Things Will Evolve

進化し続けます

This should go without saying, but of course, this is just our first release of Projects, and we have lots of ideas for improving it as we go.

いうまでもなく、これは私達の最初のリリースにすぎません。まだまだ改善のアイデアがありますので、それに取り組んでいきます。

If you have questions or comments, as always, hit us up in support.

疑問や意見があれば、どんなものでもいいで、教えてください。

ということで使ってみる

まずはプリプロセッサ

File Processing in Projects

対応しているものに関しては、拡張子をつけると勝手に処理してくれる。

読み込むときは、この.processed.こみの名前のファイルを読み込むと。

なるほど。

Autoprefix もしてくれる

このトグルスイッチ、日本人的には非常にわかりにくいんですが、白い丸ボタンが寄ってる方が選ばれてます。つまり下の画像なら、Autoprefixer 使う、Webpack と Babel 使う、です。

確かにしてくれる。(とはいえこれは CodePen にもあった)

WebPack も使える !?

Using Babel in your CodePen Project

まずは app.js で import する。

WebPack と Babel を ON にして、エントリーポイント、つまり Webpack がまとめてくれる対象を決める。

で、それを HTML で読み込む。

順番が前後してしまいましたが、import の対象のファイルを作る。

おおお!!! import 出来ている!!!!

なお、エラーチェックをすると、ES6 を使えなさそうな雰囲気の赤い帯が出るが、もちろん使えます。紛らわしい!Babel で処理してくれてるじゃん!

できたやつ!

出来たページ https://6af12e09bc6d4b859434da10c5631970.codepen.website

エディター https://codepen.io/nakanishi/project/editor/DWRrRA/

ディプロイはさらに一個上の有料アカウントじゃないとできない…

さらに一個上の有料アカウントは高いのと、別のサーバーに自分のドメインで公開すればいいだろう!ということで、やりませんでした。

けっこういい!

せっかく有料会員になったのでガンガン使っていきたいと思います。

1 thought on “CodePen Project 機能がやってきた! 有料会員になった!”

Leave a Reply

Your email address will not be published. Required fields are marked *