40代目前の男がフリーランスを目指すブログ

40代目前の男がフリーランスを目指す為の日記です。

RustとOpenGLを使った描画練習

9月29日(日)の日記です。

この日は技術書典7にて購入したRust関連の本を進めました。

書籍の内容としては、Rust言語にてOpenGLの機能を使って色々と描画するもので、グラフィック描画の大本とも言えるOpenGLの基礎ですね。
今までOpenGLといえばC言語及びC++でしか対応していないと思いきや、Javaでも可能との事。そしてRustでも、パッケージとしてOpenGLに必要なライブラリーを取り込む事で実装出来る様ですので、これは嬉しいですね。

てなわけで、まずは640px x 480pxのウィンドウに赤の三角形を描画するコードを書きました。

f:id:eewano:20190930081126p:plain

正直、「たったこれだけ?」と思ってしまうかもしれませんが、この三角形を描画する為にどれだけ必要な処理を、コードを書かなくてはいけないのか、早くも一苦労しました。もちろん、テキストに沿って写経しただけです。ウィンドウを表示するまでの内容(コードの中身)は何とか理解出来ましたが、ShaderやらFragmentやら、訳が分からない処理のオンパレードで圧倒されております(汗)。

あくまで趣味として休日を使って学んではいますが、Web言語とは全く異なる世界の為、これはこれで新たな発見が出来るかもしれませんね。その前に、挫折しなければの話ですが...。

Ubuntu18.04を再インストールとWordPress仮想環境の構築

9月26・27日(木・金)の日記です。

今回は勉強日誌ではなく本当の日記みたいな内容ですね。
26日より、Ubuntu18.04を入れたノートPCでもWordPressの勉強が出来る様に仮想サーバーを構築しようとしていたのですが、

  • VCCW
  • Local By Fly Wheel

この2つのWordPress仮想サーバー構築アプリが全く使えませんでした。
使えないというよりは、インストールは出来たけどサーバー構築に必ず失敗してしまうトラブルに巻き込まれたというわけです。

VCCWについては、どうもVirtualBox自体のバージョンと、仮想OS側のGuest Additionsという項目のバージョンが異なるせいでVagrantが起動しないという事態になりました。このVCCW、最新のVirtualBoxではまともに動かないのではないでしょうか?

そしてLocal By Fly Wheelというのは、WordPressの仮想サーバーが簡単に構築出来るアプリで有名らしく、Linux版もあるので試してみたのですが、WordPressの自動インストールやデータベースの自動設定の所で必ずエラーが出てしまい、結局使えず...。

そんな事が重なり、Ubuntu18.04を再インストールする事にしました。今まで使っていたアプリ等の入れ直しは随分と時間が掛かりましたが、何とか先程終了して一安心です。Local By Fly Wheelも無事機能する様になったので、ようやくWordPressの勉強が再開出来ます(VCCWの方は怪しいので現時点では使いません)。

WordPressの勉強11日目

9月25日(水)の日記です。

本日は『グーテンベルグ時代のWordPressノート テーマの作り方(入門編)』のKindle本の3回目の復習を行いました。

f:id:eewano:20190913012345j:plain

...何で3回もやろうと決めたのかについての理由は、今まで理解出来ていなかったCSS3のGrid Layoutの復習、及びWordPressのオリジナルテーマ制作においてのテンプレート等が把握出来ているかの確認をしたかったからです。

さすがに3回目ともなるとテーマの構成についてはほぼ理解が深まったのですが、今度はGrid Layoutの内容もほぼ1つ残らず理解しつつ確実に進める事が出来てとても良かったです。
CSS3の各プロパティが何を意味しているのかも、打ち込んだその場で想像出来る様になったのは嬉しいですね。まあ3回目という事も理由にあると思いますが...(汗)。

WordPressの肝である「functions.php」ファイルの内容も大分理解出来たので、次からは本格的に自分でレイアウトを考えたオリジナルテーマの制作に向けて頑張ります。
それと同時に、8月から初めてきたHTML・CSS3、Bootstrap、ランディングページ、Grid Layout。これらを用いたポートフォリオの制作にも少しずつ入っていきたいと思います。

WordPressの勉強10日目

9月24日(火)の日記です。

WordPressユーザーのためのPHP入門』を一通り読み終わったので、今度はこの書籍を参考に、9月9日に一度拝見しました「たにぐち まこと氏のプログラミング学習チャンネル」をもう一度復習する事にしました。

たにぐち まことのプログラミング学習応援チャンネル(WordPress編)

今度も同じく全11話を通しで視聴し、開発環境を構築して一緒にコードを書いていく事を行いましたが、何冊か本を学んだ後では、やはり理解度が自分でも違うなと感じました。

初回では何をやっているのかサッパリ分からなかった部分も、テーマや編集画面の改造に対して1つ1つのテンプレートの意味やファイルの構成等がかなり明確に把握出来たので、講座内容をキチンと理解出来たのは嬉しいです。

