npm script でタスク処理する開発環境を作った npm スクリプトでタスク処理をする環境を作りました。akabebeko さんのものを元に修正しました。.sass, Babel, Browserify, 開発用サーバーを立てる、デプロイ用のイメージを作成する

アカベコさんの記事、リポジトリを元に、自分にあった環境を作成しました。

npm-scripts で Web フロントエンド開発を管理する

https://bitbucket.org/Y_NAKANISHI/web-start-npm-script

変更点は以下

  • stylus ではなく Sass を使用する。そのための npm は node-sass を用いる。
  • Sass の import のためのディレクトリも最初から用意。
  • assets以下に、jsだけしか入っていないフォルダ (例えば自分以外の人が以前のプロジェクトで書いたjsを引き継ぐとか、npm にないライブラリを、bower も使わないで管理したいとかそういうフォルダ) を無理くりコピーする。本当は cpx でバチコーンと出来るはずだとは思うんですが、書き方がわからなかった!!
  • 自分は絶対使うので最初から jQuery を仕込む。

もう少し改善したい。

ScrollMagic のドキュメントを翻訳する

http://scrollmagic.io/docs/index.html

ランディングページで多用される、スクロール位置でトリガーされるアニメーションを実装するために便利なライブラリ、ScrollMagic について学びます。

今回は上から全部翻訳するのではなく、必要な順番に進めていきました。

結果できたもの

https://codepen.io/nakanishi/project/full/ZBwaVX/

Getting Started : How to use ScrollMagic

まずは次の記事を読むことで基礎的な使い方を理解。

https://github.com/janpaepke/ScrollMagic/wiki/Getting-Started-:-How-to-use-ScrollMagic

How does ScrollMagic work?

ScrollMagic はどのように動作しますか?

The principle design pattern of ScrollMagic is a controller[1] that has an arbirtary number of scenes[2] attached to it.

ScrollMagic は基本的に、controller[1] と、それに紐付けられる任意の下図の scenes[2] から構成されています。

  1. There is one controller for each scroll container. In most cases there is only one controller object and the scroll container is the browser window. But you can also use DIV elements for scrolling and even have multiple containers on your page. The controller also defines which direction should be scrolled (horizontal or vertical) and is responsible for keeping all scenes updated.

スクロールするコンテナ毎にそれぞれ1個の controller をもつようにします。大抵のサイトでは、ブラウザ・ウィンドウ用に1つのコントローラーをもつことになります。他にもスクロールする複数の要素を保つ場合には、複数のコントローラーを用意し、それぞれのスクロールに対して ScrollMagic を使うこともできます。controller は、どちらの方向に(縦か横か)スクロールするかを定義することができ、?また全てのシーンを常に最新の状態で保持します。

  1. A scene defines what should happen when, meaning at which scroll position. It can trigger animations, pin an element, change element classes or anything else you might desire.

Scene は、何が、いつ(つまりどのスクロールポジションで)始まるかを定義します。scene はアニメーションをトリガーしたり、要素を固定したり、要素のクラスを変更したり、他にもなんでもできます。

Defining the Controller

コントローラーを定義する

As mentioned above in most cases the scroll container is the browser window. To create a ScrollMagic controller with the default settings we use the main ScrollMagic.Controller()class. We create a new instance of it and assign it to a variable, so we can reference it later:

既に述べたように、多くの場合は controller はブラウザ・ウィンドウ用に一つだけ作成する場合が多いでしょう。ScrollMagic の controller を初期設定の状態で作成するには、ScrollMagic.Controller() クラスを使用します。これを用いて新しいインスタンスを作成し、これに対して変数を与えます。変数については後述します。

var controller = new ScrollMagic.Controller();

That’s it! Now for the more interesting part:

これだけです。では続いて、ScrollMagic の面白いパートに進みましょう。

Defining Scenes

Scene を定義する

Scenes are created by using the ScrollMagic.Scene() class. A ScrollMagic.Scene defines where the controller should react and how. Here we define a variable called “scene” and we’ll create a new ScrollMagic.Scene() instance.

Scene は ScrollMagic.Scene() クラスを用いて作成します。ScrollMagic.Scene は、どの位置から controller が反応し、そしてどのような動作をするかを定義します。次のコードで、scene という名前の変数を指定し、その中に ScrollMagic.Scene() で作成した新しいインスタンスを代入しましょう。

var scene = new ScrollMagic.Scene();

