notes of tanpopo

徒然と思うがままに

MacにmongoDBをインストールする方法（homebrew）

久しぶりの投稿

本記事では以下項目を前提とした記事です。

  • Macにhomebrewをインストール済み（わからない方は調べてください）
  • brew tap コマンドを使用します

2019年の途中から

brew install mongodb

が使えなくなってしまったらしいです。 原因は調べていないためわからないです。

というわけで簡単にインストール手順

1. brew tapを実行
brew tap mongodb/brew
2. brew installを実行
brew install mongodb-community@4.2
3. brew serviceを実行
brew services start mongodb

これで、mongodbを使う準備ができました。 自分用の備忘録なので、mongoDBの使い方などわからないところは自分で調べてください。 すみません。



再開しようと思います。

お久しぶりです。
たんぽぽです。
と言っても誰も読んでいないようなブログですがこの度、投稿を再開しようと思います。

前回も似たようなことを書いて約3年が経とうとしていますが、
ゲームしてYoutube見てるだけの自分を変えようと思い改めてスタートしようと思います。

三日坊主が2回続いているこのブログですが、毎日ではないですが投稿を続けていこうと思います。

この記事は僕の決意の表れみたいなものです。
しょうもない記事を書くかもしれないですが、頑張りたいと思います。

ページ内リンクをスムーズにさせる[jQuery使用]

html javascript

１年以上ブログを放置しておりましたが、今回の投稿を機に再開しようかと思います。
よろしくお願いします。

ページ内リンクとは何か？

ページ内リンクを知らない人はあまりいないと思いますが、念のために書いておきます。

<div id="01"></div>
<a href="#01">リンク</a>

みたいなやつです。

ページの上に戻るボタンとかによくあるやつですね。

これでも機能はしていますが、このままだとページが切り替わったような動きとなります。
個人的にこのような動きはUXが低いような気がします。

というわけで本題

javascriptを使い、スクロールの動きをつけます。

おそらくほとんどのサイトはjavascriptを利用して動きをつけていると思います。
今回載せるサンプルコードはjQueryを使用しています。

サンプルコード

$('a[href^="#"]').click(function () {
    var speed = 500;
    var position = $(this.hash).length > 0 ? $(this.hash).offset().top : 0;
    $('html, body').animate({
        scrollTop: position
    }, speed);
    return false;
});

以上となります。

コードの解説

$('a[href^="#"]').click(function () {処理});

このコードで

<a href="#01">アンカーリンク</a>

などhrefが#から始まるaタグを押した時に処理を実行します。

var position = $(this.hash).length > 0 ? $(this.hash).offset().top : 0;

$(this.hash)でhrefの#以下の値を取得し、.size()でその値が存在しているかの検証
存在していればその要素のy座標を、存在しなければ0をpositionに代入します。

$('html, body').animate({
        scrollTop: position
    }, speed);

ここがスクロール部分です。
$('html, body')要素をpositionの位置までスクロールするアニメーションを実行します。
$('html, body')と指定しているのは、ブラウザによってスクロールに対応している要素が異なっているためです。
これに関してはいろんな方が調べているのでここでは割愛します。

解説はここまでです。

最後に

正直ページ内リンクのコードはいろんな人が記事にしていたりするので似たり寄ったりです。
また、ヘッダーが固定のパターンなどでコピー＆ペーストするだけでは足りないので必要に応じてコードを追加してください。

このブログの概要

何故、このブログを作ったのか？

　同じことを何度も調べ直すのが面倒だからメモみたいな感じで残したら少しは楽になるのではと思ったから

記事適当じゃね？

僕のためのメモだからOK

更新してなくない？

　返す言葉がない。すまぬ。


※ 追記（16/08/15）
今までの記事を一旦非公開にして一から始めました。
よろしくお願いします。