webサイト制作の勉強|2023年11月クラス用ブログ

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。フェリカテクニカルアカデミーは池袋にある求職者支援訓練の学校です。

「all-in-one-wp-migration」プラグインを使ったwordpressのデプロイ

プラグインを使ってデプロイさせます。デプロイとは「実行ファイルを実際のWebサーバー上に配置して、利用できる状態にすること」を指します。


ja.wordpress.org


このプラグインは検索 & 置換操作中に発生する、あらゆるシリアライゼーションの問題も解決します。
とても簡単にデプロイ出来てしまうので、本当におすすめです。

最新版は小規模なシングルサイトであれば無料で問題なく利用できますが、最大アップロードサイズが「512MB」を超える場合、容量制限を増やす有料エクステンション(拡張機能)があります。

wordpressのデプロイ作業

ステップ1
本サーバー(スターサーバー)に新しいwordpressを作る。

ステップ2
開発サーバー(xampp)と本サーバーの両方に上記の「all-in-one-wp-migration」プラグインをインストールする。

ステップ3
開発サーバーのwordpressのデータをエクスポート。
「エクスポート先」と書かれた箇所をクリックして内容を展開し、「ファイル」を選択。

しばらく待ち時間が発生しますが、その後、「DOWNLOAD XXX.COM」といった感じのボタンがぼよぉ〜んとアニメーション付きで表示されるので、クリックしてファイルをエクスポートします。


ステップ4
ステップ3でエクスポートしたファイルを本サーバーにインポートします。ダッシュボード → All-in-One WP Migration → インポート画面を開き、エクスポートしたファイルをドラッグ&ドロップでアップロードするかファイル選択でアップロードしてインポートします。
その後、「PROCEED >」ボタンをクリックすることでファイルの内容が反映され、ログイン画面に戻され流ので、再度ログインして表示を確認しましょう。




www.vektor-inc.co.jp

[https://drive.google.com/file/d/19Nu0oLahhAaETsH_OPp8jFDFuvgCxFZ6/view]

All-in-One WP Migrationのアップロード(インポート)上限を上げる方法

wordpressは1つのファイルのアップロード上限を厳しく制限しているので場合によってはAll-in-One WP Migrationのファイルが上限に引っかかってしまう恐れがあります。そう言った場合はwordpressのフォルダ直下にある「.htaccess」にコードを追加する必要があります。

php_value upload_max_filesize 128M
php_value post_max_size 128M
php_value memory_limit 256M
php_value max_execution_time 300
php_value max_input_time 300

モックアップの完全版 Facebook+Devices


www.anthonyboyd.graphics


https://photoshopvip.net/freebies/mockupphotoshopvip.net


www.youtube.com


Facebookが、誰でも無料で利用可能なAppleSamsungGoogle・HTC・Microsoftの各メーカーのスマートフォンタブレット・スマートウォッチ・スマートTVのモックアップとして使えるビットマップ画像集を公開しています。ファイル形式はPNGとSketchとなっています。これ一つでほとんどのデバイスを網羅出来ています。


もちろん必要なデバイスだけを選らんでダウンロードすることも可能です。




design.facebook.com

フリー素材集

Canvasでパーティクルを表現する

Canvasとは

Canvasとは、ブラウザ上に図を描くために策定された仕様です。

これまでHTML上で図を表現するためには、GIFやJPEGといったフォーマットの画像を用意する必要がありました。また、条件に応じて表示する図を変化させたり、アニメーションを実現するために、FlashJavaアプレットが使われてきました。

Canvasは、FlashJavaのようにプラグインを使わずに、JavaScriptベースで図を描くことができます。
Canvasは、もともとはAppleが発祥で、当初、Mac OSでおなじみのDashboardで使われた技術仕様です。その後、AppleMozilla FoundationOpera Softwareといったブラウザベンダが立ち上げたWHATWGという団体にて策定作業が行われていた「Web Applications」と呼ばれる規格に採用されました。

パーティクル

パーティクル(particle)とは小片、粒子を意味しますが、パーティクルを動かすエフェクトを使ってページを華やかにします。

recruit.lifeones.jp



y-n10.com





github.com



vincentgarreau.com


今回はparticles.jsをCDNを使って実装してみます。

https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js




See the Pen
Particle & Mouse stalker
by yachin29 (@yachin29)
on CodePen.






webdesignfacts.net



www.webopixel.net




stitch.co.jp




blog.8bit.co.jp





note.com



ics.media


coco-factory.jp

ポートフォリオの制作

  1. ポートフォリオ制作でまず自身が把握する事は中に入れるコンテンツの分量です。今までの授業で作ったデータをもう一度見直し、手直しする物は手直して、ポートフォリに掲載する物を決めましょう。
  2. 次にwebのポートフォリオを何で作るかを決めましょう。選択肢としては、htmlとcssで制作するか、wordpressを使って作るか、またテンプレートを上手く使う事も視野に入れておきましょう。
  3. ポートフォリオ自体の仕様が決まってきたら、次に中に入れるコンテンツの見せ方を考えてみましょう。もちろん色々な見せ方がありますが、授業でやった「作品のサムネイル」→「作品の詳細ページ」→「自身で制作した作品」という順に見せていく方法は有効な方法の1つです。また、ディレクター志望の場合、photoshopillustratorだけで無く、パワーポイントやエクセルといったoffice系のソフトを使ってポートフォリオを作っても良いと思います。
  4. 次にポートフォリオ全体のデザインイメージとファーストビューのデザインを決めていきましょう。既存のサイトなどを参考にツカミのあるファーストビューを作ってみましょう。また面接等で「なぜこのファーストビューにしたのか?」と質問された時に答えられるように答えを準備しておきましょう。


felica-web.hatenablog.jp






tomoyukiarasuna.com



tomoyukiarasuna.com



webdesigner-go.com


www.creativevillage.ne.jp



ポートフォリオのフォーマット

ポートフォリオを作るに当たって、Bootstrapなどのフレームワークを使用する事も視野に入れておきましょう。
それぞれのメリット・デメリットを理解し、自身にとって最も有効だと思う物を選択する事が大事です。


bootstrapのテンプレート

templatemag.com

templatemag.com



HTML5&CSS3ベースのテンプレート

photoshopvip.net


photoshopvip.net


stories.freepik.com