2025 01 26 Emacs Setting Update
ずーーーーーっとやりたいと思っていたEmacsの設定棚卸しとアップデート、ようやく着手して一段落つきました。
何した?
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が動いて文章提案してくるのちょっとウザい。
2024 12 30 Testpost
久しぶりのHugo更新
とっても久しぶりにHugoを更新してみる。
なぜ?
テーマを新しく自作しようと前々から思っていたのをようやく行動に起こした。
すっかりやりかたを忘れていたので、ChatGPTに聞きながらになった。 便利ですねChatGPT。
記事ネタはかなり溜まっていたので、テーマを更新したら記事を追加してきたい。
さてさて、この後はビルドとGitHubへのpush作業などがまっています。。 公開に必要なファイル削除してしまったので、ここからまた一難……
これからについて
軌道に乗ったら過去記事の編集や溜まったネタを記事にしたりを行いたい。 また、Analyticsの設定も古いバージョンのままだった気がするので、そのあたりも更新したい。
そんな感じ。
Gatsbyjsでポートフォリオサイト作った
Gatsbyjsでポートフォリオサイト作った
ちょちょいと簡単にできるやろと思って始めてみたら、正味10日ほどかかってしまった。。
準備
いきなりインストールで躓く。
mpnでインストールだといろいろ警告がでるのでyarnでインストールした。
チュートリアルを試す
インストールからチュートリアル完了まで2日ほどかかった。
へぇ、便利そうやなという感想。
ダミーサイトの作成
ポートフォリオを名乗っているが実質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の両方登録できる。
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をオンにした。
やれやれですよ。。
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
別プロセスで実行する方法
First Swift
PlaygroundでSwift
初めてということでもないけど初心に帰ってSwiftをPlaygroundで触った。
iOS再再再入門
xcodeで新規プロジェクト作成してMap UI Kit?使ってべっ!っておいたらそれだけでMapアプリ完成。
Swift再入門
- varは変数
- letは定数
- Swiftはブロックスコープ
- 繰り返しはfor n in range{}
まだまだ入り口。
Mac Account Broken
Macのデータ移行時のトラブル
- Macデータ移行した
- アカウントの権限を壊してしまった。
データ移行した
TimeMachineを使うと時間はかかるが何も考えなくても諸々移行できるので便利。用途不定になってしまったHDD(1TB)があったのでそれを新たにTimeMachine用にすることにした
アカウントの権限を壊してしまった。
データ移行のついでにアカウント名やアカウント情報を変更したら、管理者権限が外れてしまった。まじ焦った。 権限変更やアカウント情報変更用アカウントを用意してそのアカウントでログインして対象アカウントの情報を変更すべき。
管理者権限が外れてしまったアカウントを復旧させる方法
- シングルユーザーモードで起動する(cmd+s押しっぱなし)
- rootユーザーでのターミナル操作になる
/sbin/mount -uw /
を実行してディスクへの書込許可状態にするrm /var/db/.AppleSetupDone
を実行してセットアップ完了フラグファイルを削除- reboot実行
上記で最初のセットアップウィザードが始まるので、そこで新規に管理者権限を作成する
その後はその新規管理者権限でログインし、権限が壊れてしまった対象アカウントを再度管理者に設定する。
これでめでたしめでたし。
Wkhtmltopdf
wkhtmltopdfを試した
なんとかしてhtmlからPDFを生成する手段を増やしたい。
ということでwkhtmltopdfを試す。
しかしバージョンによって画面サイズがおかしくなる。
結論
0.12.4のバージョンは使わない。代わりに0.12.3を使う。
オマケ
wkhtmltopdfをgolangを使ってURL指定してhtmlコンテンツをPDF化する。 この方法であれば、PhantomJSの時と同じでPrint用cssが使える。
golangを試すにあたって我がEmacsにgolangの設定を施した。 GOPATHの関係もあるため、macの時だけ設定を読み込むような設定にした。
Typescript
初めての?Typescript
TypeScript自習
TypeScript 日本語ハンドブック | js STUDIO 他Quitなど
上記ハンドブックを読みつつ少しコードを書く。 ビルドは上記ハンドブックの方法だとうまく動かなかったので、別途Qiitaで調べた。
感想
まだ途中。 型をそこまで書きたくない。推論して欲しい。 PHPのタイプヒンティングと戻り値の型指定程度で十分だと思う。 でも引数の型指定なんかは別途定義をかけるので、メソッド本体の記述はスッキリして良いと思った。
気づき
ちゃんと使ってこなかったので、今更constで変更不可になるのは変数そのものが変わる場合のみで、オブジェクトのプロパティは変更可能だと知った。
つまりイミュータブルなオブジェクトやインスタンスを定義したい場合は型を定義しないと防げない。
Lolipop Cloud
Lolipopマネージドクラウドを試してみた
まだベータで無料で少し使えるようだったので試した。
簡単に作れた。恐らくコンテナで動いている。
PHPのコンテナを作成すると別の場所にあるMySQLにデータベース領域を与えられる。 PHPからは提供されたDBのホスト名で接続できる。
LolipopCloudのデータベースについて
charset として utf8mb4 は使える。 collate は utf8mb4_unicode_general_ciになる。なんでutf8mb4_binじゃないの?
オマケ
ついでにグリッドレイアウトも試した。
忘れていたこと
metaタグにviewport指定しておかないとメディアクエリーの指定が効かない。 CSSにメディアクエリー書く場合、デフォルトのスタイルは最も小さいサイズで書くとよいっぽい。 グリッドレイアウトは1frで指定しておくとグリッドそのもののflexbox指定はいらないかもね。