ポートフォリオをつくろうず ｴｳﾞｧｰﾉｩﾄ編

ポートフォリオをつくろう Part 0.1

はい、おはようございます。今日もポートフォリオページをつくっていこうと思います。もう何度目になるかは知りませんが今日もポートフォリオをつくっていきます。こんなことを何度もやっていますが、この知見が実生活に役立ったことは一切ないです。あほくさ。

www.evernote.com
そんなわけで今回は人気メモアプリ（要出典）Evernoteをポートフォリオページにする小技の紹介だ!!これの共有リンク機能を使えば上みたいな感じでさくっとシングルページができるぞ。

おしまい

公式
人気のメモアプリ | Evernote で大切なノートを整理

カスタマイズ用メモ

なんかググっても「HTMLファイル自分で作ってそれをコピーすれば自分だけのオリジナルノートができるよ。」みたいな情報しかヒットしないから根本からカスタマイズする方法のメモを残しておきます。

とりあえずWeb版いじった限りだとカスタマイズできそうになかったのでアプリ版落としてきます。
Evernote を無料ダウンロード | Evernote
そしたら「ファイル->エクスポート」で(.enex)ファイルを落としてきます。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE en-export SYSTEM "http://xml.evernote.com/pub/evernote-export2.dtd">
<en-export export-date="*******" application="Evernote/Windows" version="6.x">
<note>
<title>無題</title>
<content><![CDATA[<!DOCTYPE en-note SYSTEM "http://xml.evernote.com/pub/enml2.dtd">
<en-note>
<div><br /></div>
</en-note>]]>
</content>
<created>******</created><updated>******</updated>
<note-attributes><author>****</author></note-attributes></note>
</en-export>

んで空ノートを作成するとXHTMLベースの以下のようなファイルが生成されます。まあ、このブログを読んでいる皆さんはこんなものを見なくても余裕でカスタマイズできる人しかいないから必要ないと思いますが僕はよく知らないのでまとめます。といっても公式みればわかりますが……。

参考
ENML - Evernote Developers

とりあえずごたごた出力されますが、以下要素を修正していけばいけるっぽいです（未検証）。

<en-note>  
    <div style="/*ここになんか書く*/"><!-- ここになんか書く --></div>
</en-note>

画像系はen-media、暗号化はen-crypt、ToDoのチェックのはen-todoっぽいです。んで、カスタマイズはdivタグで囲ってスタイルいじっていくってのが正解っぽい。超めんどくせぇ……。そんでなんやかんややって、表を真ん中に持ってきたり、画像に謎の影を落としたりなどを追加しました。装飾めんどくせぇ……。

つくった感想

DIVタグに逐一スタイルを記述していく方法は最高に時間の無駄だと気付いたのは記事ができてからでした。ぐちぐち書きましたが、とりあえず簡単なシングルページを作るにはこの使い方はありかもしれないです。フォントとかの設定は高速でできるので……。必要な要素わかっていればプレビュー機能と組み合わせながらなんとかなるからね。大体そんな感じです。

おわり

あぁ～レッサーパンダぁぁぁああああ～

けもフレお絵描き回

このブログを書いている人の頭が残念なことは皆さん周知のことだと思いますが、そんな人でも文章は書けるのでブログを書いてしまうのです。言語教育とは邪悪ですね。人であることの罪です。ブログとは人間の業なのです。人生とは地獄なのです。

そんなわけでして、某アニメ視聴してから心がボロボロのまま復帰できていませんがイラスト描きました。

レッサーパンダちゃん描いた。
制作時間：大体2時間

今日の報告は以上です。

おまけ

あ、そうだ（唐突）。以前作っていたUnityの方ボタン機能実装させました。
inujini.hatenablog.com

本当はおまけの進捗報告がメインだったんですけど、特に面白い要素追加できなかったんでおまけ入りです。

作ってた当初はこれはダメかもしれないとか思ってたけどデザインパワーでねじ伏せればいけるかもしれないと謎の自信が出てきた。とりあえず画像つくるのがんばる。イメージ部分にちょっとしたイラスト貼ればなんか行ける気がするんだ……。

うぇぶみが足りない

このブログにはうぇぶみが足りない

最近思うのです。このブログにはうぇぶみが足りない……。皆様もそう思いますでしょ。僕もそう思うのです。

そうしたわけで本日は世界をうぇぶみで満たすためにこれを使っていこうと思います。
FFmpeg

FFmpeg（エフエフエムペグ）は動画と音声を記録・変換・再生するためのフリーソフトウェアである。Unix系オペレーティングシステム (OS) 生まれであるが現在ではクロスプラットフォームであり、libavcodec（動画/音声のコーデックライブラリ）、libavformat（動画/音声のコンテナライブラリ）、libswscale（色空間・サイズ変換ライブラリ）、libavfilter（動画のフィルタリングライブラリ）などを含む。ライセンスはコンパイル時のオプションによりLGPLかGPLに決定される。コマンドラインから使用することができる。対応コーデックが多く、多彩なオプションを使用可能なため、幅広く利用されている。

これが何かといえばこんなんです。大体の音声・映像ファイルをコンバートできるものです。

インストールするとffmpegコマンドが使えるようになります。

#使い方
ffmpeg -i {入力ファイル} {出力ファイル}

こんな感じにCUIでファイル形式を変換できたりします。CUIなので黒い画面での操作となります。黒い画面から逃げてはいけない。

さて……、話がそれてしまいました。先ほどから散々連呼している "うぇぶみ" とは何かですが、これのことです。

WebM（ウェブエム）は、Googleが開発しているオープンでロイヤリティフリーな動画のコンテナフォーマット。ウェブに親和的なオープンなフォーマットであると共に、軽量さと高品質を両立することを目標としている。

読み方はウェブエムだろとかそういうのは気にしてはいけない。そう、ただの映像用フォーマットのひとつです。gifより編集しやすいところが特徴と僕は思っている。それ以上の特徴はわからん。使いやすいフォーマットのはずなんですが、今まで変換できる方法をよくしらなかったので記事にしてしまいました。こんな風に使うらしいですね。

WebM 公式
The WebM Project | Welcome to the WebM Project

んで、上述したツールを利用してうぇぶみ(.webm)変換するとこんなんできます。

やったぜ!
こうしてまた一つこのブログにうぇぶみが満たされました。

＼ HAPPY END ／

なんだこの記事は……。

おまけ

普段使わなすぎて使い方すら覚えていなかったvideoタグについてのTipsでもおまけに載せておきます。

<video controls width="250">
    <!-- ソースの指定 -->
    <source src="{動画}.webm" type="video/webm">
    <source src="{動画}.mp4" type="video/mp4">
    <!-- 代替コンテンツ: 利用できない場合表示 -->
    ご利用のブラウザではこの動画を閲覧することはできません
</video>

こんな感じに利用するとのことです。ブラウザのことを考えれば複数読み込ませた方がいいのかもしれませんが、上で紹介したやつは.webmしか使ってないので見れなかったら諦めて。

参考
<video>: 動画埋め込み要素 - HTML: HyperText Markup Language | MDN