【jQuery】htmlページで複数の画像のスライド実装!【slick】

こんにちは!
今日はタイトル通り、複数ある画像をスライドさせて行く実装方法だよ!!^o^
今回はslickっていうプラグインを使うよ!

早速slickをダウンロードしよう!右上にある「get it now」のボタンからダウンロードできるよ!
http://kenwheeler.github.io/slick/

次にダウンロードしたフォルダを任意の場所に設置しよう!

やることはたったの3つ!!!
1、以下のコードを記述!
置いた場所によってパスを変えてね!

2、次にスライドさせる要素の作成!

3、最後に上の要素を動かす処理を記述!

たったこれだけでスライドさせることができるよ!
スライドさせるプラグインは他にもあるけど、slickが一番導入しやすかった!

slickには最後の要素を動かす処理内に色々記述することでもっといろんな事ができるみたいだから興味あったら調べてみてね!

ではまたー!^o^ノ

MVCって実際にどう実装するの!!! 〜codeigniterで学ぶMVCモデル〜

 
 
こんにちは 川マンです。

今日はMVCの説明ですが、MVCってなんぞやってのはググったら、歴史から現状までをめっちゃ丁寧に説明しているところが沢山あったので、実際にどこに何をどう処理させているのか具体的に説明しようと思います!

と、言いつつMVCを簡単に説明すると
プロジェクトのフォルダを以下の3つに分けてファイルを作っていこうね!ってことです!(ザックリ)
なんかMVCのそれぞれの色のイメージって紫緑オレンジなのなんでだろう。。。

M (model)
 データベースから値を取得する

V (view)
 値を表示したり、ページのデザインする

C (controller)
 データベース等から取得した値を計算したりviewに渡したりする

今回はcontrollerで計算した値をviewに送って表示させるということをやってみましょ!
まずはcodeigniterをダウンロード!

application/controllersでHello.phpを作成し下記のコードを記述!

Hello.php

application/viewでhello.phpを作成し下記のコードを記述!
hello.php

これでhttp://localhost/フォルダ名/index.php/helloにアクセスすると
Kawa_man
Hello!
と表示されます!

まとめ!
1、controllerには変数を用意したり変数をいじったりして結果をviewに渡す
2、viewは渡された値を表示させる

他にもMVCの派生でMVPとかMVVMとか色んな設計パターンがあったり。。

とりあえず今日のMVCの話はおしまい!
川マンでした!(^o^)

新アプリ!GHOST CRASHリリースしました!

以前のブログでチラっとちょい見せした新アプリがついにリリースしたよ!!

その名も

GHOST CRASH!!

ブロックを3つ揃えて消していく、ホラー系3マッチパズルゲームです!

世界ランキングにも対応しているよ!

ストーリーもちゃんとあるのだ!

そして今回はなんと!
わたくしtaeminのお友達である、歌手&声優の「かすみん」に、ゲームの主人公である女の子「ライ」ちゃんの声を当ててもらったぞ!
その美麗なボイスをプレイして是非ご堪能あれ^o^

GHOST CRASHのダウンロードはこちらから!!!
App Storeからダウンロード googleplayからダウンロード

 

 

*・゜゜・*:.。..。.:*・’*:.。. .。.:*・゜゜・**・゜゜・*:.。..。.:*・’*:.。. .。.:*・゜゜・*

オマケ
ボツになったライちゃん|ω;`)
ブログに乗っけて供養します|ω;`)

(本当は別の理由でボツになったわけだけど、営業さん曰く「ライちゃんはこんなに胸はない!!!」との事だったので。。。何にせよボツは回避できなかったのであった・・・|ω;`)ショボボ)

またね|ω;`)ノシ

Unityでアニメーション終了時にイベントを実行する

どうも!su-sanです

特定のアニメーションの後に関数を走らせたい時ってありますよね?

今回は簡単にアニメーションの後に関数を走らせる方法を紹介したいと思います。

アニメーションの中にはキーフレームとイベントがあって、キーフレームが視覚的な動きの部分、そしてイベントはアニメーションの中にその名の通りイベントを設定することができます。

Unityイベントボタン
アニメーションがアタッチされているオブジェクトに使いたい関数を書いたスクリプトをアタッチし
アニメーションが終わったあたりにイベントのアイコンを設置し、関数名を指定すると
Unityイベントボタン2
アニメーションが終わった後に関数を実行することができます!
以上 su-sanでしたー

指定したセレクタの箇所までスーッと自動でスクロールするナビゲーションの実装方法

指定したセレクタの箇所までスーッと自動でスクロールするナビゲーションの実装方法

こんにちわ。Webデザイナーのotarieです。

今回は1枚の縦長のサイトなどでナビゲーションのメニューをクリックした際にスーッと気持ちよく指定したセレクタの箇所まで移動してくれる動きの方法をご紹介したいと思います。

まずはメニューを作ります。

こんな感じ。

HTMLの<body>…</body>内にnavのコードを入れます。

この記述の際、大事なのは<!–nav–>直下の<li>の中に入れたメニューそれぞれに名前をつけて行きます。

<a href=”#story“>STORY</a></li> → ※「」を頭につけてね!

 

次に要素内にも指定して行きます。

ここで気をつけたいのが、要素に「id=”story”」という形で指定して行きますが、この指定された部分を先頭にして、その位置まで行ってくれます。なので、変な場所(要素の途中)で指定すると中途半端な部分に行っちゃうので、綺麗に要素をまとめて指定する事をオススメします。私は要素ごとに<section>で囲んでいます。

<section id=”story” class=”story”>

<section>内の「id=””」に指定します。「#」は入れず、大文字、小文字も<nav>で指定したものと同じにしてください。

 

次にjsファイルを作成します。

下記URLアドレスから「http://code.jquery.com/jquery-1.7.1.min.js」の上で右クリック「リンク先を別名で保存」を選択し、目当てのファイルをゲットします。

URL:https://blog.jquery.com/2011/11/21/jquery-1-7-1-released/

ゲットしたら、HTMLファイルの<head>…</head>内に下記コードを貼り付けます。

 

最後に<script>のコードを<head>…</head>内に指定します。

これで完了です!

せっかくのカッコいいサイト。メニューがバッと変わってしまうよりも、スーッと動きのあるスクロールで変わる方が気持ちいいですよね( ´ ▽ ` )

いかがでしたか?

また次回をお楽しみに〜