• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• バックアップ を表示
• 季卓芸/論文構成 へ行く。
  • 1 (2021-06-04 (金) 22:41:18)
  • 2 (2021-06-05 (土) 02:10:14)
  • 3 (2021-06-05 (土) 02:13:46)
  • 4 (2021-06-11 (金) 16:08:59)
  • 5 (2021-06-17 (木) 20:43:48)
  • 6 (2021-08-03 (火) 15:53:19)
  • 7 (2021-08-03 (火) 16:12:15)
  • 8 (2021-08-23 (月) 17:49:47)
  • 9 (2021-09-08 (水) 18:37:23)
  • 10 (2021-09-17 (金) 11:25:04)
  • 11 (2021-09-17 (金) 11:25:04)
  • 12 (2021-09-17 (金) 11:25:04)
  • 13 (2021-10-10 (日) 16:53:55)
  • 14 (2021-10-17 (日) 15:56:46)
  • 15 (2021-10-17 (日) 22:55:21)
  • 16 (2021-10-18 (月) 17:07:47)
  • 17 (2021-10-19 (火) 21:43:40)
  • 18 (2021-10-20 (水) 00:01:49)
  • 19 (2021-10-20 (水) 02:06:20)
  • 20 (2021-10-22 (金) 12:13:42)
  • 21 (2021-11-17 (水) 17:25:31)

#author("2021-07-30T15:12:53+09:00","default:art-gs","art-gs")
#setheadercolor(white,"linear-gradient(to top, #209cff 0%, #68e0cf 100%)",0.8)

#image(1.png,left,12%)
*Beijing Changyang Park　
北京長陽公園の日常を記録するフォトギャラリーサイト
-'''Keywords：季節,映像 , 風景,  人物,その他'''
-GitHub：https://github.com/ki0722?tab=repositories
~

***CONTENTS
#contents2_1
~
~
**概要
***研究の背景
北京長陽公園は、自宅の近くにある公園のひとつで、時々散歩に出かけます。
春、夏、秋、冬、四季の景色が美しい場所です。

フィットネスとエンターテイメント、落ち着いたムード、素晴らしい場所です。

長陽公園は、房山区長陽町にあります。北京で建設中の11万エーカーの新しい公園の1つです。最大の陸地、地理的な場所、最も完全な緑化樹種、および最も完全なインフラストラクチャを備えた公園です。庭園では、人工の風景と元の生態学的な風景が組み合わさって、カラフルな園芸植物のコミュニティを形成し、都市の森の風景を作り出し、市民がリラックス、レクリエーション、フィットネスするのに理想的な場所を提供します。この庭園は、2013年に北京庭園を受賞しました緑化局は市の「質の高い公園」として評価されました。共植：53550本の木、19920本の灌木、717952年生の花、105743 105芝生、668914㎡地被。
全体的な自然条件によれば、長陽公園は「2つの川と2つの庭園」の生態学的なウォーターフロントの景観を形成しています。

一部の情報はインターネットで確認できますが、公式のWebサイトは存在していないので、私がデザインしたいと考えました。
~

***目的・主旨
目指すサイトの特徴は以下のとおりです。
-誰もが容易に使えるインターフェイス
-クールな視覚効果
-“動感”が強いもの
~

***ターゲット
-北京への観光を検討中の日本人
-北京市民
~

***ハイライト
-闲庭信步
散歩 "闲庭信步"スポットには、松云台、浣溪叠、枫舞清韵、涵秋叠影などのスポットがあります。全体的なテーマは木です。中庭をのんびり歩くなど、ゆったりとくつろげる場所を提供します。

-寧夏の秋の風景
「寧夏の秋の風景」のレジャーとエンターテイメントの景勝地には、白州広場、観音流水遊歩道、サクラダンス、空飛ぶ森、子供たちの楽しい広場、フィットネストレイル、その他の景勝地があります。この部分は色とりどりの葉が多く、秋には晩秋に太陽が沈み、空は赤い雲でいっぱいで、赤いカエデの葉は空と共通です。

