ちゃんとしたポートフォリオをつくることにした

ちゃんとしたポートフォリオをつくることにした

まずはこれをご覧いただきたい。
andou666.github.io
おわかりいただけただろうか？そう僕が昔作ったポートフォリオサイトである。GitHub Pagesで公開できる貴重なユーザ用リポジトリ*1をこんなクソみたいなものに使ってちゃんとしたポートフォリオが作れないでいたのです。だけど、GitHub Pagesはプロジェクト用リポジトリというものがあります。なので、本日はそっちを使って「ちゃんとしたポートフォリオサイト」を作っていこうと思ったのでした。

んで、作った。ちゃんとしたとは……？
andou666.github.io
とりあえずデザイン面はJekyll感を全力で出していきたい所存。こうやってGitHub上に静的サイトジェネレータを使ってサイトを公開するとなんか色々やった感のするリポジトリができていいんですよ。

GitHub - Andou666/poo-jekyll
こんな感じに色々ファイルが生成されるので、すごい頑張っている感しません？まあ自動生成がほとんどなんで見る人がみたらバレバレなんですけどね……。んで、肝心な書く内容なんですけど……、僕にはそういうのを載せられる実績なかった（爆笑）。まずは実績ですね。なんとかエンジニアとか自称して怪しい商材をつくらなきゃいけないですね……。

参考：Jekyll公式
Jekyll • シンプルで、ブログのような、静的サイト | プレーンテキストを静的サイトやブログに変えましょう

それで僕が叫んでいるJekyllですが以下のようなものです。

Jekyll はシンプルな、ブログを意識した静的サイトジェネレータです。 それは様々なフォーマットの生テキストファイルを含むテンプレートディレクトリをとり、 Markdown (または Textile) や Liquid コンバータを通して実行し、あなたの好みの Web サーバとサービス提供に適した、 完全かつすぐに公開できる静的 Web サイトを吐き出します。 Jekyll は GitHub Pages の背後で動いているエンジンでもあります。このことは、 プロジェクトのページ、ブログまたは Web サイトをGitHub のサーバから無料でホストするために Jekyll を使用できることを意味します。

機械翻訳的違和感を感じますが、静的サイトジェネレータです。GitHub Pagesがオススメしてくるサイトジェネレータです。そんなわけなんで今回これを使ってみました。

$  gem install bundler jekyll
$  jekyll new my-awesome-site
$  cd my-awesome-site
$  bundle exec jekyll serve

導入はこんな感じ。最新版はbundle使うようになっているので日本語版だけ見ていると混乱する仕様になってます。動作的な違いはどこにあるのかは分かんないです。

やったことメモ

多分、おそらくあとからぼこぼこと静的サイトをつくる予定なんで自分用メモ残しておきます。まあ詳しいことは公式をみて。僕はこの公式の英語サイトを毎度解読してサイトを公開するのやなんで自分用メモとして残すだけなんで……。
Configuring a publishing source for GitHub Pages - GitHub Help

「gh-pages」ブランチを利用して公開する
① 新規リポジトリを作成します
② リポジトリに公開するファイル（Jekyll）をプッシュします
③ 「gh-pages」ブランチを作成します。「master」は不要なんでgit branch -d masterで消します*2
④ GitHubの[Setting -> GitHub Pages -> Source] から「gh-pages branch」を選択して保存

以上で公開できるとのことです。masterは別に消す必要ないんですけど、普段使いもしなかったGitブランチ関連のコマンド使ういい機会だと思ったので使った。今は「gh-pages」なんてブランチ切る必要ないしね自己満足以外のなにものでもないのです。

詰んだところ

公式手順通りにすれば公開できるわけなんだけど詰まったところまとめる。
_config.yaml

baseurl: "/{your repository name}" 
url: "https://{your name}.github.io" 

上記url指定しなきゃページ移動できないこと忘れて404だしてた。

*1:アカウント一つにつき一つ作成できるサイト

*2:現在ブランチがmaserだと削除できないので、必要に応じてブランチ切り替える

悲しいおしらせ

みなさんの生活に一切関与しませんが悲しいおしらせです

僕が以前に作成していたスペースキャット量産サイトの無料枠がなくなったため、これ以上の生産ができなくなりました。かなしー……。そして、しょうもな……。

inujini.hatenablog.com

無料枠内訳
・広告あり
・ストレージ 20MB
・テーマ数 5
・プラグイン 2
　Akismet Anti-Spam
　ShareThis
・トラフィックレポート なし
・FTP なし
・サポート メール

参考
Compare Web Hosting Plans | Tripod.com

さすがにストレージは無限に生成できないのでここで打ち止めです。クラウドストレージ使って画像ファイルを共有させれば裏技的に量産することできるんですけど、色々と運用の仕方を変えなくちゃだめなのでこれにて終了です。最悪の最悪JavaScriptでフロント機能全部カスタマイズとかアホなことをすれば無限にカスタマイズできたりするんですけどそれはそれでさすがに面倒くさすぎるのでこれで終了です。

素材サイトレビュー

