See the Pen MovableElement by Yoshiharu (@yoshiharu2580) on CodePen.

interface ElementPosition {
  top: number;
  left: number;
}

interface PointerPosition {
  x: number | null;
  y: number | null;
}

class MovableElement {
  // Elementオブジェクト
  private element: HTMLElement;
  // 要素の初期位置
  private elementInitialPosition: ElementPosition;
  // 要素の動き始めの位置
  private elementStartPosition: ElementPosition;
  // ポインタ-の動き始めの位置
  private pointerStartPosition: PointerPosition = {
    x: null,
    y: null
  };

  constructor(id: string) {
    this.element = document.getElementById(id);
    this.elementInitialPosition = this.getCurrentPosition();

    this.element.addEventListener("mousedown", (event: MouseEvent) => {
      this.elementStartPosition = this.getCurrentPosition();

      this.pointerStartPosition.x = event.clientX;
      this.pointerStartPosition.y = event.clientY;
    });

    this.element.addEventListener("mousemove", (event: MouseEvent) => {
      if (
        this.pointerStartPosition.x === null ||
        this.pointerStartPosition.y === null
      ) {
        return;
      }

      const pointerMovingDistanceX = event.clientX - this.pointerStartPosition.x;
      const pointerMovingDistanceY = event.clientY - this.pointerStartPosition.y;
      this.changeTranslate(pointerMovingDistanceX, pointerMovingDistanceY);
    });

    window.addEventListener("mouseup", () => {
      this.resetPointerStartPosition();
    });

    this.element.addEventListener("mouseleave", () => {
      this.resetPointerStartPosition();
    });
  }

  // 要素の位置を取得する
  getCurrentPosition(): ElementPosition {
    const { top, left } = this.element.getBoundingClientRect();
    return { top, left };
  }

  // 要素の位置を移動する
  changeTranslate(movingDistanceX: number, movingDistanceY: number) {
    const x =
      this.elementStartPosition.left -
      this.elementInitialPosition.left +
      movingDistanceX;
    const y =
      this.elementStartPosition.top -
      this.elementInitialPosition.top +
      movingDistanceY;

    this.element.style.transform = `translate(${x}px, ${y}px)`;
  }

  // ポインターの動き始めの位置をリセット
  resetPointerStartPosition() {
    if (
      this.pointerStartPosition.x === null ||
      this.pointerStartPosition.y === null
    ) {
      return;
    }

    this.pointerStartPosition.x = null;
    this.pointerStartPosition.y = null;
  }
}

const movableElement = new MovableElement("element");

See the Pen MovableElement by Yoshiharu (@yoshiharu2580) on CodePen.

interface ElementPosition {
  top: number;
  left: number;
}

interface PointerPosition {
  x: number | null;
  y: number | null;
}

class MovableElement {
  // Elementオブジェクト
  private element: HTMLElement;
  // 要素の初期位置
  private elementInitialPosition: ElementPosition;
  // 要素の動き始めの位置
  private elementStartPosition: ElementPosition;
  // ポインタ-の動き始めの位置
  private pointerStartPosition: PointerPosition = {
    x: null,
    y: null
  };

  constructor(id: string) {
    this.element = document.getElementById(id);
    this.elementInitialPosition = this.getCurrentPosition();

    this.element.addEventListener("mousedown", (event: MouseEvent) => {
      this.elementStartPosition = this.getCurrentPosition();

      this.pointerStartPosition.x = event.clientX;
      this.pointerStartPosition.y = event.clientY;
    });

    this.element.addEventListener("mousemove", (event: MouseEvent) => {
      if (
        this.pointerStartPosition.x === null ||
        this.pointerStartPosition.y === null
      ) {
        return;
      }

      const pointerMovingDistanceX = event.clientX - this.pointerStartPosition.x;
      const pointerMovingDistanceY = event.clientY - this.pointerStartPosition.y;
      this.changeTranslate(pointerMovingDistanceX, pointerMovingDistanceY);
    });

    window.addEventListener("mouseup", () => {
      this.resetPointerStartPosition();
    });

    this.element.addEventListener("mouseleave", () => {
      this.resetPointerStartPosition();
    });
  }

  // 要素の位置を取得する
  getCurrentPosition(): ElementPosition {
    const { top, left } = this.element.getBoundingClientRect();
    return { top, left };
  }

  // 要素の位置を移動する
  changeTranslate(movingDistanceX: number, movingDistanceY: number) {
    const x =
      this.elementStartPosition.left -
      this.elementInitialPosition.left +
      movingDistanceX;
    const y =
      this.elementStartPosition.top -
      this.elementInitialPosition.top +
      movingDistanceY;

    this.element.style.transform = `translate(${x}px, ${y}px)`;
  }

