2013-01-01から1年間の記事一覧

はてなダイアリーへのSyntaxHilighter適用に挫折

ソースコードの掲載時に行番号出るの、いいな♪ 出したいな♪ とスタイルシートとフッターをいじって挑戦してみましたが、だめだった・・。

jQuery mobileで作成したスマートフォンサイトのお問合せフォームを動かす

ASCII 「西畑一馬のjQuery Mobileデザイン入門」に沿ってスマートフォンサイトのデザインを作成 「お問合せ」ページからPHPで作成したチェック画面、サンキュー画面へ遷移させます。 サンキュー画面ではレンタルサーバーのデータベースに入力データ格納、入…

Facebookの「いいね」 ボタンの設置

Facebookいいねボタン Facebookの「いいね」誘導用には「いいね」ボックスと「いいね」ボタンがあります。 ボックスは大きい、ボタンは小さい。大きいのは気恥ずかしいな・・ボタンにしよう。はてなダイアリーにいいねボタンを設置するのはややこしいそうな…

jQuery mobileを使ってスマートフォンサイトを作成

スマートフォンサイト動作テスト用ブラウザ「Safari」 Windows safariで検索してインストールする 設定で開発メニューが表示されるよう設定する iphone、iPadなどタブレット、スマートフォンなどの各種ユーザーエージェントに対応している jQuery mobileでの…

企業系サイト「ビズイン(NivoSlider版)」制作

ポイント ビルボード画像の表示にNivoSlliderを使う Nivosliderのjs、画像、CSS、htmlのファイル構造を保ったままカズタマイズする (ファイル構造を保つために、NivoSliderのディレクトリの中に、BIZINのファイルをマージする形にしました。) 修正、カスタ…

企業系サイト「ビズイン」制作

ポイント yuga.jsを使い、ナビゲーションのロールオーバー smoothscroll.jsを使い、ページ上部へ戻る機能をゆっくり動作させる 来訪するたびに違うビルボード画像を見せる(4種類) tableを使わずに横並び(ulまたはdlで) アップしたサイトはこちら 「企業活…

WordPressのカスタマイズ

WordPressレッスンブックの通りにサンプルページを作成 トップページを作成 ヘッダーを表示 スタイルシートでデザインを表示 記事のタイトルと本文を表示 記事のデザインを表示 記事の投稿日時とカテゴリーを表示 画像を使ってデザイン トップページの記事を…

Webmastertoolを使って検索エンジンに登録し、検索エンジンを呼び込む

Webmastertoolに自分のサイトを登録します WebmastertoolはGoogleのサービスです。 Webmastertoolの画面上でURLを入力して「サイトを追加」をクリックします サイトマップがありませんと表示されますので、サイトマップを作って送信しましょう。 無償ツール…

html5でグリッドレイアウト

140×140、300×300、140×300、300×140の画像だけでレイアウトを作る練習をしました。 完成形 html5形式で作ります。 作成のコツ まず、pタグを使ってすべての画像を並べます。 html5ではpタグの代わりにを使うので、に打ち替えます。 html5ではdivタグの代わ…

Google Maps APIを活用、Google地図を緯度経度指定からWEBページに埋め込みする

地図の中心となる緯度経度を指定し、地図の拡大レベルを指定します。 緯度経度情報は下記のサイトで取得することができます。 座標として提示される35.710208, 139.812734という数字が緯度経度情報です。 Geocoding 池袋駅を中心とした地図を取得してみます…

位置情報を取得するプログラム(iPhone用)

iPhoneが持っているGPS機能を活用して位置情報を取得するプログラムです。 html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <title>iPhone位置情報取得</title> <script> //正常に緯度経度情報が取得できた時に呼ばれる関数 function successFunc(e){ var gps = document.getElementById("…</meta></meta></head></html>

任意の2地点を入力してもらい、ルート検索する

html <html lang="ja"> <head> <meta charset="UTF-8"> <title>Google Mapsルート検索</title> <style> #map_canvas{ width:700px; height:500px; } #container{ width:700px; margin:auto; } </style> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script src="mapdrow.js"></meta></head></html>

A地点からB地点までのルートマップを表示する(詳細・運転モード編)

東京駅から埼玉県の長瀞駅まで車を運転して行くルートマップを表示します。 APIの指定項目を詳細に指定するだけで、きめ細かいドライブルートの指示が得られます。 こんな情報が自動的に出てくるなんてすごいですね。 html <html lang="ja"> <head> <meta charset="UTF-8"> <title>ルート検索マップGoogle Maps </title></meta></head></html>…

Google Maps APIを使ってA地点からB地点までのルートを表示する

池袋駅からフェリカまでのルートマップを表示します。 html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <title>ルートマップ</title> <style> html, body { margin:0; padding:0; } div#map_canvas { width:330px; height:370px; }…</meta></meta></head></html>

GPS機能とTwitterを連携させて指定エリア周辺のつぶやきを表示する

TwitterのSearch APIを利用して「池袋駅から半径3km」のつぶやきを自動で連続取得・表示します。 用意するファイル index.html style.css js/modernizr.js js/geo.js ファイルの内容 index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <title>GPS機能とTwitterの連携</title> </meta></meta></head></html>

はてなの記事をTwitterに自動投稿