というわけで悲しいお知らせだけするのもアレなんで、色んなところのフリー素材を利用してみたのでその紹介と使用感などを……。

■ ぱくたそ
無料の写真素材はフリー素材のぱくたそ

• 国、地方自治体、企業、個人、団体、にご利用いただけます。なお、日本語で連絡が取れない方はご利用なれません。
• 商用利用可能です。なお、写真素材を商品化して販売できません。
• 写真素材はぱくたそから直接取得、または、ぱくたその写真素材であると説明を受けて取得することとし、それ以外の手段によって取得した写真素材はご利用なれません。
• 写真素材を加工、合成、変形または変換してご利用いただけます。

僕がよく使う素材サイト、結構ニッチな素材があるので組み合わせて組み合わせて遊ぶと楽しい。利用規約ちゃんと今まで読んでなかったんですけどいわゆる「Japanese only」的な規約だったんですね。

■ Pixabay
1 million+ Stunning Free Images to Use Anywhere - Pixabay

What is allowed?

• ✓ All content on Pixabay can be used for free for commercial and noncommercial use across print and digital, except in the cases mentioned in "What is not allowed".
• ✓ Attribution is not required. Giving credit to the contributor or Pixabay is not necessary but is always appreciated by our community.
• ✓ You can make modifications to content from Pixabay.

What is not allowed?
This section only applies to image users and not to the appropriate image authors.

• ✕ Don't redistribute or sell someone else's Pixabay images or videos on other stock or wallpaper platforms.
• ✕ Don't sell unaltered copies of an image. e.g. sell an exact copy of a stock photo as a poster, print or on a physical product.
• ✕ Don't portray identifiable people in a bad light or in a way that is offensive.
• ✕ Don't use images with identifiable brands to create a misleading association with a product or service.

帰属不要、許可されてない要素を除き商用可、加工可のサイトです。海外サイトは割とセンスのいい画像多くていいですよね。

■ Photock
フリー写真素材フォトック【無料・商用利用可・クレジット表記不要】

◎利用無料、商用利用OK
◎会員登録・リンク・報告不要
◎クレジット表記不要（任意）
◎最高で8,000px超えの超解像度
◎選べる4サイズ
◎法人でも商用利用可
◎写真加工自由（むしろ推奨）
◎写真トレースOK!
×未加工での販売・再配布

自由度の高い素材サイト。合成素材として使うには切り抜きの難度がかなり高めの素材多め。

■ Kaboompics
Free stock photos - Kaboompics

What is allowed?

• All photos on Kaboompics can be used for free for commercial and noncommercial use.
• Attribution is not required. Giving credit to the the Kaboompics is not necessary but always appreciated.
• You can modify the photos. Be creative and edit the photos as you like.
• You are free to use our photos for purposes such as creating graphic for your blog or social media, making HTML/PSD templates (for sale), decorating your articles, Power Point presentations, you can even print them on t-shirts.

What is not allowed?

• Identifiable people may not appear in a bad light or in a way that is offensive.
• Don't sell unaltered copies of a photo, e.g. don't sell it as a stock photo, poster, print or on a physical product without adding any value.
• Don't redistribute or sell the photos on other stock photo.

帰属不要、許可されてない要素を除き商用可、加工可のサイトです。検索にクセがある気がする。

5000 Free Stock Photos
5000 Free Stock Photos

All photos on this web site are public domain. You may use these images for any purpose, including commercial. But if some photo contains logos and products you need to be careful. Using someone else's trademark commercially can get you sued.

待望のパブリックドメイン画像サイト。画像サイズとか解像度とか気になるものがあったりするんですが気兼ねなく使えるって言う点では完璧。

■ 写真AC
写真素材なら「写真AC」無料（フリー）ダウンロードOK

「写真AC」は、フリー写真のダウンロードサイトです。人物、ビジネス、生き物、花・植物、食べ物・飲み物、町並み・建物など、様々な写真がフリーでダウンロード可能です。
営利目的で作成される商業印刷物やホームページにも、利用規約の範囲内で完全無料のまま自由にご利用いただけます。
加工(切り抜きや色変更)も自由に行って頂けます。

※ 権利関係などの使用後のトラブル防止のためにも、利用に際しては(とくに商用利用をしたい方)必ず禁止事項並びに利用規約をご確認ください。

最近AI人物写真とかいうサービスもできたところ。登録しないと使えないのでかなり面倒くさい。あと無料枠制限きつすぎる。クリエイター登録もセットでしてSNSみたいな感じでゆるく使うのがいいのかもしれない。

参考
AI人物素材（ベータ版）｜写真素材なら「写真AC」無料（フリー）ダウンロードOK

■ Pixels
無料の写真素材 · Pexels

できること
Pexelsライセンスはできる限りシンプルになるようにしました。詳しい情報については、さらに以下の情報をお読みください。

• Pexelsのすべての写真は、無料で商業目的でも非商業目的でも利用できます。
• 出典表示は不要です。カメラマンの表示やPexelsの出典表示は不要ですが、そうした表示はいつでも感謝されます。
• 写真に変更を加えることができます。創造性を発揮して写真を編集してください。