-春华秋实
「春华秋实」のシーンには、主に梨花の春の雪、ベゴニアフラワーストリーム、サクラダンスフライング、秀逸台、陳西広場などの景勝地があります。この地域は、「春に開花し、秋に果物を広げる」植物、したがって「春の花と秋の果物」が優勢です。
~
~
**サイトの仕様

***サイトマップ
#image(sitemap.jpg) 
~

***ワイヤーフレーム
#image(wire frame1.jpg) 
~

***携帯ワイヤーフレーム
#image(wire frame2.jpg) 
~



**研究方法（制作方法）

***制作方法（言語・技術）
//(多做一些动画网页小样，问卷调查，选出好的网页)
//(如何查阅CSS，JS，JQ内容)
研究開発に使用する言語は以下の_３つ_である。
-1) HTML:ページの構造
-2) CSS：ページのビジュアルデザイン
-3) JavaScript（jQuery）： ページの動的変更
インタラクティブな仕組みの実現には、主に JavaScript と、そのライブラリーである jQueryプラグインを使用する。具体的には、以下のような「動き」や「触感」を実現する手法を開発する。
~

-1) タッチ・クリックに反応して変化する「動的写真」の導入
-2) 写真集の「ページめくり」を進化させたWeb特有のトランジション
-3) ユーザーの動きに反応するパーティクル要素の導入
-4) インタラクティブに反応する「背景」要素の導入
-5) 電子媒体における「手触り感」の再現
~
~

***制作方法（技法）
-Photoshop：写真を調整
-Adobe Illustrator：logoのデザインを作成
-HTML:ページの構造
-CSS：ページのビジュアルデザイン
-JavaScript:ページの動的変更  
-jQuery:ページの動的変更  
-jQuery プラグイン:様々な表現機能
~

***制作環境
-ハードウエア
--iMac、Mac、Windows、デジタルカメラ
-ソフトウエア
--Atom Editor
--Adobe Photoshop
--Adobe Illustrator
--GitHub

~
~

**研究成果（制作物の現状）
4つのWebサイトをシリーズで制作しています。
~

***Type 1
-メニューの機能強化と天気予報のプラグインを追加しました。
//下部分で写真もメニューの機能です。
~

#iframe(https://ki0722.github.io/BeijingChangyangPark10/)
-https://ki0722.github.io/BeijingChangyangPark10/
~

//#iframe(https://ki0722.github.io/BeijingChangyangPark8/)
//-https://ki0722.github.io/BeijingChangyangPark8/
//~

***Type 2
-ホームページ：写真の spring、summer などの文字から それぞれのページへリンクしています。
-その他のページ：通常のメニュー動作です。
-ページの演出
--spring：チューリップ花
--summer：雨とハスの花
--autumn：葉
--winter：雪の花
~

#iframe(https://ki0722.github.io/BeijingChangyangPark4/)
-https://ki0722.github.io/BeijingChangyangPark4/
~
~

***Type 3
-インターフェイスに「ページめくり」のプラグインを追加しました。
~

#iframe(https://ki0722.github.io/BeijingChangyangPark9/)
-https://ki0722.github.io/BeijingChangyangPark9/
~
***Type4
"mouse更新"

#iframe( https://ki0722.github.io/BeijingChangyangPark11home/)
- https://ki0722.github.io/BeijingChangyangPark11home/
~

#iframe( https://ki0722.github.io/BeijingChangyangPark11summer/)
- https://ki0722.github.io/BeijingChangyangPark11summer/
~
~
**LOGO
#image(2.png)
~
**調査
"公園ホームページ作る理由（公園季節）"
#image(5.png)
~
"公園をウェブページにする必要がある理由/調査："
#image(6.png)
***アンケート
#settableborder(none)
|33|33|33|c
|#image(3.png)|#image(4.png)|
~
"結果"
#image(7.png)
~
~
~
**考察（まとめ）
~
~
**参考資料
~
***参考文献
1.Generative Design with P5.js
2.Webデザイン良質見本帳
3.すべての人に知っておいてほしいJavaScriptの基本原則
4.jQuery仕事の現場でサッと使える！デザイン教科書
5.Web前端开发入门与实战
6.计算机网络 自项下方法
7.深入理解计算机系统
~
~
***参考サイト｜技法
-http://babeltheking.com/eng
-http://mike-tucker.com/13/
-https://www.nike-react.com/
-https://run.mockplus.cn/bXjHi8XasvtPbcaA/index.html?to=C0D6B533-1BE3-E811-9D33-D4619D08F0A4
-https://monyssb.com/
-https://faits-marquants.inra.fr

