概要

内容

昨日以下のような表記で github に push できない事象が起きまして、かなり慌てました

$ git push origin HEAD
Enumerating objects: 18, done.
Counting objects: 100% (18/18), done.
Delta compression using up to 8 threads
Compressing objects: 100% (8/8), done.
Writing objects: 100% (10/10), 1.57 KiB | 1.57 MiB/s, done.
Total 10 (delta 5), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (5/5), completed with 4 local objects.
remote: fatal error in commit_refs
To github.com:hoge/fuga.git
 ! [remote rejected] HEAD -> hoge (failure)

なにか自分のミスではないかという思考でいろいろローカルを見てたのですが、一向に解消せず。

結果、github で障害が起きていたことを知りました。

なかなか github の障害にあたることが無かったのでいい機会になりました。

まずはステータスを見てみようということですね。以下から確認できます。
https://www.githubstatus.com/

概要

2022 年の 9 月時点くらいの話です

multistage build で alpine -> alpine な dokcer image を、CloudRun Job で動かそうとした場合動かなかったというメモになります

結果的に CloudRun Job では動かないまま諦めて、同じイメージを Fargate に持っていったら動いたので CloudRun Job は諦めて謎のままになっています

内容

• もともとは alipine -> busybox な multistage docker image でしたが、そのイメージだと CloudRun Job は動く

• 概要の通りアプリ実行環境に alpine を採用するとコンテナが起動できなくなる

• 具体的に言うと、secret manager をマウントしていましたが、それがマウントできないようになったことでアプリが動かなくなってました

• busybox だとマウントできてる

  • ここが理解できなかったところ
  • OS を変えたらマウントできないとは・・？

• ubuntu でもだめ

• 確認できたエラー

  container start failed

  Container called exit(255)

• secret manager の内容をファイルとして入れればローカルでも動く、CloudRun Job では動かない

まとめ

alpine × secret manager という組み合わせが良くないということかもしれません。

また、現在（2023/03/24）でも CloudRun Job にはプレビューがついています

Fargate でイメージをそのまま移してそれが動いているので、自分のなにかミスで動いていないということは無いのでは…と思ってしまいましたが

ただ、もしかしたら重大な仕様とかそういうのを見落としてるのかもしれません

当時はあまり参考になる同じような事象の記事も特に見つかりませんでしたし結果諦めました

結果的には幸か不幸かマルチクラウド環境にすることができたので、色々幅広く試す土台ができたのは良かったなというところです

もし同じような状況で解決した人が居れば教えていただきたいです

概要

vercel 上に SSR をデプロイしていますが、少し前にデプロイした際、突然以下のエラーに遭遇しました。

Error: The Serverless Function "index" is 85.53mb which exceeds the maximum size limit of 50mb. Learn More: https://vercel.link/serverless-function-size

これの解消方法と調べたことを書きます

解消方法

まずは解消方法から書きます

vercel.json というデプロイの設定ファイルで指定するビルダーのバージョンを以下のように変更しました

"use": "@nuxtjs/vercel-builder"
↓
"use": "@nuxtjs/vercel-builder@0.21.3"

調べたこと、やってみたこと

以下のことを試しましたが効果なしでした

• 不要な画像の削除
• リージョンの変更
• 不要モジュールの見直し

解消法は こちら から vercel-build の github issue にたどり着き、それらを参考にしました

もしかしたらもう治ってるかもしれませんが、バージョン固定をいつまでしてたらいいのかなど情報は追っておかないといけないかもしれませんね

ビルダーのバグでこんなことになってしまうんだと勉強になりました

概要

pandas は超便利です

pandas で解釈した dataframe の操作に関するメモをまとめます

思い出したら定期的に追記していきます

テーブルから dataframe の生成

df = pd.read_html(str(table_html_source))

抽出

例：特定のカラムで条件に合う行を抽出

df = df[~(df["キー 1"].isna()) & ~(all["キー 2"] == 0)]

