Vue.jsでスクロール範囲内に入るとクラス付加するやつ

ウェブサイト作りながら少し成果上がったので公開していくことにする。作ったのはスクロールして画面内に入ったらクラス付加するやつ。簡単な例だけどメモとして。

まずvueファイル。

// in-screen.vue

<template>
  <div v-bind:class="{active: isInScreen}">
    <slot></slot>
  </div>
</template>

<script>
export default {
  props : {
    offset:{
      type: Number,
      default: 0
    }},
  data() {
    return {
      scrollY: 0,
      height: 0,
      position: 0,
    }
  },
  mounted() {
    window.addEventListener('scroll', this.onScroll)
    window.addEventListener('resize', this.onResize)
    window.addEventListener('load', ()=> {
      this.onScroll()
      this.onResize()
    })
  },
  computed:{
    isInScreen(){
      if(this.scrollY > this.position + this.offset){
         return true
      }else{
        return false
      }
    }
  },
  methods: {
    onScroll () {this.scrollY = window.pageYOffset},
    onResize () {this.height = document.documentElement.clientHeight} ,
    getPosition () {
      if(this.$el){
        return this.$el.getBoundingClientRect().top +
            this.scrollY -
            this.height
        }else{
            return 0
        }
      },
    }
 }
</script>

isInScreenを算出プロパティとして定義させて必要な時に再取得させる。んだけど他のスクロール量とかはリアクティブに出来ないのかな。要検討。CSS書いてないけどのファイル内でのスコープ限定して書けるらしい。んで動かすのがこれ。

// app.js
import Vue from 'vue'
import InScreen from './in-screen.vue'

const sweetScroll = new SweetScroll();
new Vue({
  el: '#app',
  components: {
    "in-screen": InScreen,
  },
})

コンポーネントごとにファイルまとめられるのでいい感じがする。JSfiddleで動作でも作って貼り付けたかったけど、単一ファイルコンポーネントの動かし方がいまいちよーわからんかったので割愛。サイトで使ったコンポーネントはどんどん上げていきたい。

素人が選んだWebフロントエンド開発環境

はてなトップのカテゴリに開発環境について載っていて、最近ほぼイチからWebフロントエンドの開発環境を整えたぼくにとってタイムリーな話でもあり、あとで環境触った時にわけがわからないという事態を避けるためのメモとしてここに残していこうと思います。

ネットワークとか

ローカルの作業環境はこんな感じ。下のSurfaceでプレビュー見ながら上のデスクトップマシンでコード書く感じ。で、ローカルでファイルをいじっているのではなくこんな感じにリモートで編集してます。

こんなまどろっこしいやり方しなくてもローカルでサーバ立てればいいじゃーんとはぼくも思うんですが、でかい画面に繋がってるのWindowsしか無いし、WindowsでUnix系のソフト使うのも使いづらいし……ってこんな感じになってます。リモートリポジトリの意味がない……。でもローカルでサーバ立てたりコンパイル走らせたりしないと重くなったりしないからいいかな。

ソフト編

1週間位でフロントエンドではやってそうなやつ全部のせって感じになりました。以下入れたもの。

• npm
• gulp
• pug
• Sass
• babel
• browserify
• Vue.js
• vueify
• browser-sync

なんかめっちゃソフト多いけど、Webフロントエンドじゃ普通なんですかねこれ。以下ざっくりと感想とか。

pug

とてもソースが見やすくなった。Emacsにpug-mode入れておけばあとはTAB押してればよきに計らってくれるので非常に楽。特に難しいこともなく雰囲気で書ける。入れてよかった。このあと複数ページ生成する時又役に立ちそう。

Sass

ファイル分割できるだけで文明を感じる。Sass記法ならインデントだけでネストできるのに文明を感じる。この二つのおかげで雰囲気で書いててもごちゃごちゃにならないので文明を感じる。

babelとbrowserify

ファイル分割でｋ　ES6まだそんなに書いてないけどちょいちょい良さを感じる。やっぱりファ

browser-sync

神。無神論者なのに神と言いたくなる。ファイル変更を察知して自動で更新してくれる。マルチディスプレイにしなくてもタブレットをそばにおいて似たようなことができる。とてもいい。

Vue.js + vueify

まだちょろっとしたものしか書いてないけどVueのコンポーネントの良さがわかってきたような気がする。値勝手に変わってくれるの楽。

入れたものはこんな感じで。以下は導入見送った物。

webpack

