codepenスニペットメモ
codepenで自分がいいと思ったものを貼り付ける
主に参考にしているサイト
cssのみですりガラス
See the Pen CSS - Frosted Glass by Kyle Wetton (@kylewetton) on CodePen.
ページトップボタンでどのくらいスクロールしたかわかる
See the Pen Back to top with progress indicator by Ivan Grozdic (@ig_design) on CodePen.
マウスカーソルでどのくらいスクロールしたかわかる
See the Pen Cursor with progress indicator by Ivan Grozdic (@ig_design) on CodePen.
variableフォントを使った演出
See the Pen Variable font animation by Michelle Barker (@michellebarker) on CodePen.
インタラクティブな表現
See the Pen Perlin Noise by Victor Vergara (@vcomics) on CodePen.
Appleのサイトのようなスクロールアクション
See the Pen Apple Watch Scroll Border | @keyframers 1.20.0 by @keyframers (@keyframers) on CodePen.
stylelint,prettierを使ってscssのコード品質を保つ
scssのみでjsについての変更・設定はなし
stylelint, prettierのインストール
$ yarn add stylelint stylelint-config-standard stylelint-scss prettier prettier-stylelint stylelint-config-prettier
参考
- stylelint - npm
- stylelint-config-standard - npm
- stylelint-scss - npm
- prettier - npm
- prettier-stylelint - npm
- stylelint-config-prettier - npm
prettierの設定・stylelintの設定
.prettier
{ "printWidth":120, "tabWidth":2, "useTabs":false, "singleQuote":true, "proseWrap":"preserve" }
参考
.stylelintrc.json
{ "plugins":[ "stylelint-scss", ], "rules":{ "indentation":2, "declaration-block-no-shorthand-property-overrides":true, "declaration-colon-newline-after":null, "at-rule-no-unknown":[true,{ "ignoreAtRules":["function","if","for","each","include","mixin","content"] }], }, "extends":[ "stylelint-config-standard", "stylelint-config-prettier" ] }
参考
package.json(npm script)
app/frontend/stylesheets/ よりも下にscssファイルを入れている場合。
{ "scripts":{ "lint:stylesheet":"stylelint --fix app/frontend/stylesheets/**/*.scss", "format:stylesheet":"prettier-stylelint --quiet --write app/frontend/stylesheets/**/*.scss" }, }
ルールについての一部
- stylelintのルール簡単説明（v5.4.0） · GitHub
- selector-list-comma-newline-after · stylelint
- no-descending-specificity · stylelint
- at-rule-no-unknown · stylelint
要素の並び替えを行う
stylelint-order - npm をインストールする
$ yarn add stylelint-order
参考
.stylelintrc.json に設定を記載する
記載後の状態
{ "plugins":[ "stylelint-scss", "stylelint-order" ], "rules":{ "indentation":2, "declaration-block-no-shorthand-property-overrides":true, "declaration-colon-newline-after":null, "at-rule-no-unknown":[true,{ "ignoreAtRules":["function","if","for","each","include","mixin","content"] }], "order/order":[ "less-mixins", "dollar-variables", "custom-properties", "declarations", "rules" ] }, "extends":[ "stylelint-config-standard", "stylelint-config-prettier" ] }
参考
commit時に自動的に反映されるようにする
パッケージをインストール
husky - npm と lint-staged - npm のインストールを行う
$ yarn add husky lint-staged
参考
package.jsonに記載
{ "scripts":{ "precommit":"lint-staged", }, "lint-staged":{ "*.scss":[ "yarn format:stylesheet && yarn lint:stylesheet", "git add" ] }, }
参考
xdのプラグインメモ
要素のcssを取得したい
ここからインストール
Copy CSS と入力するとでてくる
cssを取得する
書き出されるコード(一例)
width: 360px; height: 70px; border-radius: 4px; background: linear-gradient(#48b047 0%, #45d943 99.56%, #45d943 100%); border: 1px solid #399b38;
参考 : https://yukinishimura.net/adobe-xd-coding/
html形式で出力したい
プラグイン「Web Export」を使う。
選択画面
選択するとこんな感じの画面が出てくる
もろもろ設定すると書き出しが行われる
注意
適当に選択すると余計なものも出てくる。
多角形の図形を作る
http://romantist.jp/blog/xd-pulgin-polygon/
三角形などの多角面の図形を簡単に作ってくれるプラグイン。
図形を選んで cmd + c で
<svg xmlns="http://www.w3.org/2000/svg" width="32.209" height="58.962" viewBox="0 0 32.209 58.962"> <path id="パス_128" data-name="パス 128" d="M2.209-22.481-30,7V-51.962Z" transform="translate(30 51.962)"/> </svg>
のような感じでsvgの書き出しを行ってくれる。
対象のもの
サイトで使われている色などを取得する
「Mimic」のプラグインを使えば現在のサイトで使われている色などを取得することができる。
https://www.google.com/ と入力すると
のような感じで出力を行ってくれる。
photoshop バッチ処理・レイヤーからテキストのコピースクリプトのメモ
バッチ処理
一括でpngやjpgを変更できるように
やり方
1. 「ウィンドウ → アクション」を選択
アクションパネルが出る
アクションの使い方については省略。
2. 画像を開いて、画像を保存する
開くファイルは適当。
画像の保存について 「書き出し → web用に保存」を選択(画像の例はjpgの場合)
3. 「自動処理 → ドロップレット」を選択
デスクトップに書き出したものが出ればいいと思ったので、デスクトップで設定。
設定が完了するとデスクトップに以下のようなアイコンが表示される
変換の様子
(変換に10秒くらいかかる・・・？)
参考
レイヤーからテキストをコピーできるスクリプト
https://www.soramane.com/sorairo/design/20181031-active-text-copy/
/Applications/Adobe Photoshop CC 2019/Presets/Scripts に activeTextCopy.jsx を作成(activeTextCopy.jsx の部分の名前はなんでも良い)
sudo権限でないと多分編集できない。
var activelay = app.activeDocument.activeLayer;
function copyTextToClipboard(text){
const keyTextData = app.charIDToTypeID('TxtD');
const keyTextToClipboardStr = app.stringIDToTypeID( "textToClipboard" );
var textStrDesc = new ActionDescriptor();
textStrDesc.putString( keyTextData, text );
executeAction( keyTextToClipboardStr, textStrDesc, DialogModes.NO );
}
if( activelay.kind == LayerKind.TEXT ) {
var selectContents = activelay.textItem.contents;
copyTextToClipboard(selectContents);
} else {
alert('選択したレイヤーはテキストレイヤーではないようです');
}
以下から使うことができる
メモ(キーボードショートカットの設定方法)
「編集 → キーボードショートカット」へ行く
以下のようなウィンドウが出てきたら該当箇所を探してショートカットを登録する。（上のメニューと同じ並びなので、探す場合、それを参考）
vueらしい書き方でstorybookを使う
vueのプロジェクトでstorybokを入れようとしたときにvueらしい書き方で行いたいと思ったのでその時のメモ
環境
- Rails
- Vue.js
- Webpacker
webpackerは今回関係ないですが、念のため
実行まで
今回参照するvueファイル
<template lang="pug"> div p | {{ message }} </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator' @Component export default class HelloVue extends Vue { message : string = 'Hello Vue!' } </script> <style lang="scss" scoped> p { font-size: 2em; text-align: center; color: #0ff; span { font-size: 3rem; } } </style>
手順
1. .storybook/config.js の編集
今回は /app/frontend/components の中を参照する。
変更前
const req = require.context('../stories', true, /\.stories\.js$/);
変更後
const req = require.context('../app/frontend/components/', true, /\.stories\.(vue|js)$/);
2. index.stories.vueを作成
これでディレクトリ中の storis.vue が読み込まれるようになったので、以下のファイルで作成する。
※現状このまま入れるだけでは動かないです。次のステップで動くようになります。
<template lang="pug"> test </template> <script lang="ts"> import { Component, Vue } from "vue-property-decorator" import { storiesOf } from '@storybook/vue' import Test from './index.vue' @Component({ components: { Test }, }) export default class testStory extends Vue{} storiesOf('Welcome', module) .add('to Storybook', () => testStory) </script>
3. storybookのほうで pug と typescript の読み込みを行われるようにする
現状storybookのほうで pug と typescript が読み込まれないと思うので、 ./storybook/webpack.config.js を作成する
- webpack.config.js
const path = require('path') const rootPath = path.resolve(__dirname, '../') module.exports = ({ config }) => { config.resolve.alias['vue'] = 'vue/dist/vue.esm.js' config.module.rules.push( { test: /\.ts$/, use: [ { loader: 'ts-loader', options: { appendTsSuffixTo: [/\.vue$/], transpileOnly: true } }, ] }, { test: /\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader'] }, { test: /\.pug$/, loaders: 'pug-plain-loader', } ) return config }
これで既存のvueらしい書き方でstorybookも書くことができると思います。
Rails + vueの環境にstorybookを導入する
Railsそんな関係ない気がするけどバージョンもろもろ上げたらエラーでたので、storybook入れたときのwebpakerの編集した箇所も記載。
とりあえずstorybook入れる
$ yarn add @storybook/cli $ npx getstorybook $ yarn run storybook
ここまでやったら
- .storybook
- stories
の2つのディレクトリが作成され、いろいろ追加される。
エラーの対応
vue-loader-14.2.2 から vue-loader-15.7.0に変更
@rails/webpacker-3.5 から @rails/webpacker-4.0.7 に変更(多分関係ないかも。)
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": "> 1%",
"uglify": true
},
"useBuiltIns": true
}]
],
"plugins": [
"syntax-dynamic-import",
"transform-object-rest-spread",
["transform-class-properties", { "spec": true }]
]
}
から
{
"presets": [
["@babel/preset-env", {
"modules": false,
"targets": {
"browsers": "> 1%",
"uglify": true
},
"useBuiltIns": true
}]
],
"plugins": [
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-proposal-object-rest-spread",
["@babel/plugin-proposal-class-properties", { "spec": true }]
]
}
に変更
インストールしたもの
$ yarn add @babel/preset-env @babel/plugin-syntax-dynamic-import @babel/plugin-proposal-object-rest-spread @babel/plugin-proposal-class-properties
- @babel/plugin-syntax-dynamic-import
- @babel/plugin-proposal-class-properties
- @babel/plugin-proposal-object-rest-spread
- @babel/preset-env
既存のvueも反応するように
vue-loader-14.2.2 から vue-loader-15.7.0に変更することによって少しエラーがでたので、
参考 : https://github.com/rails/webpacker/issues/2162
既存のVueファイル
<template lang="pug">
div
p
| {{ message }}
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component
export default class HelloVue extends Vue {
message : string = 'Hello Vue!'
}
</script>
<style lang="scss" scoped>
p {
font-size: 2em;
text-align: center;
color: #0ff;
}
</style>
const { environment } = require('@rails/webpacker')
const typescript = require('./loaders/typescript')
const vue = require('./loaders/vue')
const pug = require('./loaders/pug')
environment.loaders.append('typescript', typescript)
environment.loaders.append('vue', vue)
environment.loaders.prepend('pug', pug)
module.exports = environment
から
const { environment } = require('@rails/webpacker')
const typescript = require('./loaders/typescript')
const { VueLoaderPlugin } = require('vue-loader')
const vue = require('./loaders/vue')
const pug = require('./loaders/pug')
const cssLoader = environment.loaders.get('css')
environment.loaders.append('typescript', typescript)
environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
environment.loaders.prepend('vue', vue)
environment.loaders.prepend('pug', pug)
cssLoader.use=[
{'loader':'vue-style-loader'},
{'loader': 'css-loader'},
{'loader': 'sass-loader'}
];
module.exports = environment
に変更。
これで
$ ./bin/webpack-dev-server
$ yarn storybook
を起動させてもエラーが出なくなる！
Nuxt.js 初期設定 v2
Nuxt.js のv2でも色々と設定を行ったので、その時に行ったこととしてメモ。（随時追記予定）
今回変更を行ったgithubのコード
ここ違うよなどありましたらPRいただけると嬉しいです。 更新速度は遅いですが、随時いろいろと更新できるようにしていきたいと思っています。
nuxtの初期設定
公式のNuxt.js -インストール-を参照
$ npx create-nuxt-app sample-nuxt
- プロジェクトの名前を決める（今回の場合 「sample-nuxt」）
- パッケージの選択
「プロジェクトの説明文」、「作った人の名前」については省略。
yarn、npmのどりらかを選択（今回はyarn）
以下のものをデフォルトで選択することができる。 今回はNoneを選択。
- サーバーサイドのフレームワークを選択
以下のものをデフォルトで選択することができる。 今回はNoneを選択。
- axios, pwaを使用するか
今回の場合はどちらもチェック
- lint, pretterを使用するか
今回の場合はどちらもチェック
- テストのフレームワークを追加するか
今回は「Jest」を選択
- SSRかSPAのどちらで使用するか
今回はSSRを選択
以上のものを選択するとインストールされるので、少し待つ。
インストールが完了すると以下の画面のようなものが表示されるので、
今回の場合、cd sample-nuxt , yarn dev のコマンドを打って http://localhost:3000/へアクセスすると
の画面が表示されたらインストール完了。