Inside ScrollMagic.Scene we can place an object of associated properties and values that are made available according to the docs
These options describe the behavior of our Scene and in order to figure out what value has what effect you can play around in the Scene Manipulation Example

ScrollMagic.Scene の中に、オブジェクトを配置することができます。このオブジェクトはプロパティと値を持ちます。どんなものが使用可能かは docs  を参照してください。これらのオプションでどのような挙動をシーンにさせるのかを定義します。どんな効果があるのかを Scene Manipulation Example で色々試してみてください。

var scene = new ScrollMagic.Scene({
  offset: 100, // start scene after scrolling for 100px
  duration: 400 // pin the element for 400px of scrolling
})

100px スクロールした後に scene をスタートさせて、400px スクロールするまで固定します。

Adding Scenes to Controller

Scene を コントローラーに追加する

In order to have the scenes react to the scrolling of the container we have to add our scene to the controller we defined at the very beginning…

scene をコンテナのスクロールに反応させるために、scene を controller に追加しなくてはいけません。そう、一番最初に定義した controller にです。

var scene = new ScrollMagic.Scene({
  triggerElement: '#pinned-trigger1', // starting scene, when reaching this element この要素にスクロールが到着したら、シーンを始めます
  duration: 400 // pin the element for a total of 400px 要素を400px固定します
})
.setPin('#pinned-element1'); // the element we want to pin 固定したい要素を指定します

// Add Scene to ScrollMagic Controller シーンを Controller に追加します
controller.addScene(scene);

If you desire multiple scenes at once you can pass them to the controller just as the example shows below:

一度に複数のシーンを追加したい場合には、次のように書くこともできます。

// Add Scene to ScrollMagic Controller
controller.addScene([
  scene1,
  scene2,
  scene3
]);

Instead of telling the controller what scenes to add you can also tell the scene to be added to a certain controller:

controller に対してどのシーンを追加するかを指定するのではなくて、シーンに対してどの controller に自分自身を追加するかを指定することもできます。

var scene = new ScrollMagic.Scene({
  triggerElement: '#trigger1'
})
.addTo(controller); // Add Scene to ScrollMagic Controller

var scene2 = new ScrollMagic.Scene({
  triggerElement: '#trigger2'
})
.addTo(controller); // Add Scene to ScrollMagic Controller

In the above example we’re using a technique called ”chaining” with the addTo(). If no Semicolon ends the line, we can continue adding ScrollMagic.Scene methods and ”chain” them together.

上記の例で、addTo()の部分でいわゆる「チェイニング」という技術を使っています。セミコロンが行の終わりにない場合には、ScrollMagic.Scene のメソッドを続けていくことができ、それによって連結していくことができます。

Next let’s start adding some animation to our scenes in the next Chapter: Tweens

Plugin: Velocity

ScrollMagic 単体よりも、Velocity.js と連携することでより多用なアニメーションを可能にすることが出来る。そのためのプラグインとメソッドについて。

http://scrollmagic.io/docs/animation.Velocity.html#Scene.setVelocity

This plugin is meant to be used in conjunction with the Velocity animation framework. It offers an easy API to trigger Velocity animations.

このプラグインは アニメーションのためのフレームワークである Velocity と連携するためのものです。これによって 簡単に Velocity のアニメーションをトリガーする API を使うことができます。

With the current version of Velocity scrollbound animations (scenes with duration) are not supported.
This feature will be added as soon as Velocity provides the appropriate API.

現在の Velocity のバージョンでは、scrollbound アニメーションは対応していません。(scene に duration を与えた場合) これは Velocity 側が適切な API を提供をしてくれれば、すぐに実現できます。

To have access to this extension, please include plugins/animation.velocity.js.

この拡張機能を使うには次のプラグインをインストールしてください。

Source:

(訳注:多分ここからも手に入る https://github.com/janpaepke/ScrollMagic/tree/master/scrollmagic)

Scene.setVelocity(elems, properties, options) → {Scene}

順番が逆になりますが、こちらのほうが重要なので。

Add a Velocity animation to the scene. The method accepts the same parameters as Velocity, with the first parameter being the target element.

Velocity アニメーションをシーンに追加します。このメソッドは Velocity と同じパラメーターを使うことができます。最初のパメーターは対象の要素になります。

To gain better understanding, check out the Velocity example.

より理解するために、次のサンプルを参照してください。Velocity example.

Parameters:

Scene.setVelocity(elems, properties, options) → {Scene}

Name Type Description
elems object | string One or more Dom Elements or a Selector that should be used as the target of the animation.

1つ以上の Dom 要素か、セレクタを指定します。これがアニメーションの対象となります

properties object The CSS properties that should be animated.

アニメーション用の CSS プロパティ

options object Options for the animation, like duration or easing.

アニメーションのためのオプション
例えば duration や easing

Source:
Returns:

Parent object for chaining. { Scene }

Example
// trigger a Velocity animation
scene.setVelocity("#myElement", {opacity: 0.5}, {duration: 1000, easing: "linear"});

Scene.removeVelocity(reset) → {Scene}

?あとで

Remove the animation from the scene. This will stop the scene from triggering the animation.

Using the reset option you can decide if the animation should remain in the current state or be rewound to set the target elements back to the state they were in before the animation was added to the scene.

Parameters:
Name Type Argument Default Description
reset boolean <optional> false If true the animation will rewound.
Source:
Returns:

Parent object for chaining. { Scene }

Example
// remove the animation from the scene without resetting it
scene.removeVelocity();

// remove the animation from the scene and reset the elements to initial state
scene.removeVelocity(true);

Plugin: addIndicators

http://scrollmagic.io/docs/debug.addIndicators.html#Scene.removeIndicators

This plugin was formerly known as the ScrollMagic debug extension. It enables you to add visual indicators to your page, to be able to see exactly when a scene is triggered.

このプラグインは以前 ScrollMagic debug extension と呼ばれていました。このプラグインを使うことで、ページにデバグ用のインジケーターを追加し、視覚的にシーンがいつトリガーされるのかを確認することができます。

To have access to this extension, please include plugins/debug.addIndicators.js.

Source:

 

new ScrollMagic.Controller(options)

Every ScrollMagic.Controller instance now accepts an additional option.
See ScrollMagic.Controller for a complete list of the standard options.

それぞれの ScrollMagic.Controller インスタンスは、追加オプションを受け取ることができます。受け取ることが出来るオプションの全リストは ScrollMagic.Controller をみてください。

Parameters:

Name Type Argument Description
options object <optional> Options for the Controller.

Properties

Name Type Argument Default Description
addIndicators boolean <optional> false If set to true every scene that is added to the controller will automatically get indicators added to it.

true を指定すると、このコントローラーに追加された全てのシーンに対して、自動的にインジケーターを表示するようになります。

Source:

Example

// make a controller and add indicators to all scenes attached
// コントローラーを作り、このコントローラーに追加される全てのシーンに対して、インディケーターを表示させる
var controller = new ScrollMagic.Controller({addIndicators: true});

// this scene will automatically have indicators added to it
// 次のコードで作成されたシーンは自動的にインディケーターが表示されます

new ScrollMagic.Scene()
               .addTo(controller);

triggerHook

http://scrollmagic.io/docs/ScrollMagic.Scene.html#constructor

これはシーンが持つことができるオプションの一つで、シーンのトリガー位置を微調整できる。( ここで試すといい http://scrollmagic.io/examples/basic/scene_manipulation.html )

triggerHook number | string  トリガーフックの持つことが出来るパラメーターは数字か文字列
デフォルトの設定は “onCenter”
Can be a number between 0 and 1 defining the position of the trigger Hook in relation to the viewport. 0から1までの数字を設定でき、これによってどの視線位置(ブラウザのどの位置)からトリガーを開始するかを指定する。

Can also be defined using a string: 次のように文字列で指定することもできる。

“onEnter” => 1 //これはブラウザの一番下の部分でスタートさせる
“onCenter” => 0.5 //これはブラウザの真ん中
“onLeave” => 0 // これはブラウザの一番上でスタート

// create a standard scene and add it to a controller
new ScrollMagic.Scene()
.addTo(controller);

// create a scene with custom options and assign a handler to it.
var scene = new ScrollMagic.Scene({
duration: 100,
offset: 200,
triggerHook: “onEnter”,
reverse: false
});

reverse

これも triggerHook と同じで、シーンが持つことができるオプションの一つで、スクロール位置を戻した時に、アニメーションを逆再生するかしないかを指定する。

boolean をとる
true が初期値
Should the scene reverse, when scrolling up? スクロールを戻した時に、アニメーションを逆再生させるかどうかを指定する。

window.Main = Main;

<script src="./js/velocity.min.js"></script> いつものやつ
<script src="./js/velocity.ui.min.js"></script> UIアニメーション
<script src="./js/ScrollMagic.min.js"></script> 位置情報からトリガーするライブラリ
<script src="./js/animation.velocity.min.js"></script> ScrollMagic のプラグインで velocity との連携を行う
<script src="./js/app.js"></script> メインスクリプト

 

WebStorm Bitbucket

Bitbucket 上に Git リポジトリを作成していれば、そのリポジトリに関連付けられた Bitbucket Issue の ID をコミットメッセージに入れることで紐付け出来る。

#IDnum コミットメッセージ

webstormとも紐付けれる

Settings -> Version Control -> Issue Navigation

[2:58]
ここに課題(Issue)のルールとURL(正規表現)を設定すると、IDEからBitbucketの課題ページを直接開けるよ

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/

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

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

けっこういい!

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

display: flex を使ってヘッダー、均等並びのボックスを実装

See the Pen flex ヘッダー等の横棒をそろえる二段 by nakanishi (@nakanishi) on CodePen.

//赤い要素に幅があれば、
//横に詰めていって、入らなくなったら wrap する指定
//ラップした上で横方向均等揃えになる

.flex-box
width: 200px
background-color: blue
//おやう要素に flex を指定
display: flex
//横並びを指定する
flex-direction: row
//左、右は詰めて、あとは均等揃え
justify-content: space-between
//垂直方向を真ん中揃え
align-items: center
//折り返しを許可
flex-wrap: wrap

&__item
width: 50px
height: 10px
background-color: red
border: solid 1px black

See the Pen flex ヘッダー等の横棒をそろえる by nakanishi (@nakanishi) on CodePen.

.title
font-size: 60px
color: yellow
text-align: center

.flex-box
//flex-box を指定する要素には幅を指定する。
//絶対指定する必要はないが、その幅の中で配置が決まる
width: 640px
background-color: blue
//おやう要素に flex を指定
display: flex
//横並びを指定する
flex-direction: row
//左、右につめて、あとは均等揃え
justify-content: space-between
//垂直方向を真ん中揃え
align-items: center

//display: flex した対象の
//子要素には何も指定しなくていい
&__item
width: 150px
height: 10px
background-color: red
border: solid 1px black

CodeGrid の連載で紹介されていたサンプルを元に、一番シンプルなメモ帳を作成

これから始めるVue.js 2.0
第3回 コンポーネントの作成と連携

上記の記事で紹介されているメモ帳をさらにシンプルにしたものを作成しました。以下メモなので、日本語が怪しいです。

http://better-than-i-was-yesterday.com/test-app/vue-memo/index.html

まずは vue-cli をインストールしておくこと。npm install -g vue-cli

以下で、今いるディレクトリに開発に必要なものを一式用意してくれる。vue-router はなしにしたほうがシンプルな構成になるので、さしあたってテストをする上ではナシをおすすめ。

$ vue init webpack

Continue reading “CodeGrid の連載で紹介されていたサンプルを元に、一番シンプルなメモ帳を作成”

Webstorm EAP 版が Vue.js をサポートしたので使ってみました

Webstorm の初期設定では .Vue 拡張子のファイルはうまく色づけ等々してくれなかったので、方法はないか検索した所、Webstorm EAP 版が Vue.js をサポートを2月から始めたとのことでしたので、ので使ってみました。EAP は Early Access Preview build の略称のようなので、ベータ版的なことでしょうか。

WebStorm 2017.1 EAP, 171.2822: Vue support, trailing comma, Dart improvements

おおー。vueテンプレートも綺麗に色が付きます、見やすい!!

GitBook で本を作る

GitBook の前に、まずはつらつらと既存の書籍制作に関する自分のまとめを…

書籍制作上の難しさ

本を作るためには、中身を書いて編集をし、そして最後に、ユーザーが見れるフォーマットでアウトプットしなくてはいけません。ユーザーが見れるフォーマットとはつまり、紙の物理的な本だったり、PDFだったり、Kindle 用の電子書籍フォーマットだったり、HTML のサイトのことです。私は、この中身をフォーマットに変換する作業こそが一番手間のかかるものであり、かつ技術的にクリアしなくてはいけないハードルが高いと感じています。(紙、各種デジタルデータではそれぞれ必要とされる技術が異なるため) そしてこの悩みは、専業 DTP 技術者ではないひと全般に共有される悩みではないかなと思います。

マルチプラットフォームで出力するのはとてもむずかしい

書籍のフォーマットにコンテンツを変換する作業において、特に難しいのはマルチプラットフォームでの出力、つまり同じコンテンツから紙版や PDF 版や HTML 版といった様々なプラットフォームを作り出すことです。なぜなら、繰り返しになりますが、プラットフォームによって必要な技術が完全に異なるからです。

フォーマットによって扱う概念が異なる

わかりやすいところでいえば、紙の本を作るためには「トンボ」、「断ち切り」といった印刷後に各ページを裁断してサイズを調節することにともなう概念や、もっと根本的には紙のサイズ、紙の厚さ(重さ)といった物理的な問題、それから「1ページ」という枠組みも処理しなくてはいけません。しかし、当然ですがデジタルデータ、例えば HTML による静的なサイトの場合、あとで裁断する作業は発生しませんので、トンボも断ち切りを考える必要もありませんし、紙の厚さを決める必要も、1ページにどれくらいのコンテンツが入るかを考える必要もありません。(もちろん ウェブページの場合、紙とは異なるデザインの必要が発生しますが) PDF は    HTML よりもう少し紙媒体に近いといえます。それは「1ページの概念」があるからです。ユーザーの体験としては、ちょうど紙の本をデジタルデータに変換したような形が PDF です。(実際、Word や Pages といった文書作成ソフトから PDF を作成するのはかなり精度が高く、また簡単)

紙と PDF、HTML と ePub はそれぞれ近い

そして、実は書籍関係のフォーマットとして紙媒体からかなり遠いのが、HTML、ePub、Kindle 用フォーマットです。(反対にこれら同士はかなり近い) なぜなら、これらのフォーマットにおいては「1ページの概念がそもそもないか、もしくは流動的」だからです。

HTML をブラウザで見る場合、縦方向に関しては無限に長さを確保できます。つまり、1ページというくくりは発生しません。横方向は、紙媒体は固定ですが、HTML をブラウザでみるにあたっては、ユーザー各自のデバイスによって変化します。しかもかなり。結果として、コンテンツの配置が流動的になりますし、流動的にすることで、どんな横幅の端末でみても見やすい最終アウトプットを実現できます。これは特にスマートフォンにおいて顕著で、狭い画面でも見やすいコンテンツを作成するには PDF よりも HTML 系のフォーマットのほうが明らかに優れています。

フォーマットの特性、特に1ページという概念の有無によってかなり編集段階の違いが生まれる

結局のところ、HTML や ePub のような、1ページという概念が希薄な「巻物タイプ」か、紙の本やPDFのような「見開き1ページがあるタイプ」の2つにわけられると思うのですが、この2つは編集段階で違いがかなりあります。なぜなら、

GitBook

GitBook の良いところは、HTML と PDF をいっぺんに作成してくれる可能性を持っていることです。ただし、PDF のフォントが記事執筆時点では、おかしいので、自分で手を加える必要があります。それでも HTML と PDF の両方をカバーできる可能性が現実的にあるのは GitBook とオライリーのアトラスだけです。

ファイルの作成、編集、ディレクトリの移動はローカルで

GitBook はその名の通り、管理の中心が Git によって行われていますので、Git でローカルにクローンしてあげれば、WebStorm や Atom といった IDE 及び エディタで編集ができます。GitBook は基本的に各記事は .md ファイル、目次だけは a リンクが貼られた .md ファイルなので、ファイル及びリンクの管理は IDE で管理したほうが楽です。

各記事の編集はオンラインのエディタで

IDE でマークダウンを書いてももちろんいいのですが、私個人はウェブ上の辞書や、その他検索を多用するので、むしろブラウザで書いたほうが早いと思っています。なのでローカル環境の IDE でマークダウンを書くことはありません。オンラインのエディタが早いと思います。ただし、オンラインエディタの場合、publish するとGit commit を強制的にしてしまうので、コミットツリーが汚くなります。

HTML に書き出すには gitbook-cli で

オンラインエディタで編集して、そのまま HTML に書き出すことはできるのですが、その場合、GitBook のサービス上にそのページが構成されます。もし自分の独自ドメイン上に配置したいなら、ローカル開発環境で GitBook CLI を使ってビルドしたほうがいいと思います。

PDFを作るにはオンラインエディタ上で

オンラインエディタから PDF に書き出すことができます。ただし、もしかしたら GitBook CLI を使ったほうが詳細な設定ができるのかもしれません。(特に現状では大きなフォントの問題があるので、これを解決するにはローカルで処理した方がいいのかも。もう少し調べる必要あり)