Browserify+gulpで同様のことできるし特にいらないんじゃないか……？といった感じ。これ以上ツールを増やす必要が見られず保留。

CoffeeScript

括弧も少ないしいいんじゃなーい？と思ったけど各所からオワコン扱いされてたし、ES6のこともあるしそこまでJavascript辛くない気もしてきたので見送り。

Purescript

とても色物くさくて大好きなんですが実際のところで使えるかって言うと……。あとで実験的に触ったりしたいところではありますね。

知識のインストール、バーストモードで

雑に取った有給をウェブサイトの構築に費やしてます。いや、ウェブサイトの構築というよりかはツールの使い方でしょうか。昨日から今日にかけてGit、Sass、pug、gulpの使い方をとりあえず覚えた。node.jsがJavascriptってだけで毛嫌いしてたけど、本当にすみませんと言うしか無い。アプリケーション使うだけならめっちゃ便利でした。

2日間でめっちゃ知識をインストールした感じあるけど、実際のところ負荷はそんなにない感触。せいぜいツールの使い方だけだしSassなんかはCSSに色つけた感じだしね。Sassのイディオム的なものは検索して見つかるけど、どんな感じにファイル分けするかとかどこでどう変数使うかみたいなノウハウってどうやって手に入るんだろう。というかCSS書いてた時代も雰囲気で書いてたし、そのへんの知識がまるでない。

あとVue.jsを触りたいんだけど現状前に作ったHTML・CSSをpug・Sassに変換するのがやっとという感じ。pugはともかくSassの方は単純に変換しただけではメリットないのでそのへんの共通化とかも考えないといけないので更に辛い。Sassっぽい書き方というのがつかめれば楽なんだろうけどなー。Javascriptに関してはCoffeescriptの導入も考えましたが「最近イケてない」らしいので見送り。TypeScriptは導入するメリットそんなないかなと思ったので結局素のJavascriptに戻るのであった。辛い。Purescript*1も楽しそうだけど、流石に学習コストが高い。

そうそう、gulpでAの処理終わってからBの処理するってのを書いてたんですが

gulp.task('pug-reload',['pug'],function(){
		return browserSync.reload();
});
gulp.task('sass-reload',['sass'],function(){
		return browserSync.reload();
});
gulp.task('js-reload',['js'],function(){
		return browserSync.reload();
});

って感じにボイラープレートになってしまって何かいい方法ないんかなって頭捻ってます。

gulp.task('seq-reload',[引数],function(){
		return
 		（引数に書いてあるtask実行）
		browserSync.reload();
});

みたいに引数で処理分けることができればいいんですが。「gulp 引数」でググってもコマンドライン引数についてしかでてこないし。

*1:HaskellをJavascriptにするやつ

やりたいことの雑多なメモ

技術ってのは使わないと衰えるもんで。そんな理由もありまして現在有給をぶち込みつつウェブサイトを改装すべくいろいろ調べてます。調べた結果Gitのリポジトリ作り出す羽目になってるのは？？？ってなったけどちゃんと理由があってのことなんですよ。やりたいこと優先度高い順に書き出すとこんな感じ。

• Gitによるソースコードの管理
• Vue.jsによるいい感じのUI
• Sassで楽をしたい
• ginger（PythonのテンプレートエンジンであるJinja2のHaskell版）
• 本番サーバにコマンド一発で送信
• BrowsersyncみたいなやつをHaskellで作る

Gitによるソースコードの管理はこんなページもあったので参考にしたい。
qiita.com
VPSアカウント持ってるんでそこにオレオレリポジトリを作りいい感じで開発できたらな～という感じ。感じが多くてイメージがふわふわしてる。

Vue.jsは簡潔に書けるって噂なので試したいですね。jQueryとプラグインでゴリゴリやってみたけどオリジナルのモーダルボックス出すだけでソースコードがさっぱりわけの分からない感じになったのでその辺を簡潔に書きつつリッチなUIを実現したい。Sassも素のCSS書いてるとよくわからないクラスとかでてきて混迷を極めてくるのでやはり導入したいところ。

4つ目のテンプレートエンジンの導入はちょっとむずかしいところ。作品ページに個別URL振って見せたいんですけどそうなるとテンプレートエンジン使って静的にページを生成するしか無いのかなと。.htaccess使ってサーバサイドでスクリプト動かすにしても結局サーバ側での処理が必要だろうと思うし。でもVue.jsのルーティングで解決できるのか……？リサーチ不足なのでなんとも。