この調子で、次回も過去の復習を行うと共に、本格的にオリジナルテーマの作成を実施していきたいと思います。

WordPressの勉強9日目

9月23日(月)の日記です。

WordPress関連の書籍を2冊勉強しましたが、まだまだオリジナルテーマを独自に制作する為の作り方の理解は出来ておりません。HTML5・CSS3と比較すると覚える内容は沢山あると感じますし、やはり独自のテンプレートに慣れていないのが現状です。よって、新たにもう1冊勉強する事にしました。

f:id:eewano:20190924083641j:plain

水野史土氏 著書の『WordPressユーザーのためのPHP入門』という本です。

PHP自体のスキルももっと得ようと思い、この本をチョイスしました。ボリュームがあり、前の2冊と比べると難しめの内容だと感じますので、数日掛けてじっくりとWordPressの知識をモノにしていこうと思います。

「技術書典7」のイベントに行ってきました。

9月22日(日)の日記です。

この日は、技術書典7というイベントに行きました。

技術書典7

様々なサークルがオリジナルの書籍を作って販売する、コミケのプログラミング業界版みたいな感じでしょうか。
実際にイベント会場に入って思いましたが、凄い人数です。入場に対して厳重なルールを設けていたので、非常に人気なイベントだなとすぐに思いました。

取り扱っている言語やフレームワークについても、非常に幅広く展開されている事を知れたのですが、

  • Go言語
  • Swift
  • Firebase
  • React, Angular, Vue
  • AWS (Amazon Web Service)
  • Ruby

上記にあげたものが特に勢いや規模の大きさを感じる様に思えました。もちろん、自分が今勉強しているHTML5, CSS3分野も充実してはいたのですが、PHP関連はあまり無くWordPressについてはほとんど見付からなかった気がするので、トレンド(?)を知る良い機会にもなったと思いました。

で、自分は何の分野の書籍を買ったのかというと、1〜2サークルしか披露していなかった「Rust」関連の本を買いました。実際、書店でもまず見付からない言語ですので、どうせなら普段手にする事が難しい言語関連の方が良いかなと(汗)。
今の自分にはまだ不要かもしれませんが、休日にコツコツと買った本の勉強をしていきたいと思います。

『HTML5 & CSS3 ステップアップブック』によるCSS3 Grid Layout の勉強

9月20日(金)の日記です。

前回から『グーテンベルグ時代のWordPressノート テーマの作り方2(ランディングページ&ワンカラムサイト編)』のKindle本を読んだ結果、やはりCSS3におけるGrid Layoutは学んでおく必要があると感じましたので、急遽そのレイアウト作成に特化した書籍を見つけて勉強する事にしました。

そこで教材としたのが、エビスコム出版の『HTML5 & CSS3 ステップアップブック』です。

f:id:eewano:20190921074927j:plain

CSS3におけるFlex BoxとGrid Layoutを使って、Bootstrapに負けない程のレイアウト管理が出来るWebサイトを制作するというものです。

全4章から成り、現時点で3章まで終わりましたが、感想としては非常に便利かつBootstrapとは違ってCSS3の機能のみで構成されているので、余計なファイルが無い分動作が軽いという利点があります。
FlexBoxはすでにProgateで概要を学んでおりましたが、Grid Templateによるグリッドレイアウト管理については初めて知る内容であった為、「CSS3の機能だけでこれだけのレイアウト管理が出来るのか!」と、知る度にちょっとした驚きを味わえます。

しかし、CSSファイルでの書き方を理解するのに苦労しました。書籍で説明されていてもサッパリ分からず、ネットでもっと分かりやすい情報は無いかと探しましたが、ピンとくる内容も見つからず...。1時間程記述を変えたりしながら唸った結果、ようやく使い方を理解する事が出来ました。
特に理解に苦労したのが、

  • grid-template-columns: 1fr 1fr;
  • grid-template-rows: auto auto;

CSSファイルにて記述されるこれら2つのプロパティですね。
この2つを定義する事でページにおけるグリッドが敷かれるのですが、これだけではまだWebページに反映される事は無く、さらにここから配置したいブロックのクラス名の基準位置を設定する必要があります。上記を書いたうえでブロックのクラス名に対し、

  • grid-column-start: 1;
  • grid-row-start: 1;

この様に書いて各ブロックの左上を何処に設置するのかを決めるのです。...こんな事書いても初めて知る人にとっては全く意味不明な文章ですね。すみませんが、頭では分かっていても、現段階で上手く説明する事は不可能です(汗)。

何にせよ、ようやくCSS3のGrid Layoutの書き方を理解出来たので良かったです。この調子で進めていきます。下記は完成品です。FlexBoxとGrid Layoutにて構成されており、レスポンシブにも比較的容易に対応出来ます。

f:id:eewano:20190921075153p:plain