.isna は数字かどうか、==0 はそのままですね

~ これで否定です

dataframe はなにかフィルター系の処理をしたら dataframe がまた返ってくるので、元のものを上書きするか、別で保持する必要があります

正規表現を使った抽出

例：特定のカラムで正規表現を使って抽出

print(df["キー名"].str.extract(r"(\d.+)"))

置換

df = df["キー 1"].replace("あ", "", regex=True).astype(int)

型の強制

df = df["キー 1"].astype(int)

置換とかをしたあとに意図したデータだけになっているかとかの確認で使ってます

異常値があれば置換だったりの不足に使えます

使用するパッケージについて

markdown-it を最初使っていたのですが、build 後のスクリプトに未使用の部分が多くあり、それがページスコアの time to interactive に影響を及ぼしていたので nuxt/content に切り替えました。

切り替えたことで time to interactive と First Contentful Paint の向上が見られましたので、content が自分の使い方に合っていたということだと思いますが。

構築

nuxt/content を使って構築していくにあたり、以下を参考にさせていただきました🙇‍♂️
Create Medium Style Blog Theme with Nuxt JS - Pramod Devireddy

content はこんな感じで入れます

npm i @nuxt/content

ファイル構成はこんな形になります

├── content
│   └── blog
│       └── ほげ.md
├── pages
│   └── blog
│       ├── _slug.vue
│       └── index.vue

それぞれの役割は以下です

• content/blog/ほげ.md
  • markdown で書くブログ記事の内容
• pages/blog/index.vue
  • blog/ でアクセスしたときの一覧ページの vue ファイル
• pages/blog/_slug.vue
  • 各ブログ記事を出すための vue ファイル

blog 一覧ページには以下のような感じで $content を使って記事を検索し、その結果を vue で使うような形です

<script>
export default {
  async asyncData ({ $content, params }) {
    const query = await $content("blog", params.slug).sortBy("createdAt", "desc")
    const blog = await query.fetch()
    return { blog }
  }
}
</script>

content 情報が取れていれば、vue の方では例えば以下のような形で for をすることで記事の一覧を作ることができます。

<v-card
  v-for="b of blog"
  :key="b.slug"
>

こんな感じで構成が整えば npm run dev 等で http://localhost:3000/blog/ などといった URL でアクセスできます。

記事一覧が出ているでしょうか？

タグがついた記事の一覧表示

content 以下の markdown ファイルに以下のようにタグをつけることができます

---
title: hoge
tags:
  - ふが
---

こうやってつけたタグごとの一覧ページも出すことができます

ファイル構成はこんな感じになります

├── pages
│   └── blog
│       ├── tag
│       │    └── _slug
│       │          └── index.vue
│       ├── _slug.vue
│       └── index.vue

要は pages/blog/tag/_slug/index.vue の追加だけです。

中身はこんな形です

<template>
  <v-container mt-50 pt-50>
    <h2
      class="my-4 mx-9"
      justify="center"
      align="center"
    >
      <v-icon>$tagOutlineIcon</v-icon>『』 のタグがついた記事
    </h2>
    <div class="d-flex flex-wrap">
        <v-card
          class="ma-6"
          elevation="5"
          v-for="b of blog"
          :key="b.slug"
          width="500"
        >
          <NuxtLink
            class="post-card"
            :to="{ name: 'blog-slug', params: { slug: b.slug } }"
          >
          </NuxtLink>
        </v-card>
    </div>

    <template v-if="blog.length === 0">
      <div class="d-flex flex-wrap justify-center fill-heilght">
         に該当する記事はありませんでした
      </div>
    </template>

  </v-container>
</template>

<script>
export default {
  head() {
    return {
      title: this.$route.params.slug
    }
  },
  async asyncData ({ $content, params }) {
    const tag = params.slug
    const blog = await $content('blog')
      .only(['title', 'img', 'createdAt', 'slug'])
      .where({ tags: { $contains: tag } })
      .sortBy('createdAt', 'desc')
      .fetch()
    return { tag, blog };
  }
}
</script>

