display: flex で画面幅に対して相対的に縦横の長さが決まる親要素divの中に、親要素の幅に対して比率で決まる画像を中央に配置する

タイトルが長くなったが、レスポンシブのサイトを画像メインで作る場合によく使うレイアウトで、幅、高さを親要素に対する割合で決めて、さらにその中に伸縮する画像を中央に配置したい場合のやりかた。

.background に対してバックグラウンドイメージを指定すると、背景画像を使ったボタンに、画像のテキストを中央揃え、といったことが可能になる。

See the Pen used display: flex center by nakanishi (@nakanishi) on CodePen.

ちなみに以下のようなレイアウトにしてもflexは思った通りにはならない。何故なら子要素としてボタン用とテキスト用の画像があるため、この2つを並べようとしてしまうため。absolute のほうだけを真ん中に、みたいな気持ちはあるが、ならない。

<div display:flex, justify-content:center, align-items: center/>
<img/ ボタンの画像>
<img/ ボタンのテキスト absolute>
</div>

Sonic Pi メモ

全て公式マニュアルから引用

ショートカットキー

  • cmd R ラン
  • cmd S ストップ
  • cont a 行頭、 cont e 行終わりに移動
  • cont k 一行削除
  • cmd i ヘルプ
  • cmd m コード整列
  • cmd d,h 前後の文字を消す
  • cmd shift b ボタンを消す
  • cnt shif {} バッファータブを左右に移動

言語選択

言語選択を設定画面からおこなうことができない。unix コマンドでできそうな情報もあるがわからなかった。OS の言語が、そのまま Sonic Pi の言語として選択されてしまうので、さしあたって Mac の第一言語を英語に変えた。

音の指定

配列に入れる

配列にいれて再生した場合には、配列内のデータを全て同時に再生するので、ここでは和音が演奏される。

MIDIノートナンバーでの指定

play [52, 55, 59]

音名での指定

play [:E3, :F4, :G5]

配列から一つ指定する

play [:E3, :F4, :G5][2]

↑はG5だけが、単音として再生される。プログラミング恒例の、1番目を指定するには0のスタイル。

コード

play chord(:E3, :minor)

  • chord(:E3, :m7)
  • chord(:E3, :minor)
  • chord(:E3, :dim7)
  • chord(:E3, :dom7)

使えるコードのリストは Lang 内の chord の中にある。特殊なやつは”で囲むパターン。

(chord :C, ‘1’)
(chord :C, ‘5’)
(chord :C, ‘+5’)
(chord :C, ‘m+5’)
(chord :C, :sus2)
(chord :C, :sus4)
(chord :C, ‘6’)
(chord :C, :m6)
(chord :C, ‘7sus2’)
(chord :C, ‘7sus4’)
(chord :C, ‘7-5’)
(chord :C, ‘m7-5’)
(chord :C, ‘7+5’)
(chord :C, ‘m7+5’)
(chord :C, ‘9’)
(chord :C, :m9)
(chord :C, ‘m7+9’)
(chord :C, :maj9)
(chord :C, ‘9sus4’)
(chord :C, ‘6*9’)
(chord :C, ‘m6*9’)
(chord :C, ‘7-9’)
(chord :C, ‘m7-9’)
(chord :C, ‘7-10’)
(chord :C, ‘9+5’)
(chord :C, ‘m9+5’)
(chord :C, ‘7+5-9’)
(chord :C, ‘m7+5-9′)
(chord :C, ’11’)
(chord :C, :m11)
(chord :C, :maj11)
(chord :C, ’11+’)
(chord :C, ‘m11+’)
(chord :C, ’13’)
(chord :C, :m13)
(chord :C, :add2)
(chord :C, :add4)
(chord :C, :add9)
(chord :C, :add11)
(chord :C, :add13)
(chord :C, :madd2)
(chord :C, :madd4)
(chord :C, :madd9)
(chord :C, :madd11)
(chord :C, :madd13)
(chord :C, :major)
(chord :C, :M)
(chord :C, :minor)
(chord :C, :m)
(chord :C, :major7)
(chord :C, :dom7)
(chord :C, ‘7’)
(chord :C, :M7)
(chord :C, :minor7)
(chord :C, :m7)
(chord :C, :augmented)
(chord :C, :a)
(chord :C, :diminished)
(chord :C, :dim)
(chord :C, :i)
(chord :C, :diminished7)
(chord :C, :dim7)
(chord :C, :i7)

アルペジオ

play_pattern chord(:E3, :m7)

間隔、sleep: 1 スリープタイムを 0.25 に明示的に指定。

