2025 01 26 Emacs Setting Update

ずーーーーーっとやりたいと思っていたEmacsの設定棚卸しとアップデート、ようやく着手して一段落つきました。

何した?

ひとまずの完成形(2025.01.26時点)

1. leafの導入

なんだかわからないまま使っていたuse-packageをやめてstraight.elを導入したけど、leafがいいって聞いたので、設定をleafに書き換えた。

たくさんエラー出た。。

ちょっとでも依頼内容端折ったり適当するとChatGPTが意図しない内容返してくるのでホントに苦戦した。

たまにstraight.elならインストールできたのにleafだとインストールできないパッケージもあった。

そういうのはめんどうだから設定からスポイルした。

straight.elだとGitHubを指定してインストールできるが、leafだとそのあたりうまくいかなかった。

leafでも「:vc」キーワードがあるのだが、なんかうまくいかなかった。。

2. 各プログラミング言語用設定の整理と追加

html及びテンプレートファイル用、CSS用、JS系など既にある設定のの見直しと、今まで先延ばししていた他言語の設定ファイルを追加した。

eglot関連でまだ実際には使わないLSPのインストールは対象URLだけメモして先延ばしにした。

3. codeiumの導入

これも先延ばししていた、AIの導入。

とりあえず無料で始められるCodeiumを導入した。

Codeium + eglot + Corfu がどうもうまく連携取れていない感じだけど、ひとまず動かないこともない状態になったので一段落とした。

4. 全然分かってないこと

元々companyを入れていたのだけど、今回Corfuに変えてみた。

全く理解していないので、現在の設定でいいのかどうかも分かっていない。

困る

他の方設定を参考にしようにも千差万別の設定内容で、自分の困ってるに微妙にハマらない。

初心者や弱々な人でもこういう設定にしたい、このパッケージはこうするとよい。など見やすく分かりやすいドキュメントサイトがあればいいのになって思った。

今後

今後は実際にコーディングしながら、自分のスタイルに応じて設定を追加したい。

この記事を書いている時も、Codeiumが動いて文章提案してくるのちょっとウザい。

[Read More…]

2024.12.30 etc

2024 12 30 Testpost

久しぶりのHugo更新

とっても久しぶりにHugoを更新してみる。

なぜ?

テーマを新しく自作しようと前々から思っていたのをようやく行動に起こした。

すっかりやりかたを忘れていたので、ChatGPTに聞きながらになった。 便利ですねChatGPT。

記事ネタはかなり溜まっていたので、テーマを更新したら記事を追加してきたい。

さてさて、この後はビルドとGitHubへのpush作業などがまっています。。 公開に必要なファイル削除してしまったので、ここからまた一難……

これからについて

軌道に乗ったら過去記事の編集や溜まったネタを記事にしたりを行いたい。 また、Analyticsの設定も古いバージョンのままだった気がするので、そのあたりも更新したい。

そんな感じ。

[Read More…]

2021.12.01 study-daily

Gatsbyjsでポートフォリオサイト作った

Gatsbyjsでポートフォリオサイト作った

ちょちょいと簡単にできるやろと思って始めてみたら、正味10日ほどかかってしまった。。

準備

いきなりインストールで躓く。
mpnでインストールだといろいろ警告がでるのでyarnでインストールした。

チュートリアルを試す

インストールからチュートリアル完了まで2日ほどかかった。
へぇ、便利そうやなという感想。

Gatsby公式チュートリアル

ダミーサイトの作成

ポートフォリオを名乗っているが実質Webサイト練習したものを画像にして載せるものなのでまずはダミーのWebを作成。
画像を作るので実質2日近くかかってしまった。

サイト作成

真似したいサイトを見本にレイアウトを作成する。
間違ってないはずなのにうまく行かない場合は

yarn run clean
yarn run develop

キャッシュのせいで最新の状態にならなくてうまくいっていないように見える時があった。
他つまったところ

  • graphqlうまくいかないと思ったらタイポ。
  • 画像を扱うコンポーネントはhtmlに変換されたときに沢山ラッパーが生成されているのでうまくCSSできなかった。
  • 楽したくてプラグインでモーダル導入したら目的の要素にCSSするのに難儀した。
  • SEO用の設定うまくいかなくて苦戦、2日位かかった。
  • Netlifyでビルドすると失敗する。

CSS苦労

gatsby-plugin-imageやreact-modalを使って楽をしようとしたら、CSSの指定に苦労した。

gatsbyで直接classをつけられるのはオーバーレイコンポーネントとコンテンツコンポーネントこちらはまだわかりやすい。
React-Modalのスタイル

問題はgatsby-plugin-image
gatsby-plugin-iamge
className指定はラッパー(div)、目的のimgタグにはimgClassNameで指定。
しかもコンポーネントに渡すpropsに含まれているスタイル要素が一番強いので指定しないでCSS側で記述してもコンポーネント側のデフォルトが優先されるという。
(例:object-fit, objevt-position, widthとか)

SEO用の設定うまくいかなくて苦戦