***参考サイト｜公園
-http://www.hanakoen.com
-http://kanatakenosato.jp

-https://www.17sucai.com/pins/demo-show?id=37923　桜　春
-https://www.17sucai.com/pins/demo-show?id=7609　落葉　秋
-https://www.17sucai.com/pins/demo-show?id=27371　雪　冬
-https://www.17sucai.com/pins/demo-show?id=36013　雪　冬
-https://www.17sucai.com/pins/demo-show?id=8465　雪　冬
-https://www.17sucai.com/pins/tag/6584.html　全部

***参考サイト｜サイトデザイン
-https://www.ikesai.com/cat/travel/
-1
--https://nisekohakuunso.com/ja/
--https://hoshinoya.com    
--https://studio-has.jp

-2
--https://www.museum-kawakyu.jp  

-3
--http://robinmastromarino.com
~

***参考天気予報
-https://blog.csdn.net/qq_39019822/article/details/85248755
-https://www.tianqi.com/plugin/
~
***参考色CSS
-https://color.uisdc.com/
~
***ウェブサイト調査
-公園について：
JAPAN
--1.http://www.hanakoen.com/
--2.http://kanatakenosato.jp
--3.https://www.showakinen-koen.jp/
--4.https://hitachikaihin.jp/
--5.https://tsumugiweb.com/2020/06/01/minnanokouen-hp/
--6.https://www.shinrinkoen.jp/
--7.https://uminaka-park.jp/
--8.https://www.tokyo-park.or.jp/
--9.https://www.huistenbosch.co.jp/
CHINA
--10.http://www.capg.org.cn/
--11.http://www.bjjspark.com/index.jhtml
--12.https://www.beihaipark.com.cn/
--13.http://www.tiantanpark.com/
--14.
--15.

~
-動く、機能性について：
--1.https://www.17sucai.com/pins/demo-show?id=7609
~
***参考
--[[マウスのデザインです。>https://weekend.jp/aroma-diffuser/]]
--マウスhttps://design.kyusan-u.ac.jp/OpenSquareJP/?CSS/Tips
--https://www.museum-kawakyu.jp
--http://robinmastromarino.com/
"https://chordbook.com/guitar-scales/"
--https://design.kyusan-u.ac.jp/OpenSquareJP/?jQuery/ModalWindow
--https://design.kyusan-u.ac.jp/OpenSquareJP/?jQuery/Slider
--https://design.kyusan-u.ac.jp/OpenSquareJP/?jQuery/WebGL_Ripples
--https://www.museum-kawakyu.jp/
"button"
--https://jajaaan.co.jp/css/button/
-"mouse"
--https://wk-partners.co.jp/homepage/blog/hpseisaku/javascript/mouse-cursor-css-jquery/
--https://wemo.tech/3229
-"画像に簡単にアニメーションをつけるcurtain.js"
--https://www.curtainsjs.com/examples/simple-plane/index.html
https://github.com/martinlaxenaire/curtainsjs/blob/master/examples/simple-plane/js/simple.plane.setup.js
~
***curtain.js
-普通の画像がまるでカーテンのようにふりふりと風になびくアニメーションをつけたり、画像を水面に見立て、ブヨブヨとマウスカーソルに合わせて動いたり…。curtain.jsを使うと簡単に画像に対して様々な目新しいアニメーションをつけることができます。
-curtain.jsとは

curtain.jsは小さいvanilla WebGL JavaScriptのライブラリです。3Dのインタラクションやアニメーションを作ることができます。

HTMLの画像を含んだ要素を3DのWebGLテクスチャーplaneに変換し、shadersを使い、アニメーションを加えることができるようにしています。それぞれのplaneの大きさやpositionはCSSで変更することができるので、楽に配置変更サイズ変更をすることができます。