play_pattern_timed chord(:E3, :m13), [0.25, 0.5]

1番目、3番目、5番目…は0.25で、2,4,6…は0.5で。

スケールの演奏

play_pattern_timed scale(:c3, :major), 0.125, release: 0.1

We can even ask for more octaves: オクターブ範囲を指定

play_pattern_timed scale(:c3, :major, num_octaves: 3), 0.125, release: 0.1

How about all the notes in a pentatonic scale?  ペンタトニックもある

play_pattern_timed scale(:c3, :major_pentatonic, num_octaves: 3), 0.125, release: 0.1

ランダム選択

use_synth :tb303
loop do
play choose(chord(:E3, :minor)), release: 0.3, cutoff: rrand(60, 120)
sleep 0.25
end

Eminor の3音からランダムで選択

ループさせる ring 機能

puts [52, 55, 59][1]
counter = 0
notes = [52, 55, 59]
puts notes[counter]

この2つのどちらかで可能

(ring 52, 55, 59)
[52, 55, 59].ring

配列の操作

8.5 ring chains に多く配列操作の仕組みがある。

WebStorm の設定を複数の端末で共有する

WebStorm の設定、例えばショートカットキーやエディター画面の色、等を Git で管理して、保存、参照することができます。現在の最新版、WebStorm 2017.1 には必要なプラグインが最初から入っています。

同期といってもローカルの設定を変更した場合に、それがリモートのリポジトリに勝手に反映されるのではないようです。ローカルでの変更をリモートのリポジトリに反映させたい場合には、File → Setting Repository から Overwrite Remote してあげればいいようです。

なので運用としては、常にローカルの設定をリモートと同期させておいて、ローカルで設定変更をしたら、それをリモートにプッシュ。でいいのではないでしょうか。

https://www.jetbrains.com/help/webstorm/2017.1/settings-repository.html

Sharing Your IDE Settings

On this page:

Introduction

WebStorm allows you to share your IDE settings between different instances of WebStorm (or other IntelliJ platform-based) products installed on different computers.

WebStorm は、複数の異なるコンピューターにインストールされていても、その設定を共有することができます。

This is useful if you are using several WebStorm installations, or want to implement the same settings among your team members or company-wide.

この機能は次の場合に有用です。例えばウェブストームを複数のパソコンにインストールしている場合や、同じ設定をチームメンバーや会社で共有したい場合です。

Prerequisites

 

Before you start working with Settings Repository, make sure that the Settings Repository plugin is enabled. The plugin is bundled with WebStorm and is activated by default. If the plugin is not activated, enable it on the Plugins page of the Settings / Preferences Dialog as described in Enabling and Disabling Plugins.

設定保存用のレポジトリでの作業をするまえに、まずは Setting Repository プラグインが有効になっていることを確認してください。このプラグインはウェブストームに最初から含まれており、初期設定で有効になっています。もし有効になっていなければ設定画面のプラグインページで有効にしてください。

Configuring settings repository

If you want to share your IDE settings, perform the following steps:

IDE の設定を共有するためには、次の作業をおこなってください。

  1. Create a Git repository on any hosting service, such as Bitbucket or GitHub.  Git リポジトリを Bitbucket や GitHub といたホスティングサービス上で作成してください。
  2. On the computer where the WebStorm instance whose settings you want to share is installed, navigate to File | Settings Repository. Specify the URL of the repository you’ve created and click Overwrite Remote.
    共有したい設定がされているウェブストームがインストールされているパソコンで次の作業をします。File → Settings Repository → 設定を保存するためのリポジトリのURLを記入します。その上で Overwite Remote を選択して、リポジトリに上書きします。
  3. On each computer where you want your settings to be applied, in the Settings/Preferences dialog, expand the Tools node and choose Settings Repository, specify the URL of the repository you’ve created, and click Overwrite Local.You can click Merge if you want the repository to keep a combination of the remote settings and your local settings. If any conflicts are detected, a dialog will be displayed where you can resolve these conflicts.
    次に、保存した設定を適用させたいパソコンでは次の作業をおこないます。Settings/Preferences → Tools → 先程作り設定を保存したリポジトリの URL を設定します。そして Overwrite Local をクリックしてローカルの設定を上書きします。もしリモートリポジトリの設定と自分のローカルの設定との組み合わせにしたい場合は、Merge を選択します。それによってコンフリクトが発生した場合は、そのコンフリクトを解消するようにダイアログが表示されます。If you want to overwrite the remote settings with your local settings, click Overwrite Remote.
    ローカルセッティングをリポジトリに上書きしたい場合には Overwrite Remote を選択します。

    Your local settings will be automatically synchronized with the settings stored in the repository each time you perform an Update Project or a Push operation, or when you close your project or exit WebStorm.

    ローカルの設定は自動的にリポジトリに保存された設定と、次のタイミングで同期します。プロジェクトをアップデートした時、プッシュした時、プロジェクトを閉じた時、ウェブストームを閉じたときです。