SEOまわりで2日位かかった。
なんか最新はreact-helmet-async使ったほうが良さそうな感じだったけどうまくいかなくて、結局SSGするのだからasyncである必要ないと妥協してreact-helmetにした。
ポイント?として、proptypesの定義しないとエラーになるからちゃんと書くこと。
OGPの画像を固定にしようとしたら、通常の画面に出てこないものなので生成されずハマった。
暫定措置として、対象の画像をimport及び変数格納で画像生成するように小細工した。
以下にSEO用のコンポーネントを残す。headタグのところはうまく動いていないので後日対応予定。

import * as React from 'react'
import PropTypes from 'prop-types'
import { Helmet } from 'react-helmet'
import { useLocation } from "@reach/router"
import { useStaticQuery, graphql } from 'gatsby'
import ogpImage from '../pages/static_images/ogp_image.png'

const Seo = ({ title, description, lang = 'ja', article = false }) => {

  const { pathname } = useLocation()
    const data = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          siteUrl
          image
          defaultTitle: title
          defaultDescription: description
        }
      }
    }
  `)
  const metaTitle = title || data.site.siteMetadata.defaultTitle
  const metaDescription = description || data.site.siteMetadata.defaultDescription
  const pageTitle = title? title: 'TOP page'
  console.log(article)
  return (
    <Helmet
      htmlAttributes={{lang}} 
      title={metaTitle}
    >
      <head prefix="og: http://ogp.me/ns#" />
      <meta name="description" content={metaDescription} />

      <meta property="og:site_name" content={data.site.siteMetadata.defaultTitle} />
      <meta property="og:title" content={pageTitle} />
      <meta property="og:description" content={metaDescription} />
      <meta property="og:url" content={`${data.site.siteMetadata.siteUrl}${pathname}`} />
      <meta property="og:image" content={`${data.site.siteMetadata.siteUrl}${ogpImage}`} />
      <meta property="og:type" content={article? 'article':'website'} />

      <meta name="twitter:card" content="summary_large_image" />
    </Helmet>
  )
}

export default Seo

Seo.propTypes = {
  title: PropTypes.string,
  description: PropTypes.string,
  image: PropTypes.string,
  article: PropTypes.bool,
}

Seo.defaultProps = {
  title: null,
  description: null,
  image: null,
  article: false
}

Google Analytics

gatsby-plugin-google-gtagを使うことによって、UA-…の従来のユニバーサルなんとかとG-…のgtagの両方登録できる。

[Read More…]

2021.02.24 study-daily

been a while!

久し振りにHugoを更新してみる

長らく何もしていなかったので色々更新するのにだいぶ手間取った。 Hugoそのものを更新するのにbrewの更新や不備を直したり、なぜかついでにEmacsを最新にアップデートしたり。

更新作業したもの

  • brew(brew doctorしていろいろあって大苦戦)
  • Emacs(brewで整合性とったり動かなくなった設定直したり大苦戦)
  • Hugo
  • ブログのテンプレートちょこちょこ直した
  • GitHubのSSH鍵(pushでエラー出るようになってて結局鍵を新しくした)
  • このブログのGitHub Pagesの設定でhttpsに変更

新たに発見したことやったこと

虚しい更新作業の合間に発見したちょい技や機能があった。

1. デスクトップをきれいにする小技

正確にはデスクトップを整理整頓するのを諦めて、シェルでデスクトップの表示非表示を切り替えるようにした。

defaults write com.apple.finder CreateDesktop -boolean false && killAll Finder

でmacのデスクトップ上のものを非表示にできる(falseをtrueにすれば逆の設定になる)。 んでそのシェルをAutomatorでアプリケーションに登録してLaunchpadで呼び出して実行すれば切り替えられるという。

2. pbcopy

macにあるコマンド。初めて知ったような忘れていただけのような。 今回GitHubに登録する鍵(pubの方)をGitHubのページで貼り付けるのに使った。

cat id_rsa.pub | pbcopy

って感じでクリップボードに送り込めるのでGitHubの入力フォームで貼り付け! 便利なコマンドがあったんですね。以前はターミナル上もしくはエディタで開いたものをコピーしてたけどこれなら余計な改行やスペースが混ざり込む心配が無いですね。

3. GitHub Pagesのhttps化

このブログが長らくhttpsにしないで放置していたのでどこかに移行してhttps化しようと考えていたんだけどいつの間にかGitHub Pagesはhttpsできるようになっていたんですね。 早速設定でhttpsをオンにした。

やれやれですよ。。

[Read More…]

2017.12.31 study-daily

Not Posted

2017年記事にしそこねたやったこと

  • コマンドプロンプト(バッチファイル)
  • コマンドプロンプトからPowershell実行
  • シェルスクリプト
  • AWS System Manager Run Command (sum)
  • VagrantでSQL Server他DBもセットアップしたよ
  • Nano Server試そうとした
  • React Redux…etc
  • Webpack
  • Docker再入門とWP開発環境の作成
  • WordPressテーマ開発用のベースを作成した
  • AWS Lambda をPythonで
  • AWS Lambda をNode.jsで
  • CakePHP 3 tutorial 少しやった
  • Vagrant でPHP開発環境作成
  • Terraform試した
  • Hugo用テーマを作成した

忙しいというよりは怠惰だったのと、Hugoのテーマを変えてからやろうと言い訳してるうちに忘れてしまった。

コマンドプロンプト(バッチファイル)

Windowsサーバーでバッチファイルで操作しようとした時に少しおぼえた。

例えばこんなこと。実行結果を変数に入れるのが面倒。

setlocal enabledelayedexpansion
for /f %%a in ('whoami') do @set watashi=%%a
echo %date% %time% !watashi! >> execute.log

別プロセスで実行する方法

[Read More…]

2017.12.30 study-daily

First Swift

PlaygroundでSwift

初めてということでもないけど初心に帰ってSwiftをPlaygroundで触った。

iOS再再再入門

xcodeで新規プロジェクト作成してMap UI Kit?使ってべっ!っておいたらそれだけでMapアプリ完成。

Swift再入門

  • varは変数
  • letは定数
  • Swiftはブロックスコープ
  • 繰り返しはfor n in range{}

まだまだ入り口。

[Read More…]

2017.12.29 trouble-memo

Mac Account Broken

Macのデータ移行時のトラブル

  • Macデータ移行した
  • アカウントの権限を壊してしまった。

データ移行した

TimeMachineを使うと時間はかかるが何も考えなくても諸々移行できるので便利。用途不定になってしまったHDD(1TB)があったのでそれを新たにTimeMachine用にすることにした

アカウントの権限を壊してしまった。

データ移行のついでにアカウント名やアカウント情報を変更したら、管理者権限が外れてしまった。まじ焦った。 権限変更やアカウント情報変更用アカウントを用意してそのアカウントでログインして対象アカウントの情報を変更すべき。

管理者権限が外れてしまったアカウントを復旧させる方法

  1. シングルユーザーモードで起動する(cmd+s押しっぱなし)
    • rootユーザーでのターミナル操作になる
  2. /sbin/mount -uw / を実行してディスクへの書込許可状態にする
  3. rm /var/db/.AppleSetupDoneを実行してセットアップ完了フラグファイルを削除
  4. reboot実行

上記で最初のセットアップウィザードが始まるので、そこで新規に管理者権限を作成する

その後はその新規管理者権限でログインし、権限が壊れてしまった対象アカウントを再度管理者に設定する。

これでめでたしめでたし。

[Read More…]

2017.12.28 study-daily

Wkhtmltopdf

wkhtmltopdfを試した

なんとかしてhtmlからPDFを生成する手段を増やしたい。

ということでwkhtmltopdfを試す。

しかしバージョンによって画面サイズがおかしくなる。

結論

0.12.4のバージョンは使わない。代わりに0.12.3を使う。

オマケ

wkhtmltopdfをgolangを使ってURL指定してhtmlコンテンツをPDF化する。 この方法であれば、PhantomJSの時と同じでPrint用cssが使える。

golangを試すにあたって我がEmacsにgolangの設定を施した。 GOPATHの関係もあるため、macの時だけ設定を読み込むような設定にした。

[Read More…]

2017.12.27 study-daily

Typescript

初めての?Typescript

TypeScript自習

TypeScript 日本語ハンドブック | js STUDIO 他Quitなど

上記ハンドブックを読みつつ少しコードを書く。 ビルドは上記ハンドブックの方法だとうまく動かなかったので、別途Qiitaで調べた。

感想

まだ途中。 型をそこまで書きたくない。推論して欲しい。 PHPのタイプヒンティングと戻り値の型指定程度で十分だと思う。 でも引数の型指定なんかは別途定義をかけるので、メソッド本体の記述はスッキリして良いと思った。

気づき

ちゃんと使ってこなかったので、今更constで変更不可になるのは変数そのものが変わる場合のみで、オブジェクトのプロパティは変更可能だと知った。

つまりイミュータブルなオブジェクトやインスタンスを定義したい場合は型を定義しないと防げない。

[Read More…]

2017.12.25 study-daily

Lolipop Cloud

Lolipopマネージドクラウドを試してみた

まだベータで無料で少し使えるようだったので試した。

簡単に作れた。恐らくコンテナで動いている。

PHPのコンテナを作成すると別の場所にあるMySQLにデータベース領域を与えられる。 PHPからは提供されたDBのホスト名で接続できる。

LolipopCloudのデータベースについて

charset として utf8mb4 は使える。 collate は utf8mb4_unicode_general_ciになる。なんでutf8mb4_binじゃないの?

オマケ

ついでにグリッドレイアウトも試した。

忘れていたこと

metaタグにviewport指定しておかないとメディアクエリーの指定が効かない。 CSSにメディアクエリー書く場合、デフォルトのスタイルは最も小さいサイズで書くとよいっぽい。 グリッドレイアウトは1frで指定しておくとグリッドそのもののflexbox指定はいらないかもね。

[Read More…]