  // ポインターの動き始めの位置をリセット
  resetPointerStartPosition() {
    if (
      this.pointerStartPosition.x === null ||
      this.pointerStartPosition.y === null
    ) {
      return;
    }

    this.pointerStartPosition.x = null;
    this.pointerStartPosition.y = null;
  }
}

new MovableElement("element");

See the Pen MovableElement by Yoshiharu (@yoshiharu2580) on CodePen.

パソコン、スマホの両方とも対応しています。

interface ElementPosition {
  top: number;
  left: number;
}

interface PointerPosition {
  x: number | null;
  y: number | null;
}

class MovableElement {
  // Elementオブジェクト
  private element?: HTMLElement;
  // 要素の初期位置
  private elementInitialPosition?: ElementPosition;
  // 要素の動き始めの位置
  private elementStartPosition?: ElementPosition;
  // ポインタの動き始めの位置
  private pointerStartPosition: PointerPosition = {
    x: null,
    y: null
  };

  constructor(id: string) {
    this.element = document.getElementById(id);
    this.elementInitialPosition = this.getCurrentPosition();

    this.element.addEventListener("mousedown", (event: MouseEvent) => {
      this.elementStartPosition = this.getCurrentPosition();

      this.pointerStartPosition.x = event.clientX;
      this.pointerStartPosition.y = event.clientY;
    });
    this.element.addEventListener("touchstart", (event: TouchEvent) => {
      this.elementStartPosition = this.getCurrentPosition();

      this.pointerStartPosition.x = event.touches[0].clientX;
      this.pointerStartPosition.y = event.touches[0].clientY;
    });

    window.addEventListener("mousemove", (event: MouseEvent) => {
      if (
        this.pointerStartPosition.x == null ||
        this.pointerStartPosition.y == null
      )
        return;

      const pointerMovedDistanceX = event.clientX - this.pointerStartPosition.x;
      const pointerMovedDistanceY = event.clientY - this.pointerStartPosition.y;
      this.changeTranslate(pointerMovedDistanceX, pointerMovedDistanceY);
    });
    window.addEventListener(
      "touchmove",
      (event: TouchEvent) => {
        if (
          this.pointerStartPosition.x == null ||
          this.pointerStartPosition.y == null
        )
          return;

        // touchmove中はスクロールをキャンセルする
        event.preventDefault();

        const pointerMovedDistanceX =
          event.touches[0].clientX - this.pointerStartPosition.x;
        const pointerMovedDistanceY =
          event.touches[0].clientY - this.pointerStartPosition.y;
        this.changeTranslate(pointerMovedDistanceX, pointerMovedDistanceY);
      },
      // touchmove中はスクロールをキャンセルする
      { passive: false }
    );

    window.addEventListener("mouseup", () => {
      this.resetPointerStartPosition();
    });
    window.addEventListener("touchend", () => {
      this.resetPointerStartPosition();
    });
  }

  // 要素の位置を取得する
  getCurrentPosition(): ElementPosition {
    const { top, left } = this.element.getBoundingClientRect();
    return { top, left };
  }

  // 要素を移動させる
  changeTranslate(
    pointerMovedDistanceX: number,
    pointerMovedDistanceY: number
  ) {
    const x =
      this.elementStartPosition.left -
      this.elementInitialPosition.left +
      pointerMovedDistanceX;
    const y =
      this.elementStartPosition.top -
      this.elementInitialPosition.top +
      pointerMovedDistanceY;

    this.element.style.transform = `translate(${x}px, ${y}px)`;
  }

  // 要素の動き始めの位置をリセット
  resetPointerStartPosition() {
    if (
      this.pointerStartPosition.x == null ||
      this.pointerStartPosition.y == null
    )
      return;

    this.pointerStartPosition.x = null;
    this.pointerStartPosition.y = null;
  }
}

new MovableElement('element');

ここから色々応用できそう。

使いやすいサイトを作るためにできそうなことをメモ。

もろもろ

・ボタンを少なくする

・フレンドリーフォワーディング

・404画面をいい感じにする

・ページネーションの「前へ」「次へ」ボタンとページ数の数字はどちらか片方だけを使う方が好き。

・外部リンクは、アイコンで別タブで表示することを明示した上でtarget="_blank"をつけるとやさしくて使いやすい

・ヘッダーのロゴをリンクにする

・背景クリックでポップアップを閉じる

