- ブログメニュー
- 4月の活動記録
ブログ
Animate放送部は、アニメを愛する人を応援する番組です。
Animaten放送部では、ロゴの制作を行っています。今回のロゴは、Animatenで制作したカーソルが移動する度にアウトラインから色塗り、メタルな質感に変わるってロゴになるムービーです。
Animaten放送部では、ロゴの制作を行っています。今回のロゴは、Animatenで制作した四方からペンキが集まってロゴになるムービーになります。
一ヶ月って早いですね。サイトの雛形もある程度完成できたので、アニメーション作業に力を注義体と思います。
みなさんこんにちは、 本日は、WEBデザイナー初心者の方へハンバーガーメニューのつくりかたをご紹介いたします。ハンバーガーメニューは、様々なサイトに設置されているボタンをクリックすることで隠れているメニューを表示させる非常にポピュラーなメニューになります。YOUTUBEの左上にも設置されています。 準備していただくものは、HTMLファイルが1つ、CSSファイルが1つ、JSファイルが1つ、最後にjQueryライブラリをご準備ください。jQueryライブラリはなるべく最新バージョンを公式サイトからダウンロードしてご利用ください。 ご準備いただけたら、htmlファイルの編集から始めます。 作成するものは、3つ、メニューの開閉するためのボタン、open_btn、メニューを格納するg-nav、リンクを格納する、g-nav-listを作成してください。 次に、CSSファイルには、初期状態のopen_btn と g-nav そして、アクティブ状態のopen_btn と g-nav を作成いたします。 最後に、JSファイルを編集します。 メニューが開いている状態と閉じている時の状態に対応する機能を設定します。 メニューを開くために、open_btnをクリックしたら、open_btnとg-navをアクティブ状態にする。 open_btnは閉じるボタンに切り替わり、g-navの右端が、画面の右端に移動することで、g-navメニューが表示されます。 閉じるボタンをクリックするか、メニューのリンクをクリックすることで、メニューを初期状態に戻します。 CSSのメニューを変更することで、メニューの表示方法にアレンジを加えることができますのでぜひ、挑戦してみてください。 それでは、またお会いいたしましょう。
5月リニューアルに向けて、ハンバーガーメニューを改めて修正しました。これで、スライドショー、タブメニュー、掲示板。その他もろもろサイト運用する上で最低限必要な機能が完成いたしました。 ここからは、Animateを普及するためのアニメーションを作成したいと思います。正直何度も挫折してきたが、今度こそ成功させたいと思う。
PHPで作るひとこと掲示板完成いたしました。サーバーサイドプログラムはエラーを出すとサーバーを停止させてしまう可能性があり、場合によってはレンタルサーバーでPHPが利用できなくなってしまうとおもい非常に慎重に体硫黄させていただきました。なんとか完成できてよかったです。まだまだ参考書を参考に作成しましたので、今後はセキュリティに考慮してもっと活用していきたいと思います。
一度入力した情報を削除できるようになりました。
データベースに保存された情報を編集できるようになった。
テキストエリアに入力された情報をデータベースに保存できるようになった。掲示板を作れるようになるまであと少し
WEBサイトを作っても、アクセスされることがない。それは、なぜか?サイトのテーマが間違っている、記事に魅力がない?私ができることは何か? 今回、このサイトを作るにあたり、いくつか得た知識がある。それはWEBサイトの作り方、サイト上で動くスライドショーやハンバーガーメニューなどの機能の作り方。会員向けではあるが、SEOを意識した記事の書き方のテンプレートなどを作成している。これは、決して不要なものではないと思うので、これらの作り方をわかりやすく講座にまとめることができれば、興味を持つ読者はいるはずだ。
複数のソフトを連携させてキャラクターデザインをする場合、ビットマップ形式で作るかベクター形式か選ぶ必要があるのだが、今回は拡大しても劣化しないベクター形式で作るためillustratorで素材を作ることにする。あとあと、各素材を動かすことからそれぞれのパーツをレイヤー分けして作る必要がある。最低限のレイヤー分けは以下のようにする
| 名称 | パーツ |
|---|---|
| あたま | 肌ー髪ー表情 |
| からだ | 胸ー腰ー股間 |
| 右 うで | 上腕ー前腕ー手首 |
| 左 うで | 上腕ー前腕ー手首 |
| 右 あし | ももーふくらはぎーあし首 |
| 左 あし | ももーふくらはぎーあし首 |
物語を進めるために、背景が必要である。普通や一般的といった会社など存在しない。それぞれの会社に、それぞれの部署にはそれぞれの問題があるものである。
- 物語の舞台は?
- ケーブルテレビ会社
- 業務内容は?
- 契約の変更手続き、修理手配、広告の作成
- どう関係してくる?
- 特撮やアニメなど様々なチャンネルを流用できる
シナリオを少し考えてみた。 魅力的な作品には、とびっきり憎たらしく、主人公を追い込み、最終的に凄惨な悲劇を迎える敵が必要である。 視聴者が感情移入をしやすくわかりやすく憎しみを向けられるような、簡単に言えばクソ野郎に仕立て上げる必要がある。
| 名前 | 役職 | 所業 | 末路 |
|---|---|---|---|
| 海原(うみはら) | 局長 | 問題があることを知っていながら放置 | 監督不行届で左遷 |
| 仙羽(せんば) | 事務 | 新人育成の立場を利用して過剰な業務を新人に押しつけ自分は定時退社する | 教育担当を外され、平社員へ降格。実力がないことが露呈し新人以下の扱いを受ける。 |
| 宇座頭(うざとう) | 外回り営業 | 外出予定を水増しして請求 | 賭博にはまり、多額の借金をつくり蒸発 |
| 外間(そとま) | 営業事務 | 就業中、居眠りばかりして仕事を押し付けてくる。単純に仕事ができない。 | クレーム処理係になり、暴言の嵐に晒され続ける |
画像が溜まって管理が難しくなってきたので、フィルター機能を追加して画像を抽出できるようにしました。
簡易的なギャラリー機能を追加いたしました。今後の展望として、フィルタリング機能で画像一覧から条件によって抽出して一覧から選択表示できるようにしたいと思います。
フィルタリング機能と掲示板を追加できれば、ようやく当サイトの主目的である動画作成に取り組めるようになります。
動画の講座内容は、スライドショーの作り方、タブメニューの作り方、ギャラリーの作り方、ハンバーガーメニューの作り方。
講座の導入は、AnimateのAS3に心血を注いでいたエンジニア:ぬえさぶろう、Flashの失墜により意欲をなくし、あっという間に窓際社員と成り果て、倉庫番として備品管理に明け暮れる毎日。不平不満を腹に溜め込むうちに彼の姿は周りも自身も気づかぬうちに異形なものに変貌していった。そんな時、ぬえさぶろうはひょんなことから、新入社員:神田 多生と出会う。
ぬえさぶろうは。趣味で誰にも見向きもされないYOUTUBEチャンネルを開設し、どこにも需要のない動画を投稿し続けていた、だが閲覧数が一向に伸びることがないことに悩んだぬえさぶろうは、足りない女っ気を補うため、神田にアシスタントをしてもらうよう依頼する。一方その頃、神田は、部署内の派閥争いに巻き込まれ新人いびりの対象になりつつあった。ぬえさぶろうは、社内・社外のコネクションを駆使して、神田をアシスタントにすべく動き出す。
私は参考書と睨めっこしながら勉強するのが苦手なので、YOUTUBEで視聴できる講座を見て情報を集め、必要に応じて参考書で学習するというスタイルをとることにしました。学校の授業のように延々と講義をするものもあ理ますが、自由に独自の世界観を構築して説明してくれる動画もあって、勉強しているというよりは楽しみながら視聴し続けているうちに知識を吸収できるといった感じです。今まで、敷居が高かったのですが、ある程度知識もついてきましたので、今度は動画制作をしてみたいという気になってきたので、実践してみようと思います。
- キャラクター
- 異世界転生者のサポートをする天の声を担当しているオペレーターのSV
- 世界観
- 剣と魔法の世界へ定期的に転生者が送られている異世界。転生者には、異世界生活をサポートするため、24時間監視し必要に応じてメッセージを送るオペレーターチームが割り振られる。ぬえさぶろうはオペレーターを統括する会社で働くサラリーマン。
- クレーム処理
- 新人オペレーターがマニュアルに違反してトラブルを起こした場合、程度にって現地へ訪問し謝罪をしなければならない。
- カスタマーハラスメント撲滅
- ”お客様は神様だろ”というセリフを聞くとぬえさぶろうの権限で恐ろしい目に合わせる
5月にサイトをリニューアルいたします。今更ながらサイトの方針がずれてきていることに気がついたので、方向転換も含めて方針を洗い出すこととする。
- 画像を全画面表示で閲覧できる機能をつくる
- 掲示板機能を作りユーザーからの声を聞ける仕組みをつくる
- 講座制作
-
- illustratorで素材作成
- Animateで目ぱち、口パク
- YOUTUBEに動画投稿
| 属性 | 説明 | 指定する値 |
|---|---|---|
| src | 動画ファイルのパス | URL |
| poster | 動画が再生できないときに表示する静止画 | URL |
| width | 動画の幅 | 数値 |
| height | 動画の高さ | 数値 |
| autoplay | 自動で再生する | なし |
| controls | 再生コントローラーを表示する | なし |
| loop | 動画をループ再生する | なし |
| muted | 消音する | なし |
| playsinline | ページ内で再生する | なし |
jQueryを使ったスライドショーの作り方を習得。ユーザーが操作をしなければ、7500ミリ秒ごとに画像を入れ替え、左右のボタンでクリックすることで画像を入れ替え、中央のインジケーターで指定の画像を閲覧できるようになりました。これで表現の幅がぐんと広がりました。
WEBサイトに必須の"スライドショー"。一定時間が経過すると画像を切り替えるだけの簡単なものからボタンやインジケーターなど様々な機能を追加してインタラクティブな操作ができるようにつくろうと思います。 4月になり、親戚が集まり先祖の墓参りをしようと言う話になったらしいです。ただ、問題なのは、一部の親戚が思いつきで行動した結果、当日、突然”現地集合せよ”とご連絡。さすがに私たち家族もそれぞれ仕事や予定があるので、今回は見送ることとしました。親戚と言っても70過ぎの高齢者なので、予定と言う概念がなくなって久しいのかもしれませんが、こちらにも都合があると想像できないものなのでしょうか? 私は、ゆる〜く無神論者とのたまっている種類の人間なので、墓参りなる行事はどうでも良いと考える立場なのですが、親類縁者としては、お互いの近況の報告などが目的なのでしょうが、正味な話、親族なる繋がりが鬱陶しくて仕方がないです。核家族化が進み家制度そのものが崩壊しつつある昨今、ほとんどサラリーマン世帯となり、相続できるものもほとんどが自宅の家屋と土地とわずかな現金。そんなもののためだけに、親戚付き合いを続けるなど煩わしいと思います。 そもそも、黒い石の下に誰が眠っているのか誰も知られなくなった地点で墓所などは放棄すべきではないでしょうか。 ところで、実家の近くに家族葬の葬儀場ができることになったそうです。私などは、実家に寄り付かず日々忙しく過ごしているのですが、火葬場ではなく葬儀場・・・。詳しくはわかりませんが、毎日お経が聞こえてくるとか、四六時中線香の匂いが立ち込めるとか、オカルト的な嫌がらせを受けることがないのであれば、人様の土地に何が建とうが我関せずを決め込むつもりでしたが、そのことに激昂してしまったご近所さんがいらっしゃるのです。その方は基本的には良い人なのですが、まあ、いわゆる、周りの迷惑を考えられない人という人です。日がな一日ご近所さんを捕まえちゃ、でっかい声で内容のうっすい世間話。植木鉢は自分たちの土地ギリギリまでびっしり並べて悦に行っている。そういう種類の人間なのですが、自分たちのテリトリーに不快なものが入ることが許せないらしく、建設反対運動を起こそうとご近所に触れ回っておりました。さてさて、どうなることやら・・・。
職業訓練でWEBデザインの勉強したときの話なのですが、illustratorのベジェ曲線の講義が、ぐちゃっとして今一つだったんですが、多分、講師の方がイラストを描かない方だからあまり使ったことがなかったんじゃないかと思います。illustratorに限らずですけど、adobeソフトには使い方を感覚的に理解しないと使えない機能が多々あると思います。今回のまとめとして、ベジェ曲線で線画を描く場合は、”直線と直線”、”曲線と曲線”、”直線と曲線”,"曲線と曲線"の4つに気をつければ、怖くないということ。そして、最も重要なことは、方向線の修正を慎重にしすぎないこと。これは、イラストを描く時にも言えることなんですが、方向線を気にし出すと延々と修正作業に入っちゃうんですよね。気がついたらきれいな円を描くために1時間かかっていたなんてことも多々あります。正円を描くのであれば、楕円ツールで良いのですよ。正確ですし・・・。 でも、線画ができるようになったら、夢が膨らみますね。VTUBERとかキャラクターデザインを作って動画で作成講座を作ったり、コント動画を投稿できるようになりたいですね。
2024年も4月になりましたのね。昼夜逆転して生活している私は、昨今の光熱費高騰を受け、毎晩手がかじかんできても、暖房をつけられず、毛布を重ね着して制作に臨んでおりましたが、ようやっと暖かくなってきて、ほっと胸を撫で下ろした気分となっております。みなさまはいかがお過ごしですか?不思議なもので、記事というものはパソコンに向かって”いざ書こう”と思っても頭の中が真っ白になって描き続けられないものです。 なので、記事を書くためのテンプレートを作って文字数をカウントする仕組みをJavaScriptで作ることにしました。 私は通勤の途中や風呂に入っているときなどにフッと記事が降りてくるのですが、そんな時に限ってメモが取れないことが多々あってせっかくのネタを逃してしまうことがあります。そうかと思えばダラダラと長文を羅列して中身のない記事を書き続けているなんてこともよくあります。 そんなところから、4月から始まるアニメに期待が高まってます。私もアラフォーになりましたので、異世界転生とか不良高校生の恋愛模様なんてお腹いっぱいで受け付けないんですが、そんな中、今季は”狼と香辛料”がスタートします。狼と香辛料という作品にはちょっと思い入れがありまして、当時就職活動に失敗した私は派遣社員として腐り切って働いていました。そんな私の唯一の救いは狼と香辛料のラジオ番組に投稿すること。必ずしも投稿した記事が読まれるわけではありませんでしたが、それでも、記事が取り上げられた時はこんな自分でもできることがある。社会に認められたと勝手に舞い上がって夢中になったものです。記事を書く材料が欲しくてそれまで、同僚と必要以上の雑談すら満足にできない私でしたが、同僚と少しずつ雑談ができるようになりました。今季もまた推しが増えそうで期待に胸を膨らませています。
プロフィール
| 名前 | ぬえさぶろう |
|---|---|
| 仕事 | PCの修理受付・取扱説明書作成 |
| 好物 | 大豆食品 |
| スキル | jQuery |
目次
- 【PHP】ひとこと掲示板完成いたしました
- 【PHP】削除できるようになりました
- 【PHP】編集できるようになりました
- 【PHP】保存できるようになりました
- 【PHP】データベースに情報を保存し掲示板を作りたい
- キャラクターデザインレイヤー分け
- 舞台を考えよう
- 敵役を考えよう
- 【jQuery】フィルター機能を追加
- 簡易ギャラリー機能を追加、さらにその先へ
- 画像を拡大表示するギャラリー機能を追加
- 5月にサイトリニューアルをするため目的をまとめる
- 動画を作ったのでWEBサイトで表示方法を調べてみた
- 【jQuery】スライドショーの機能説明
- 【jQuery】ゼロから始めるスライドショーの作り方
- ペンツールを使って線画を描く方法をまとめてみた
- JavaScriptで文字数をカウントする方法を考える
