jQueryのパララックスのプラグイン「Nikebetterworld Parallax Effect」のサンプルデモデータを使って熊本旅行のパララックスサイトを作りました。

jQueryのパララックスのプラグインの定番の「Nikebetterworld Parallax Effect」のサンプルデモデータを使って熊本旅行のパララックスサイトを作りました。

熊本旅行2013のパララックス
http://www.vivo-one.biz/kumamoto_travel_parallax/ 

パララックス効果の指定の方法はとても簡単で、用意されている関数　parallax（）　にパラメーターを渡してあげるだけです。 下記の部分が該当の箇所です。

$('#nav').localScroll(800);

//.parallax(xPosition, speedFactor, outerHeight) options:
//xPosition - Horizontal position of the element
//inertia - speed to move relative to vertical scroll.
// Example: 0.1 is one tenth the speed of scrolling,
// 2 is twice the speed of scrolling
//outerHeight (true/false) - Whether or not jQuery should use 
// it's outerHeight option to determine 
// when a section is in the viewport

$('#intro').parallax("50%", 0.1);
$('#second').parallax("50%", 0.1);
$('.bg').parallax("50%", 0.4);
$('#third').parallax("50%", 0.3);
$('#fourth').parallax("50%", 0.1);
$('.bg2').parallax("50%", 0.4);

Nikebetterworld Parallax Effect
http://ianlunn.co.uk/articles/recreate-nikebetterworld-parallax/

ブラウザ上で架空のクライアントからの依頼プロジェクトを通じて、HTML, CSS, JavaScriptを学習できるサービス「Dash」を試してみました。

「Dash」は、General Assemblyが自社用のツールとして作成して、誰もが利用できる学習ツールとして一般公開されたものです。英語での説明ですが、ウェブ開発の基礎知識があれば、分かる内容の英語なので、ナビゲーションに従って、学習をすることが出来ます。

Dash
https://dash.generalassemb.ly/

General Assembly
https://generalassemb.ly/

学習画面は3つの要素で構成されていて、左上にスライドショーにて、架空のクライアントからの依頼（個人のウェブサイトを作ってください、とか、レスポンシブ対応のブログのテーマを作ってください）の表示と、作成するべきソースの内容が説明されます。指示のあったソースを、左下のエディタエリアに記述すると、右側のプレビューエリアに表示されます。右側のプレビューエリアでは、PCでの表示と、スマホでの表示を切り替えることが出来ます。途中のチェックポイントの課題をクリアしないと、次のスライドに行けない仕組みになっています。

学習の操作画面

プレビュー画面は、スマホでのプレビューも表示できます

コードを記載するエリア

学習したスキルを確認するエリア

架空のクライアントからの依頼内容を作成するというスタイルをとります

架空の依頼ではあれ、クライアントからのサイト制作の依頼を、実際に作る過程を細かに説明、自分でソースを書いて、プレビューしていくという仕組みは、とても分かりやすいと思います。

「Booom」というjQueryプラグインを使って集中線を画像に追加してみました。

集中線を画像に追加できる「Booom」というjQueryプラグインがあります。画像を用意するだけで、簡単に「漫画カメラ」で撮影したような集中線を書き込むことが出来ます。

集中線を追加するjQueryプラグイン「Booom」がバージョンアップ
http://stackstock.net/archives/2252/

いくつかの写真に集中線を入れてみました。

「Booom」を使って集中線を画像に追加
http://www.vivo-win.com/booom/

集中線の中心をパラメータで指定できるようなので、画像の真ん中を外れた位置に集中したいものがあっても、使えるようです。 

arbor.js | インタラクティブにグラフィカルなグラフ操作が行えるjQueryを使ったライブラリ

arbor.jsというjQueryを使ったライブラリがあります。

arbor.js　Arbor is a graph visualization library
http://arborjs.org/

 

 

データの構造、関連性を理解するのに、こういった表現があれば、分かりやすいと思います。要素を移動させることにより、関連のある要素も一緒に引っ張られて動くので、関連性が強調されて意識されます。

デモの中でも、halfvizというデモが面白いです。

arbor.js » halfviz

http://arborjs.org/halfviz/

右のコードエリアに、NodesやEdgesの情報を、指定の記法で記述をすれば、すぐにインタラクティブに画面に反映されます。記法については、コードエリアの上にある「syntax reference」を見れば分かります。

