portfolio

VPSにMariaDBをインストールしてデータベースを作ってみる。【ver.5.2】

参考サイト centossrv.com MariaDBインストール $ sudo yum -y install mariadb-server MariaDB設定 $ sudo vi /etc/my.cnf.d/server.cnf server.conf # 略 [mysqld] character-set-server = utf8 # 略 MariaDB起動 $ systemctl start mariadb $ systemctl e…

メッセージ投稿用のエンドポイントを作成してみる。【ver.5.1】

ポートフォリオに追加するメッセージツール用のエンドポイントを作成してみた。 kazmaarakaki.hatenablog.com Expressを使えばめちゃくちゃ簡単、と思いきやPOSTでクライアントからデータを送るときには追加のモジュールが必要。 body-parserをインストール …

ver.6.0に向けて。

こんな感じでチャットツール的なものを追加したい。 MySQLでメッセージを管理し、Web APIで通信を行う予定だ。チャットというよりも掲示板に近いかもしれない。 データベース テーブルのスキーマは下のような感じ。 SQL全然わからないのでおかしいところがあ…

Google Analyticsを導入してみる。【ver.4.5】

ポートフォリオにアクセス解析なんて必要ないんだけど、Google PartnersのAnalytics認定が欲しいので勉強がてら導入する。 www.google.com support.google.com analytics.google.com 追跡用のタグを追加する Google Analyticsに登録すると、追跡用の<script>タグを取…

gzipでの圧縮と画像の最適化をしてみる。【ver.4.4】

ファイルをminifyして圧縮したので、次はgzipでさらに圧縮をかけていく。 bundle.jsの圧縮 webpackのgzip用のプラグインをインストールし、設定ファイルを編集する。 github: webpack-contrib/compression-webpack-plugin > npm install compression-webpack…

style.cssをindex.htmlの中に書き込んでみる。【ver.4.3】

html内にstyleを書き込む index.html diff <html lang="ja" prefix="og: http://ogp.me/ns#"> <head itemscope itemtype="http://schema.org/Article"> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> </meta></meta></meta></head></html>

index.htmlをminifyしてみる。【ver.4.2】

index.htmlはそんなに容量が大きいわけではないので効果は薄いと思われるが、bundle.jsをminifyしたついでなのでこちらもminifyしてみる。 gulp-htmlminのインストール diff > npm install gulp-htmlmin --save-dev gulpfileにminifyの処理を追加する minify…

bundle.jsをminifyしてみる。【ver.4.1】

先の記事に載せたスクリーンショットの通り、現在bundle.jsのファイル容量が大きくなっている。 kazmaarakaki.hatenablog.com ビルドされたbundle.jsの中身を確認すると、不要なコメントや改行が多く、minifyするだけでかなり圧縮できるものと思われる。 Web…

トップページのコンテンツ追加とコンポーネント仕様の変更をしてみる。【ver.3.7】

トップページにコンテンツを追加した。 コンテンツの増加でコードの見通しが悪くなってきたので、見出しやリストをコンポーネント化、リストの内容を外部jsonにして構造をわかりやすくした。 index/components/main/view.js diff import React from "react";…

ver.5.0に向けて。

bundle.jsの容量が900KBを超えており、レンダリングに時間がかかっている。 ver.5.0に向けてはパフォーマンスチューニングを行いたい。

faviconを追加してみる。【ver.3.6】

題の通りfaviconを追加する。 favicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。favorite icon(フェイバリット・アイコン:お気に入りアイコン)…

sitemap.xmlを追加してみる。【ver.3.5】

ver.4.0の用件はもう満たしているが、マイナーバージョンがまだ6つほど上げられるので細かな調整やコンテンツの補完をしていきたい。 ver.4.0ではVPS上にgitを使ってデプロイする環境を作ることを目標にする。 ver.4.0に向けて。【ver.3.0】 - 頑張って考え…

robots.txtは追加しない。humans.txtを追加してみる。【ver.3.4】