<style>
.post-card {
  text-decoration: none;
}
</style>

こうすると、http://localhost:3000/blog/タグA/ という URL で、タグ A のついた記事があれば一覧が出ますし、なければ『ありません』と出ます。

まとめ

簡単にオリジナルのブログをつくれました。参考になる記事もたくさんあるので、構築もしやすいです。

ただ記事一覧の出し方やブログのレイアウトなど、細かい調整にある程度の知識も必要になり、自分はそこに時間をかけるのを避けたくて、代わりにこのブログを作り始めました。
（タグ一覧どこにどう出そうか、記事一覧もっと見やすくだしたいけどどっからどう着手したらいいか　などの部分）

勉強にはなったんですけどね。熱が出てきたらまた再開するかもしれませんが。

ついにたどり着きました

ミュージックはミュージック

私はラジオを良く聞きます。

ただ、iOS 標準のミュージックアプリはラジオを聴くには不便です。

なぜなら面白い部分は導入部分からだったり 1 つのやり取りだったり、リアクションだったり…いろんな箇所を何度も繰り返し聞きたくなるからです。

標準ミュージックアプリはシーク操作による移動しかできないため、慎重に操作しないと行き過ぎることが多々あります。シーク操作で 10 秒戻ったりするのは簡単ではないです。

理想は podcast アプリのようにワンタップで 15 秒とか何ならカスタマイズした秒数戻せるもの。

そう思ってたくさん検索しましたが、なかなかいいモノにたどり着かず、1 つずつそれっぽいアプリを試していたところで jetAudio にたどり着きました。

jetAudio

「ジェットオーディオ - HD 音楽プレーヤー」を App Store で

このアプリは見事に需要と一致しておりました！

• 最短 2 秒戻し・送りボタン
• 特定部分の繰り返しも可能（使ったことない
• 速度調整も可能

など主な機能をパッと書きましたが、正直多機能で全て使いこなせている感じはありません。あとは広告も出ますね。

それでも私にとっては最高のラジオ聴きアプリです。

実際の設定画面や設定値です

設定幅

理想は podcast アプリ同様、ロック画面からの指定時間の戻しですが、本当にケチをつけるならという感じで、個人的にそこまで重要視していません。

シークによる慎重な操作から開放された時点で満足です。

外出時にもパッと操作して行き来できるので最高ですね。

ラジオ以外でも同じような不満や需要を持っている方が居ればぜひ試してみて欲しいですね！

誰かの役に立てばいいなと思いつつ。

起こったことと解決方法

Mac で Google drive アプリを入れてからというもの、こいつがアクティビティモニターの CPU 利用率の上段にずっと居るようになりました。Mac の動作もなにか重いような…

重いので最後の方は Google Drive の起動もさせていなかったのにアクティビティモニターに居座り、結局アプリケーションからの削除と、ゴミ箱からの削除までしてやっと収まりました。

なぜかゴミ箱から削除までが必要でした。

アプリケーションの削除で収まるように思うのですが、ゴミ箱から消すまで事象が続くというのも少し不思議で正直怖いなと思いましたね。

短いですが、どなたかの参考になればと思います。

追記

調べると 〜Drive といったクラウド連携系のアプリで起こるようですね

Mac 側の問題なのでしょうか。また何か分かれば追記します。

概要

変更方法は出てくるけどデフォルトの場合どこに画像置けばいいんだとなった

方法

ルートディレクトリで以下 theme の clone を行ったあと

git clone --depth 1 https://github.com/hexojs/hexo-theme-landscape themes/landscape

以下 PATH に置き換えたい画像を配置して
themes/landscape/source/css/images/

そのあとの変更はこちらを参考にさせていただきました。

ローカル確認段階なので、 hexo clean && hexo generate はやっておりません