Twitterとはてなのアプリ連携で実現 はてなダイアリー管理画面の設定から外部サービス連携を選択 Twitter連携設定で自分のTwitterアカウントを入力して有効にします Twitter側で見てみると自分のツイートにはてなの記事が表示されました。 参考はてな記事公…

外部ブログの情報をRSSで取得し、ブラウザに表示する

RSS配信用のxmlファイルを設置しているブログの情報は自動取得して表示することができます。 自動取得できるかどうかの見分け方 このオレンジのアイコンが出ていれば可能 (これはChromeでRSSワンタッチ登録拡張機能をインストールしている場合に表示されま…

Google APIを活用してQRコードの生成

Google APIを活用します。 Google Developersのグラフ作成用API「Google Chart Tools」の中にあるInfographicsにQRコード作成機能があります。 入力フォーム qrcode.html <html> <head> <meta charset="UTF-8"> <title>QRコード入力画面</title> <style> body{ text-align:center; } </style> </head> <body> <p>QRコードにしたい文字を入力し</p></body></html>…

Google Analyticsの導入、複数のサイトを管理する(プロパティの追加)

Google Analytics(無料)を活用するとサイトのアクセス解析ができます。 Google Analyticsと検索してサイトを表示、Googleアカウントを使ってアカウントを作成します。 はてなダイアリーをトラッキングする 設定-外部サービス連携-Google Analytics連携にト…

Twitterのタイムラインをはてなダイアリーのサイドバーに表示する

Twitterのウィジェットを作成し、はてなダイアリーのサイドバーに表示します 自分のタイムラインを表示することもできますが、テーマを決めて検索、収集した記事を表示することもできます。 設定からウィジェット-新規作成 ウィジェット作成画面で、タイムラ…

Youtubeで動画のアップロード、Youtube動画の取り込み

Youtube側でデータ形式の変換をすべて実行してくれるので、用意した動画をそのままYoutubeにアップロードするだけで見せる事ができます。F4V形式:MPEG4を伴ったFlashビデオ アノテーション:指定のタイミングで文字を吹き出しなどで表示させることができま…

Wordpressの導入

授業でWordpressの導入について学習しましたので、自宅でも同様にインストールしてみます。 Wordpress公式サイトよりwordpress-3-5-1-ja.zipをダウンロード。 回答したwordpressフォルダをxampp\htdocsフォルダに格納。 Xamppを起動し、Mysqlをstartさせてダ…

はてなダイアリーHatena2-brownデザインのカスタマイズ 

はてなのデザインをカスタマイズして見栄えを整える事により、ブログを書くモチベーションを高めようと目論見、カスタマイズにチャレンジしました。 しかし、h4に見出し画像を出そうと、何度スタイルシートを更新してもうまくいかない。どうやらはてなのデザ…

データベースに複数のテーブルを作成し、連結して全データを表示する | 58日目

PHP

●PHPの教科書にそって、データベースをさらに勉強する。 <PHPの教科書のページ:Part5 実用的なプログラムの作成 P.187> 昨日作成したmydb2にPHPAdmin管理画面からフィールドを3つ追加する。(sales, created, modified) テキストのダブルクォーテーショ…

データベースを作成して入力フォームを実際に動かす!(ドメインキング編) | 57日目

PHP

有料レンタルサーバー「ドメインキング」でデータベースを動作させる Dreamweaverで作成しておいた下記の4つのファイルをドメインキングのサーバーにFFFTPを使ってアップロードします。 この際、ドメインキング側でデータベースの設定、PHPの設定が必要にな…

データベースが持てる有料レンタルサーバー「ドメインキング」契約

PHP

安さで評判のロリポップとドメインキングを比較検討の結果、現時点での初期費用の安さにつられてドメインキングに申し込み。 ドメインを指定しないと申し込みが先に進まないようだったので、ドメインも即効でドメイン名を決めて申し込みした! ドメインキン…

データベース作成してフォームを実際に動かす!(Xampp編) | 57日目

PHP

テストサーバーXamppでデータベース動作させる Xamppを起動してstartさせた、MySqlのAdminをダブルクリックする。何も開かなければApacheの方のAdminをダブルクリックする。 と、Xamppの管理画面が開く。 左下のほうにあるphpMyAdminをクリックする。 と、ph…

for文で指定個数の画像を表示する

PHP

<ポイント> for文 $i++ で1つずつ増やす 画像の名前を1.jpg、2.jpg、3.jpg・・・にする <html> <head> <meta charset="utf-8"> <title>指定個数の画像を表示する</title> </head> <body> ' . "\n"); } ?> </body> </html>

デザインのカスタマイズ

bodyとh1の背景画像を変更してみた。 h1の背景画像サイズがうまくいかない。920×180でも910×180でも画像が足りないところが出てくる。横幅を1020にしてもだめ。 うーん。

PHPでメンバー登録フォームと入力チェック画面を作る(2ページ) | 55日目

入力画面 <html lang="ja"> <head> <meta charset="utf-8"> <title>メンバー登録フォーム</title> <style> body{ /*text-align:center; */ } table{ text-align:left; /* border-collapse:collapse; */ } </style> </head> <body> <h1>メンバー登録</h1> <hr> <br> <table width="500" border="1"> <tr> <td> </td></tr></table></hr></body></html>