以前にも紹介した素材サイト。

今後の方針

こうやって素材サイトの規約みてるとスペースキャット活動（？）続けていくの難しいですね。誰得なわけなんですけどね。有償枠に切り替えるために商用利用に手を出すと全部素材サイトからなので二次利用でひっかかる気がする。

まあいいや。今後このクソ活動はEntyでやっていきましょうかね。更新しろとか催促メールきてますし……。

皆さんのネコちゃんを宇宙仕様に加工させていただきますので何卒宜しくお願い致します(笑)。Entyこういう用途で使うつもりなかったのに……。とりあえずちゃんと利用して固定ファンづくり目指していきます……。

初心者だからデザインを学ぶことにしてみる

初心者だからデザインを学んでみる

今月「初心者～」でタイトルで記事書きすぎな気がする。まあ実際初心者だからね。プロを名乗ることできないから永遠に初心者を名乗らざるえないからね仕方ないね……。んでですね。つい先日、デザイン学習サイト「chot.design」というものの存在を知ったのでちょっとやってみることにしました。
chot.design

デザイン系はイラスト制作に同じくまず資料集めみたいなところあるからね、準備が大事。まずはどんなサイトだったりどんな設計基準が参考になるかをまとめたサイトを挙げていきます。サイトの方でまとめ挙げられているのこちらでまとめました。挙げられていないのもまとまってるけどその辺は自己判断で宜しくお願い致します。あと僕の独自判断でまとめは増えていきます。
・WebDesignまとめ
andou · WebDesign · Posts

・UI/UXまとめ
andou · UI/UX · Posts

ここぞとばかりに僕のMixの宣伝をしていく。サイト内の機能を全然信用していないのでブクマツールも駆使して独自学習路線を突っ走ります。このサイト将来的には全編有料とかにもなりかねないからね。自分が参考になりそうだと思ったものは根こそぎ自分用にまとめさせていただきます。

とりあえずちょっとやってみての感想

とりあえず「はじめての方におすすめ」ってカリキュラム終わらせました。

昔ちょっといじってた仮想通貨勉強サイトのアレに近いものを感じる。ただ理解度チェックテストみたいのがないので基本的に読み物です。ツール関連のHow Toが充実しているので、その辺が他との差別ポイントになるのかなって思った。今のところよくあるデザイン技術の話です。ツールが新しめのやつだから学習サイトがよくあるどまりでない感じに成り立ってるのかなって感じた。まだ触りしか見ていないからよくわかんないですけど、章の最後とかに課題とかあったら僕はKritaみたいにfor Linuxとか言ってLinuxユーザ向けにカスタマイズしたアホな記事を書きかねなかった……。PhotoshopやIllustratorネタってInkscapeとGimpでもこの手のネタ解決できると思うんですよね。だけどみんなやんないじゃないですか。だから僕はそういう謎テクニックをまとめたいなって思ってしまうのです。

個別感想編
■ デザインを学ぼう
「Webデザイナ」「UI/UXデザイナ」「Webディレクタ」「プロジェクトマネージャ」「プロダクトマネージャ」向けのカリキュラムだそうです。
あとは勉強のやり方について。そんな感じのこと書いてあります。「このサイトについて（About）」の内容が書いてある感じですね。

■ はじめてのデザイン
その昔僕がまとめたことと似たような書かれていたので、この内容僕向けではなかったような気がしなくもない……。
① デザインの進め方について
あのな、ウチなこれからデザインやっていこうと思うんや - コミュ障だから明日が僕らをよんだって返事もろくにしなかった
講座の方だと、

[整理] => [アイディエイト] => [プロトタイプ] => [テスト] => [リリース]

みたいな感じでまとまってます。僕はこの手の流れ全部システム開発における「要件定義 => 外部設計 => 内部設計 => プログラム設計 => プログラミング => テスト」みたいなもんだと思ってるんですけどその考え方と違いってあるんですかね？

② 4つのデザイン原則について
デザインには4つの基本原則があるらしいので調べてみた - コミュ障だから明日が僕らをよんだって返事もろくにしなかった
講座の方ではデザインのコントラスト（強弱）について語ってます。これからどう増えていくか楽しみです。

■『Photoshop』入門
Photoshopのインストールからメイン画面の見方、レイヤ操作と選択範囲の操作についてみたいな話です。
とりあえず、この内容で僕がその昔作ったスペースキャットクソコラ制作サイトみたいなことできるからみんなクソコラ制作していこうな。
publish.lycos.com

■ はじめてのWebデザイン『HTML・CSS』入門
HTMLタグとCSSの基本的な記述を覚えましょうみたいな内容。
HTML5における要素の分類（コンテンツ・モデル）－HTML5リファレンス
とりあえずこれ（コンテンツ・モデル）については参考になった（今更）。この部分SEOとかにどう関与しているかよくわかんないから、あーそういうのあったねみたいな感覚でいじってる……。あとリンタに怒られない限りそのまま放置……。

とりあえず個別で触ってみての感想は以上です。また進めたら追加でなんか書きます。

おわり