最後のBrowsersyncみたいなのを作るのは完全に趣味なんだけどやりたい。構想としてはファイルの変更を察知したらWebsocket経由でHTMLに組み込んだJavascriptに命令を送り込んで自動更新する、みたいなやつを最低限やりたい。それに加えテンプレートエンジンとWebサーバも組み込んで静的ページを生成するフレームワーク的なものを作りたい……まで行くとちょっと風呂敷を広げ過ぎな感じはしますね。

そんな感じで妄想だけは続くのだ。

思考のジャンプ

Erlangで何かくだらないものを作ろうとしてたらいつの間にかnginxをDockerで動かす方法を調べてました。もともとやりたかったことからずれてくる、そんなことありませんか？

女の子の絵書こうとして狙撃銃の採用実績調べてたり、モータの制御調べてたら物理シミュレーション自前で書いてたり、島風漫画描いてたら自衛隊のコールサイン調べてたり……。必然を重ねたつもりがやりたいことの全体から見ると全然別の場所にたどり着いたりすることがよくあります。必然だけどそこまでいらねえだろとかどうしてそうなった的な。本人もよく原因がわかっていなく、よく困惑することがあります。そのおかげで艦これのお話とかできたりするので悪いものではないんですけど、コントロールしたいよなとは思います。

そして冒頭の「Erlangで何かくだらないものを作ろう」の前には「サーバアプリケーションを理解しよう」があり、その前に「メールの実装を理解しよう」があったのを思い出して途方にくれているところです。

払ったリソースによる「たが」

今月はブログを更新していきたい。「お金払っちゃったので使っていかないともったいない」というみみっちい理由があったりするのだが。

と言っても趣味にお金払ったからと言って継続したことがあるか考えてみるとちょっと心が痛む。ギターに7万円払ったものの最近全く触っていないし、15万円のロードバイクもあまり使わず手入れが悪いので大分痛んでしまっているし。カメラは……カメラはまだ使っている方なのでまだ大丈夫と信じたい。活躍する場はたくさんある。

つまり払ったお金が対価を得られるよう努力するための「たが」として機能するかというと、ぼくの場合あんまり機能しないのではないか、と思う。単純に飽きっぽいというのもあるけど、払ったリソースにそこまで未練がない感じがある。

なのでブログあんま書いてなかったら「ああ、『たが』が機能しなかったんだな……」と憐れんどいてください。

近況おまとめ便

はてなブログをProにしました。しかも2年契約。今までほとんど書いてないのに～？無駄遣いなのでは～？う、うるさい、これから書くんだよ！さり気なく独自ドメインです。かっこいい！デザインもいじりたいですね。

漫画方面

コミケは無事かげぬい合同発行できてよかった。想定よりめっちゃ分厚い本ができて在庫の搬出に四苦八苦しました。なんも対策考えてなかったので3往復する羽目になったよね。計画が雑！

次のイベントは9月23日の砲雷撃戦です。プロット書いたら52ページとかなってアホかってなったので本ができる確率は3‱くらいだと思います。あとは11月に開催される陽炎型オンリーのカゲロウスターズに申し込みました。
kagerostars.girly.jp
舞風の本が出、たらいいなあ……。あとは冬コミ。こちらは神通さんの暗い話になると思います。これは頑張って出したい。

ひとつひとつ丁寧にこなしていきたいですね。

技術方面

最近は時間リソースを技術方面に割いてまして。PCいじったりネットワークいじったり言語いじったりしてます。やってること箇条書するとこんなん。

• Arch Linuxいじり
• サーバいじり
• ドメインいじり
• haskellで色々作る
• Erlang触ってみる

なんか色々つまみ食いになってる。なんとなく技術の手入れをしたいなということで色々学習してます。Haskell初心者LT会とかも行ってみたりしました。
shinjukuhs.connpass.com

技術方面で当面やりたいこと

まずウェブサイトをなんとかしたいですね。現状こんな感じなんで……。

これ完全にsoonにcomingしないやつですね。ずっと工事中なサイトですね。自分作ったやつとかをいい感じにポートフォリを形式で見せたい。今なら適当にテンプレート使ったいい感じの何かありそうなんですが、自分の技術のメンテナンスというところもあり探す手間もあり選定の手間もありやはり自分で作りたいですね。

あとサイト作る時に実験用サーバで動かしてそれを本番環境にコピーするって感じで作りたいんですけど、そのへんをHaskell使って自動化したい。あとは流行りのVue.js使ったりwebsocketなんか使ってみたり……。色々夢だけは広がりますね。