If you want to disable automatic settings synchronization, navigate to File | Settings | Tools | Settings Repository and disable the Auto Sync option. You will be able to update your settings manually by choosing VCS | Sync Settings from the main menu.

設定の自動同期を無効にしたい場合は、File → Setting → Tools → Settings Repository から Auto Sync を向こうにしてください。その場合は、VCS → Sync Setting から手動で同期を行うことができます。

Authentication

On the first sync, you will be prompted to specify a username and password.

It is recommended to use an access token for GitHub authentication. If, for some reason, you want to use a username and password instead of an access token, or your Git hosting provider doesn’t support it, it is recommended to configure theGit credentials helper.

Note that the macOS Keychain is supported, which means you can share your credentials between all IntelliJ Platform-based products (you will be prompted to grant access if the original IDE is different from the requestor IDE).

Configuring a read-only source

Apart from the Settings Repository, you can configure any number of additional repositories containing any types of settings you want to share, including live templates, file templates, schemes, deployment options, etc.

These repositories are referred to as Read-only sources, as they cannot be overwritten or merged, just used as a source of settings as is.

To configure such repositories, do the following:

  1. In the Settings/Preferences dialog, expand the Tools node and choose Settings Repository.
  2. Click /help/img/idea/2017.1/add_icon.png and add the URL of the GitHub repository that contains the settings you want to share.

Synchronization with the settings from read-only sources is performed in the same way as for the Settings Repository.

z-index, stacking context の説明

重なり順をコントロールするためには z-index を使えばいい。上にしたい要素ほど高い z-index の値を与えればいい。と思っていたら全然重なり順が思った通りにならない!!といった経験は CSS を書き始めたばかりの人間が必ず経験する出来事だと思う。

私わかったはず!

See the Pen vxwyze by nakanishi (@nakanishi) on CodePen.

まずこの記事を読んでほしいんですが、経験の浅いウェブディベロッパーが z-index で混乱するのは、次の原則を知らないからだと。「z-index は要素の position が absolute, fixed, ralative に指定されていないと機能しない。」作業で疲れてくるとこういうところを見逃しがちです。

その上で MDN のこの記事を読みます。Stacking Context に関する話です。

スタッキングコンテクストを正確に把握するのは難しいのですが、以下の部分が重要です。

It is important to note that DIV #4, DIV #5 and DIV #6 are children of DIV #3, so stacking of those elements is completely resolved within DIV#3. Once stacking and rendering within DIV #3 is completed, the whole DIV #3 element is passed for stacking in the root element with respect to its sibling’s DIV.

#4, #5, #6 の DIV は #3 の子要素なので、#4, #5, #6 の重なり順は DIV#3 の中だけで解決されます。DIV#3 のなかで重なり順が処理された後は、DIV#3 は一つ上の階層、つまりここでは Root エレメントの階層の中での重なり順の処理に移行します。ここではルート階層内の親要素とかなり順を考慮することになります。

つまり

  1. まずは重なり順に関係してくる要素には必ず position: relative, absolute, fixed のどれかを付ける。(他にも flex とか opacity:0 以外でもなるようだけれども、重なり順のコントロールのためには普通は使わない)
  2. 重なり順が z-index でコントロールできるのは「兄弟要素」の間だけ。
  3. 子要素は絶対に親要素の下には配置できない。
  4. 2,3 が起きるのは スタッキング・コンテクストという考え方が必要になる。
  5. スタッキング・コンテクストのダイジェスト:ある要素の中に potision: static 以外の position を持つ子要素がある場合、まずはその子要素の中だけで z-index の順番に重なり合う。この重なりが決まった時点で、それらの子要素は、親要素の上に乗っかって、それら全体で一枚の紙のような扱いになる。一枚の紙のようになった要素は、さらに親要素があって、兄弟要素があれば、兄弟要素の中でまたこのスタッキングコンテクストの処理をする。→以降無限にこの処理

ということで DOM ツリーの中で、同じ親要素を持つ要素同士 = 兄弟要素内でしか z-index の並び順は効かない。ってことですね。 わかればなんということはない!!

 

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