Study-Daily

2021.12.01 study-daily

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.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…]

2017.12.12 study-daily

Groovy TLS

久しぶりにGroovyを触った

Groovyで作成したプログラムがTLSで通信できるようにしないといけなくなったので少し調べた。

Javaの場合

javaで強制的にTLS1.2を使うようにするにはJVM起動時オプションを渡す Java7はデフォルトでTLS利用可能 Java8はデフォルトでTLS1.2使える

JVM起動オプションに

-Dhttps.protocols=TLSv1.1,TLSv1.2 
-Djdk.tls.client.protocols=TLSv1.1,TLSv1.2

を指定する。Eclipse等IDEの場合はJREの起動VMオプション設定に追加する。

Groovyの場合

System.properties[‘https.protocols’] = ‘TLSv1.1,TLSv1.2 ’
System.properties[‘jdk.tls.client.protocols’] = ‘TLSv1.1,TLSv1.2 ’

これシステムプロパティを書き換えてるので、同時に他社のJVMプログラムとかあったりすると影響与えそうなんだけど……

[Read More…]

2017.12.07 study-daily

Socket.io

Node.jsとSocket.io

Node.jsの復習ついでにSocket.ioを試した。

メモ

emitで送信者から送信者以外全員に送信
broadcastで全員に送信
socket.idを指定することで特定の相手にのみ送信
/namespace#room#idで特定の相手に送信できる。idのみだとダメっぽい。
redisにメッセージを押し込んでおくと複数プロセスでメッセージを共有できる

オマケ

alpineのredisのdockerイメージを使うと軽くてお得。

以下でredisのtail -fぽい感じで全部見れるので便利

$> redis-cli -h ${HOST} -p ${PORT} monitor

[Read More…]

2017.11.28 study-daily

Setup OTRS

OTRSをインストールしてみた

オープンソースのチケット管理システム的なもの主にサービス・サポート部署で使うようなもの

セットアップ

環境はUbuntu16.04

基本はダウンロードしてきて実行するだけ。本体はWeb公開領域におけばいいかな?

つまったところ

anynevを使おうとして詰まった、anyenvをシステムワイドに使う場合は割り切ってrootで設定する
plenvをインストールすることはすんなりいくが、モジュールパスなどで使おうとすると詰まる
- ->システムのperlを結局使うことに
cpanmでDBD::mysqlをインストールする場合、以下の事が必要
- 先にMySQLがインストールされていること
- Ubuntuの場合はlibmysqlclient-devがインストールされていること
というか/opt/otrs/bin/otrs.CheckModules.pl の実行で必要なモジュールが確認できる
モジュールが依存するライブラリも存在するので合わせて入れること

感想

domainやメールの設定がちゃんとできていれば特に躓くこと無くセットアップできそう。最終調整？セットアップがGUIのため、Ansibleでセットアップとかは難しそう。

[Read More…]