ポートフォリオではクロールもインデックス登録も別に制御する必要は無いので、robots.txtは置かないことにした。 注: サイトがクロールされる方法を制御する必要がある場合にのみ、robots.txt が必要です。 https://developers.google.com/web/fundamentals…

ベスト プラクティスを参考にheadの記述を追加する。【ver.3.3】

Google Partnersの認定を取ろうとして参考ページを見ていたら、メタタグのベストプラクティスというのを見つけたのでポートフォリオのメタタグを書き直してみた。 Social Discovery | Web | Google Developers ベストプラクティス抜粋 <html prefix="og: http://ogp.me/ns#"> </html>

VPS上にgitのリモートリポジトリを作ってみる。【ver.3.1】

VPS借りたときにnginxの設定やらNodeの設定やらgitの設定やらドメインやらSSLやらやったんだけどなにも覚えてない。 不覚。とりあえずある環境そのまま使うので環境ない場合は適宜ぐぐる。 VPS上にリモートリポジトリを作成する > pwd /home/[USER NAME]/git…

ver.4.0に向けて。【ver.3.0】

とりあえずreact-routerを使ってページの追加が出来たのでver.3.0としたい。 ver.4.0ではVPS上にgitを使ってデプロイする環境を作ることを目標にする。

読む本リストのJSONデータを読み込んで描画してみる。【ver.2.3】

ほんとはデータベースを使うべきなんだろうが、とりあえずJSONで代用する。 データファイルの作成 components/books/components/main/books.json diff [ { "title": "本のタイトル", "url": "AmazonのURL" }, ... ] Viewファイルの編集 components/books/com…

Googleのデジタルワークショップを修了したのでポートフォリオに追加してみる。【ver.2.4】

ついでに持ってる資格系を付け足した。 codecademyの受講状況も足した。それっぽくなってきたのかな。 こういう時ってマイナーバージョンあげて良いのかな? www.codecademy.com components/index/components/main/view.jsx diff import React from "react";…

react-router-domを使って画面遷移をしてみる。【ver.2.2】

ver.3.0のビジョンが見えないまま前回ver.2.1へ移行してしまったわけだが、あらためてver.3.0への目標を決めたい。 読む本リストの実装、これだ。 読む本リストを思いついた時点で、なんか他にもリスト系作ってみたいなーと思ったので、別画面を作成して画面…

gulpfileとwebpack.configをES2015で書いてみる。【ver.2.1】

.babelrcにpresetを追加してファイル名にbabelをつけるだけ。 > npm install babel-preset-es2015 --save-dev .babelrc diff { "presets": ["react", "es2015"] } webpack.package.babel.js diff webpack.package.jsをwebpack.package.babel.jsにリネームす…

CSS Modulesを導入する。【ver.2.0】

WebpackのCSS Modulesは、loaderを追加するだけでHTMLファイルの<head>内にモジュールの記述をまとめた<style>要素を追加してくれる。 ここまででいったんReact化についてやりたいことは一段落したのでver.2.0としたい。 ソース【ver.2.0】 https://github.com/cosmology2</head>…

コードをES2015+の文法で書き換えてみる。【ver.1.4】

とりあえず書き換えて実行してWebpackのエラー見ながら設定直していこうかな、と思ったら普通にビルドできちゃった。 Webpackすげえ。 ディレクトリ構成 [ROOT]/ + node_modules/ + build/ + source/ | + images/ | | + main.jpg | | | + renderer/ | | + co…

各パーツのコンポーネント化をしてみる。【ver.1.3】

Reactでのビルドと描画が無事成功したので、次はコンポーネントを作ってみたい。 Header, Main, Footerの3つのコンポーネントに分けようと思う。 エラー出て修正したところは赤太字。 コンポーネントを意識したディレクトリ構成へ React関連はsource/rendere…

WebpackでReactを試してみる。【ver.1.2】

Webpackの雰囲気がふわっとつかめてきたので早速ポートフォリオをReact化してみる。 エラー出て修正したところは赤太字(太字とh3タグの見分けがつかない)。 Webpackのインストール > npm install webpack --save-dev jsxのトランスパイルのためにloaderが…