構造が複雑な内容を表現する時に使えそうなライブラリです。

YouTubeの動画をウェブページの背景に表示する「tubular」という、jQuery Pluginを使ってみました。

YouTubeの動画が背景に表示されるページの出来る「tubular」という、jQuery Pluginがあります。

tubular
http://www.seanmccambridge.com/tubular/

YouTubeにアップしていた「とっとり花回廊バードフライトショーの鷹の飛ぶ様子」という動画をつかってサンプルファイルを作成してみました。

とっとり花回廊バードフライトショーの鷹の飛ぶ様子
http://www.vivo-win.com/jQuery_tubular/

動画の再生、一時停止、音量の制御も出来ます。

このページで表示している動画は、スマホで撮影した動画なので、画質は荒いです。一眼レフカメラで撮影した動画であれば、きめの細かい画質の動画を背景に出来るので、綺麗に見えると思います。

GoogleのJavaScriptフレームワーク「Closure Library（クロージャ ライブラリ）」を使ってみました。

JavaScriptフレームワークといえば、jQuery、Prototype、MochiKitなどをちょっと使ったことがあるだけでした。DajngoやGAEで使うのであれば、MochiKitがいいのかなと思っていましたが、Google製であるClosure Libraryはどうなんだろうと思い使ってみました。

Closure Libraryのソースは、公式サイトに従い、Subversionでチェックアウトをして用意をします。

Getting Started with the Closure Library
http://code.google.com/intl/ja/closure/library/docs/gettingstarted.html

svn checkout http://closure-library.googlecode.com/svn/trunk/ closure-library

あとは、チュートリアルに従い、hello.jsとhello.htmlを用意して、指定の階層に置けば、「Hello world!」が表示されます。

必要なファイルを配置したところ

Hello world! を表示

Closure Libraryの機能を簡単に試せるサイト作られている方がいました。ブラウザ内の操作だけで、色々な機能を確認できます。とても便利です。

Closure Library が使える Web ベースの IDE「Closure Kitchen」を作りました！
http://closure-kitchen.appspot.com/

「Syntax Highlighter」の使い方

サイト上で、ソースコードを分かりやすく表示しているのを見て、同じようにやってみたくて調べてみました。

「Syntax Highliter」というものを使えばよいそうです。このBloggerでは、ウィジェットになっている「Blogger Syntax Highlighter」を使えば簡単に出来そうです。

『コードをハイライトする「Blogger Syntax Highlighter」ウィジェット』　の記載を参考にやってみました。

すぐに反映できました。簡単、すごい！
参考のソースとして、先日投稿した　「GAEを使ってのメール送信を試してみました」　のインデントの不具合を修正したものを掲載してみます。

#!/usr/bin/env python
# encoding: utf-8

import os
import logging
import wsgiref.handlers

from google.appengine.ext import webapp
from google.appengine.ext.webapp import template
from google.appengine.api import mail, users

class MainPage(webapp.RequestHandler):
    def get(self):
        user = users.get_current_user()
        if not user:
            self.redirect(users.create_login_url("/"))
        else:
            # メール送信
            nickname = user.nickname()
            mailAddr = user.email()
            logging.debug("%s<%s>にメールします", nickname, mailAddr)

            mail.send_mail(sender="hogehoge@gmail.com",
            to="%s<%s>" % (nickname, mailAddr),
            subject="こんにちは!%sさん" % nickname,
            body="""
            拝啓、%sさん
            お世話になっております。builderです。
            そしてさようなら。
            """ % nickname)
            # 画面表示
            path = os.path.join(os.path.dirname(__file__), 'response.html')
            self.response.out.write(
            template.render(path, {'username':user.nickname()}))

def main():
    application = webapp.WSGIApplication([('/', MainPage)],
                   debug=True)
    wsgiref.handlers.CGIHandler().run(application)

if __name__ == "__main__":
  main() 

---

Googleの検索キャッシュに、このページが「PYSSLA 使い方」で残っているようなので、その記事へのリンクを張っておきます。

IKEA神戸で買った「PYSSLA ビーズ」でピカチューを作ってみました。
http://vivo-design.blogspot.com/2010/10/ikeapyssla.html