ぴよまるの雑多な技術所

間違えて休職中ってずっと書いていて心配されていました。全部ちょっとずつ齧って好きって思える技術を見つけたい。研究分野は数理最適化。

webサイトを作り変えた時、古いサイトにアクセスされたらどうするか

webサイトのデザインを新しくして、ドメインも同じドメインを使い続ける時、子ディレクトリにアクセスされると404になるのをどうにかしました。 route53(=DNS)を使っていて、webサイト自体はS3からwixに載せ替えています。

301リダイレクト

恒久的なリダイレクトを意味しています。つまり、ヒットしなかったページは全部indexに飛ばす…みたいな設定ではなくて、新旧の対応するページをリダイレクトするイメージです。 今までのSEOを引き継げます。なお、404ではないと検索エンジンのインデックスからは消されないかも。 というわけで、今回はabout.htmlだとかservice.htmlだとかに個別にリダイレクトの設定をしました。 S3ならS3に、apacheなら.htaccessに設定を書きます。DNS側で設定するわけではなさそう。

たったこれだけなんですが、DNS側に設定するのかとか、301をどこにどう設定するか悩んだので共有。

複数独自ドメインをSEOを意識してRoute53でルーティングする

webサイトのルーティングに困ったので備忘録です。

状況

XXX.comとXXX.co.jpのドメインを取得していて、webサイトをどちらからでもアクセスできるようにしたい。 www.XXX.comやwww.co.jpでもアクセスできるようにしたい。 ルーティングはRoute53を使っていて、webサイト自体はAWSの外部のサーバに乗っている。

SEOで気をつけること

まず、トップレベルドメインとセカンドレベルドメインSEOには関係ないようです。つまり、.comだろうと.co.jpだろうと.xyzだろうと気にしなくて良い。 しかしwwwをつけるかどうか、つまりサブドメインを使っているかどうかは区別されます。ここでは評価を引き継ぐために301リダイレクトをするとよさそう。

今回はAWSのRoute53を使った設定なので、CNAMEを設定することにしました。

設定内容

そもそもwebサイトのルーティングは以下を参照。 例: 独自ドメインを使用して静的ウェブサイトをセットアップする - Amazon Simple Storage Service

今回はAWSのサービスではないのでエイリアスの設定ではなく、外部のサーバのIPをAレコードに設定しました。あとNSも外部のドメイン管理しているところに変更。 wwwがついたサブドメインをCNAMEレコードに設定して完了。

(もう1つのドメインの設定はおそらくCNAMEだけ設定すればいいと思いますが、調査中。あとで追記します)

インフラとかネットワークは疎いので間違いがあったらすみません。

ポートフォリオを作って見た

完全な静的サイトとして、副業探すときのネタになるかなと思って作りました。

作ったサイト

http://piyomaru.girly.jp

全体的な話

見た目はmaterializeなどの選択肢もありましたが、よく使うのでbootstrapを使いました。 JavaScriptでゴリゴリ動きをつけたり、CSSのanimationでゴリゴリ動きをつけるのも考えたんですが、あとでReactのデモアプリを作ろうと思っていたため、開発スピードを重視して取捨選択しました。具体的には8時間縛りにしました。

やってみたこと1:フォント

仕事で関わったデザイナーさんによく「フォントが全てだ」と言われました。 google fontをおすすめされたので、そのあたりから選んでいます。 色味と形も重要ですが、フォントとページの構成がうまくいっていることがwebサイトには重要だとか。

やってみたこと2:オープニングアニメーション

最初のアニメーション、どうやってるんだろうと思ったらCSSなんですね。 今回のはCSSのアニメーションで最初にページ全体を覆っておいたdivを消したり、擬似要素で色味のあるレイヤーを重ねたりしています。

やってみたこと3:SVG

SVGを使うと簡単に図形を動かせて、今時っぽいサイトになります。 今回は単純に曲線描いて動かしただけなんですが、例えばイラレとかでsvg出力して、線をチカチカさせたりとかもできるようです。 あとでちゃんと勉強したら記事書きます。

ドメインについて

選択肢は3つありました。 - github.ioに乗せる - レンタルサーバに乗せる - AWSに乗せる(S3+CloudFront+Route53) 今回はレンタルサーバロリポップを使っています。 登録すると独自ドメインもどきもついてきて、ファイルをFTPでアップロードするだけで公開できます。 個人利用だと安価で手っ取り早い。 github.ioはドメインいじれないのと、リポジトリに紐づくので決定打はないですが却下。 AWSは手間がかかり、8時間に収まらなくなりそうなので諦めました。

何を得たか

  • イマドキっぽいwebサイト作りの概要知識(SVG要素、CSS Animation、CSSフレームワークあたり)
  • 個人でwebサイト運用するときの選択肢(レンタルサーバーが最強な気がした)
  • 自己アピール手段

アウトプットを継続する

こんにちは。弱いweb系エンジニアのぴよまるです。
私は自分に自信がないです。仕事でもその性質を発揮し、うまく社会に対して自分の価値を表現できません。なのでせめてアウトプットをして感情ナシでもやってきたことを表現できるようにしたいと思っています。

何を書くか

今扱っているAWSとか、苦手な設計周りとか、その時々で挑戦してみたことを書き連ねようと思います。
このブログを始める前に「読む人を巻き込むんだ!」とアドバイスをもらったので、もうちょっと生くさい雑多なことも書きます。

誰のための記事か

私と同じような境遇の人にとって参考になればいいなと思います。つまり、

  • 高卒で大卒資格がなくて苦労している人
  • プログラミングスキルがひよっこな感じがする人
  • 色々挑戦するけどLチカレベルをやって何も発信せず終わる人

こういう人です。

始めたきっかけ

2つあります。1つはエンジニアから「強いエンジニアはアウトプットの習慣を早いうちにもつ」と言われたこと、もう1つは広報の仕事をしている方から「今日の出来事でもいいから毎日呟いていくことで、”ただあるだけ”じゃなくなる」と言われたことです

いい加減技術力を上げたい。何年も「ひよっこエンジニア」と名乗りたくない。好きなものを好きに作るスキルが欲しいし、もっと自由に生きたい。という気持ち。
それから、仕事でも後ろ向きて口下手だと「いてもいなくてもいい人間」になってしまうな、という気づき。

そういうのが理由です。

 

もう最初にこういう記事を書いてしまう時点でお気づきかもしれませんが、最初に書いた「自分の価値を表現」どころか何かをまとめて文字にすること自体苦手です。切り口を見失います。そういう練習もして早く人間になります。