React開発環境を作ってみる。【ver.1.1】

Reactで使うjsxファイルはブラウザでそのまま読み込むことができない。 そのため、今までべた書きしてきたそれぞれのファイルを、トランスパイルする環境を作らないといけない。 まずはディレクトリ構成の見直しから。 ディレクトリ構成の見直し # BEFORE RO…

ver.2.0に向けて。

Webページ製作の実績も欲しいけどスマートフォンアプリ製作の実績もほしい。 どうやらReact Nativeというフレームワークがそれを実現してくれそうだ。 animane.hatenablog.com 手始めにポートフォリオのReact化をしたい。

いったん完成。【ver.1.0】

当初予定していた項目は入れたし、見た目も整ってきたのでいったん完成としたいと思う。 見出しを大文字にしたり、ステータスをStudentにしたり(今日から職業訓練校に通います)、Facebookのアカウントを追加したりと微調整をした。 ページ My Portfolio ソ…

メタタグを充実させる。【ver.0.7】

<head>内の情報を充実させたいと思っていろいろ探していたら便利なページを見つけた。 github.com これを参考に<head>内を充実させてみる。 BEFORE <head> <title>My Portfolio</title> <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet"> <link rel="stylesheet" href="./style.css"> </head> AFTER <head> <meta charset="utf-8"> </meta></head></head></head>

Color of the Year 2017の色を使ってみる。【ver.0.6】

PantoneのColor of the Year 2017が緑らしい。 ニュージャージー州カールスタッド(2016年12月8日) - エックスライト社のグループ企業であり、デザイン業界向けのグローバルなカラースタンダードと色の権威であるパントン社が、2016年12月8日PANTONE 15-034…

著作権表示をクリエイティブコモンズにしてみる。【ver.0.5】

「なんで?」って聞かれたら「なんかかっこいいから」以上の理由はないだけど。。。 CCライセンスとはインターネット時代のための新しい著作権ルールで、作品を公開する作者が「この条件を守れば私の作品を自由に使って構いません。」という意思表示をするた…

Google Fontsを使ってフォントを変えてみる。【ver.0.4】

Google Fontsというすばらしいサービスがあって、およそ全て把握できないような種類のフォントを無料で使えるので使うことにした。 fonts.google.com およそ全て把握できないので、"google fonts best 2017"とか"awesome google fonts"とかでググって探す。 …

マークアップをアクセシビリティの観点から見直してみる。【ver.0.3】

medium.com internationalization → i18n localization → l10n accessibility → a11y [new!] なんでもありだな、とは思った。 記事の中で便利なツールが紹介されていたので、それについて先に書いておく。 下のtota11yはブックマークレットになっているので…

ポートフォリオのスタイリング。【ver.0.2】

やっぱCSSって偉大。既存のHTMLでも好きなようにスタイリングできる。 CSSはCascading Style Sheetの略で、どうでもいいんですけど、イメージ的には黒い馬なんですよ。 マキバオーのせいですね。 学校の階段のEDの人イメージも黒い馬。 CASCADE - sexy sexy …

ポートフォリオのマークアップ。【ver.0.1】

手始めにマークアップしてみる事にした。手を動かすとやりたいことがたくさん出てくる。 後で見返せるように小さいステップで記録していきたい。 前回決めた下の内容をマークアップしていく。 Introduction Profile Contact 今回の製作物。 https://cosmolog…

ポートフォリオに何を書くべきか。

名探偵コナンの2億冊突破を記念して小学館が「コナン顔メーカー」というのをやっている。 http://conan-face-maker.com/conan-face-maker.com 著作権について 「名探偵コナン顔メーカー」(以下本コンテンツ)で作成されたイラストの著作権に関しては、編集…

ポートフォリオ作る。

ということで作る。頑張る。 kazmaarakaki.hatenablog.com 環境作りから!!!(要るかな。。。?) プロジェクトに新しいディレクトリ作って。 > npm init > npm install gulp --save-dev > npm install gulp-webserver --save-dev index.html と gulpfile.…