・複数のサービスのアカウントでログインできる仕様の場合、前回何でログインしたかを表記する

・設定変更画面では「更新」ボタンがあったほうが安心。

・処理に時間のかかる部分にはローディングアニメーション等を入れる

・クリックできる要素は、それがわかるようにする。押しやすい大きさを確保する

フォーム

・フォームの入力値には、pattern属性とjsの正規表現で入力制限をつけると親切
参考：pattern、type属性のおさらい

・郵便番号から住所を自動で入力
ajaxzip3

・入力された電話番号や郵便番号にハイフンが含まれていた場合、エラーを出すのではなく裏側でハイフンを取って保存する

・メールアドレスに大文字が含まれていた場合にも、裏側で小文字に変換する

・住所登録フォームを1つにまとめる
→「郵便番号上3桁、下4桁、都道府県、市区町村、番地」みたいに別れていると使いにくい

・入力した時に褒めてくれる
→「良いメールアドレスですね」など

・入力が終わっていない時に「不正な形式です」的なエラーが出るとムカつく

好きなアニメーション

アニメーションは基本好きじゃないけど、以下のアニメーションはありだと思う。

・ヘッダーの幅がスクロールで狭くなる
https://startbootstrap.com/previews/freelancer/

・スムーズスクロール
https://codepen.io/manabox/pen/NVdePj

・無限スクロール、はてなブックマークのやつが良い感じ
https://b.hatena.ne.jp/nyshk97/bookmark
10件ごとにページネーションが出てくるけど、無限スクロールにもなっている。
単純な無限スクロールだと、どこで一区切りつけるかの判断が難しくなってしまう。

・記事を読み進めるとサイドバーが暗くなる
https://ja.nuxtjs.org/guide/

はじめに

Local環境にてHTMLのコンテンツを動かしたいときに、Local環境でのCookieのように情報の共有をする方法があるかどうか調べました。

Cookie / WebStorage とは

まずは言葉の意味を調べました。

関連リンク

関連リンクを下記に載せておくので、参考にしてください。。

• Local環境でのCookie / WebStorage 挙動
  • https://qiita.com/syukan3/items/dd907b7cd3ed86025546
• Local上にて複数のHTMLコンテンツのデータを共有する方法（Store.js）
  • https://qiita.com/syukan3/items/c20ed695c1d676799a5a

Cookie

cookie（クッキー）とは、見ているWebサイトからスマホやPCの中に保存される情報。
HTTP cookie（エイチティーティーピークッキー、単にクッキーとも表記される）は、マジッククッキーの一種であり、RFC 6265などで定義されたHTTPにおけるウェブサーバとウェブブラウザ間で状態を管理する通信プロトコル、またそこで用いられるウェブブラウザに保存された情報のことを指す。ユーザ識別やセッション管理を実現する目的などに利用される。
（Wikiより　https://ja.wikipedia.org/wiki/HTTP_cookie）

そもそも、local環境で使用することを想定していないことがわかる。。

WebStorage

Web Storageは、ユーザーのローカル環境（ブラウザ）にデータを保存するための仕組み。
データの保存・上書き・削除・全クリアなどの操作は、JavaScriptで行うことができる。

Web Storageを利用すると、ユーザーごとにカスタマイズされた情報を提供することが可能となる。
この仕組みはクッキー（HTTP cookie）とよく似ている が、クッキーに比べて保存できる容量が大きい。
そのため、例えば、オフラインでもウェブアプリケーションを動作させられるだけの 必要十分なデータをユーザーのローカル環境に保存することなどが可能となる。

Web Storageには、sessionStorageとlocalStorageの２種類のストレージが用意されています。
どちらもキー（key）と値（value）をペアにしたデータのリストを ユーザーのローカル環境に保存するkey-value型のデータ保存形式である点は同じですが、 データの有効期限などが異なるので目的に応じて使い分けます。

SessionStorage

sessionStorageは、ウィンドウやタブ単位での一回限りのセッションで有効なストレージ。

localStorage

localStorageは、オリジン単位でデータを永続的に保存するストレージ。

まとめ

色々調べた結果として、参考リンクにまとめられているものが一番わかりやすかったです。

参考

http://www.htmq.com/webstorage/

100日チャレンジの200日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

200日目は

おはようございます
200日目

udemyでcss+メディアクエリ、vue.js、webサイトコーディング
この休み中に、3つの講座やってます。2つぐらいおわりそうだから、もう1～2つぐらいやりたいな#早起きチャレンジ#駆け出しエンジニアと繋がりたい #100DaysOfCode

— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) December 31, 2019