« 2015年9月 | メイン | 2015年11月 »

2015年10月 アーカイブ

2015年10月 4日

Bootstrap 3 /Webページ

■目的
Bootstrap 3でレスポンシブかつ統一感のあるデザインを容易にします。
またサイト開設の短縮や作成/編集の効率化を実現します。

■Bootstrap
BootstrapはTwitter社により開発され、最も広く利用されているCSSフレームワークです。
サイト制作に必要なファイル/CSS/Components/JavaScriptなどがレスポンシブ対応の形でまとめて提供されるので圧倒的な工数低減と初心者でも統一感のあるデザインが可能です。
今回使用するバージョンは3になります。
Bootstrap 3のサイトはこちら
bootstrap site
■Bootstrapダウンロード
本家サイトの[Download][Bootstrap][Download Bootstrap]で本体をダウンロード/解凍します。
ダウンロードしたcss/fonts/jsはサイトのルートディレクトリに保存し利用します。
　bootstrap/
　├── css/
　├── fonts/
　└── js/
■基本テンプレート
[Basic Template]のコードのコピーをindex.htmlとし、本体と同様に保存します。
今回はBasic Templateの代わりにナビバーのある[Samples][Starter Template]を使います。
英語の言語指定を2行目でlan="ja"に変更し、未提供のCSS/JSは別途ダウンロードします。
[Basic Template]
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>
■CSS/Component/JavaScript
Bootstrap 3のコードはCSS/Component/JavaScriptのページでコピーできます。
例えばCSSのページに含まれる代表的なコードはGrid system/画像/表などです。
css
(1)Grid System
Bootstrap Grid systemはスマホやPCなど画面幅に応じて段組みの構成を自動調整します。
これにより画面幅の狭いスマホなどでも縮小やはみ出すことなくページの表示が可能です。
サンプルは2個の画像をレスポンシブに配置したhtmlコードです。
実際にPCでは横方向に2枚、スマホでは縦方向に2枚表示されます。
cbreeze「Bootstrap/グリッド」のページはこちら
<div class="container">
<div class="row">
 <div class="col-sm-6">
  <img class="img-responsive" alt="photo1" src="../photo1.jpg"><br>
 </div>
 <div class="col-sm-6">
  <img class="img-responsive" alt="photo2" src="../photo2.jpg"><br>
 </div>
</div>
</div>
photo1
photo2
(2)代表的なコード
個人的に実際のページ作成で使うコードのほとんどは以下のコードです。
これ以外のコードが必要な時だけBootstrapのサイトにアクセスします。
[ページヘッダー]
<div class="page-header">
  <h1>Example page header</h1>
  <small>Subtext for header</small>
</div>

[パネル/ヘッダーつき]
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

[画像]
<img class="img-responsive" alt="..." src="...">

[画像/グリッド]
<div class="row">
     <div class="col-sm-6">
         <img class="img-responsive"  alt="..." src="...">
     </div>
     <div class="col-sm-6">
         <img class="img-responsive" alt="..." src="...">
     </div>
</div>

[Youtube/埋め込み]
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

[テーブル]
<table class="table table-bordered table-striped table-hover">
<tbody>
<tr><td>...</td></tr>
</tbody>
</table>

[網掛け]
<div class="well" style="word-wrap: break-word;">...</div>
■モバイルフレンドリテスト
ページを作成したらGoogleのモバイルフレンドリテストを行います。
モバイル フレンドリーテストのページはこちら
friendly test
■サンプル
作成したメインページのサンプルです。
1個のhtmlタグを例外にBootstrapのStarter Templateと7種のコードから構成されます。
上から順に　Navbar /Carousel & Image /PageHeader /Grid Systen & Image /Panel with Heading /Table HoverRows /Wells　です。
サンプルページのソース表示はこちら
sample
■結果
Bootstrap 3の利用によりサイト制作の圧倒的期間短縮と効率向上が可能になりました。
レスポンシブな形式のコードはコピーするだけなので初心者でも容易にhtmlを生成できます。
コードはデザイン的に統一されており色/サイズなど試行錯誤を繰り返すことなく効率的です。
使用するコードは限られるので頻繁にBootstrapのサイトにアクセスの必要はないようです。
10年ぶりにWebデザイン関連の書籍を購入ながら読む間もなくページが完成です。

投稿者: admin 日時: 2015年10月 4日 21:01 |

2015年10月10日

Form/自動メール返信

■目的
　Googleフォームを使ってWebページでの申込書入力を行います。
　合わせて自動メール返信もサポートします。

■フォーム作成
　Google Drive(https://drive.google.com/)にアクセスします。
　[マイドライブ][新規ファイル][Googleフォーム]で無題のフォームを作成します。
　[ファイル][名前を変更][新しいフォーム名=xxxxxx]でフォームの保存ファイル名を変更します。
　[質問を編集]で編集画面を表示し[アイテムを追加]で必要な入力項目を作成/追加します。
　項目の追加が終わったら送信後の確認ページでの表示内容を修正します。
　連続してフォームを入力する場合は[別の回答を送信するためのリンクを表示=on]にします。
form
　[回答を表示]で[回答先を選択][新しいスプレッドシート=申込書][作成]で送信先のファイルを作成します。
　作成された送信先スプレッドシートが開くので入力項目名などを確認します。

■埋込コード
　フォームの編集画面で[フォームを送信][埋め込む]でWebページへの埋込コードを取得できます。
embed

■通知ルール
　送信先のスプレッドシートで管理者へのメール通知ルールを設定します。
　[ツール][通知ルール]で[ユーザがフォームを送信したとき=on][メール-その都度=on]にします。
　[保存][完了]でルール設定完了です。

■自動返信メール
　フォーム送信ユーザへの自動返信メールと、指定したアドレスへのメール返信を可能にします。
　フォーム編集画面にもどり[ツール][スクリプトエディター]でGoogle Apps　Scriptの編集画面を開きます。
　[スクリプトを作成=空のプロジェクト]で[無題のプロジェクト]が開きます。
　[無題のプロジェクト/名前を変更=xxxx]でプロジェクト名を指定します。
　エディターでスクリプトを作成し保存します。
  function submitForm(e){
　var itemResponses = e.response.getItemResponses();
  var message = '';
  var username = '';
  var mail = '';
  for (var i = 0; i < itemResponses.length; i++) {
    var itemResponse = itemResponses[i];
    var question = itemResponse.getItem().getTitle();
    var answer = itemResponse.getResponse();
    if (question == '氏名'){
      username = answer;
    }
    if (question == 'E-MAIL'){
      mail = answer;
    }
    message += (i + 1).toString() + '. ' + question + ': ' + answer + '\n';
  }
  var address = 'address@xxxx.xx';
  var title = 'イベント申込書/報告';
  var content = '以下の内容で行事申し込みが追加されま した。\n\n' + message;
  GmailApp.sendEmail(address, title, content);
  var title2 = '行事申し込みありがとうございます';
  var content2 = username + '様\n\nこの度はお申込みありがとうございます。\n'
    + 'お申込みいただいた内容は以下になります。\n'
    + '※このメールはイベント申込書をいただいた方に自動送信されます。\n\n'
    + message
    + '\n'
    + 'イベント事務局\n'
    + 'tel:xxx-xxxx-xxxx';
  GmailApp.sendEmail(mail, title2, content2);
}
  最後に自動送信のトリガーを設定します。
　[リソース][現在のプロジェクトのトリガー][トリガーが設定されていません..クリックしてください]
　[実行=submitForm][イベント=フォームから/フォーム送信時][保存]と進みます。
　承認を要求されるので[続行]で許可リクエストを[許可]します。

■参考資料
　ASCII　「Googleフォームで自動返信システムをサクッと つくる」　2014/04/01
　Googleサイトヘルプ　「Appsスクリプトによる操作の自動化ガイド」

■結果
　Googleフォームを利用しWebからのフォーム入力が可能になりました。
　作成したGoogleフォームは簡単にWebページに埋込が可能です。
　入力されたフォームはGoogleドライブのスプレッドシートに順次保存されます。
　Google Apps Scriptによりユーザへのメール自動返信を可能にしました。
　＊自動返信されないケース頻発で、最終的にForm Notificationsアドオンに変更しました。

投稿者: admin 日時: 2015年10月10日 18:01 |

2015年10月11日

Filezillaクライアント

■目的
FTPクライアントソフトにFilezillaを使います。
接続先はさくらレンタルサーバーです。

■環境
　FTPサーバーの環境です
項目 内容
 備考
FTPサーバ
 xxx.sakura.ne.jp
 さくらレンタルサーバー
FTPアカウント
 xxx
パスワード
 xxx
ルートフォルダー /home/xxx/www

■Filezilla
　オープンソースWindows/Mac/Linux対応FTPクライアントシフトウェアを使います。
　抵抗があったメイン画面は[表示]で不要な画面をオフにしてシンプルな表示に変身できます。
filezilla

■設定
　[ファイル][サイトマネージャ]で設定画面を開きます。
　[新規サイト][一般]でFTPサーバ情報を設定します。
server
　[詳細]でデフォルトのローカルディレクトとリモートディレクリを指定します。
　[転送設定]で[転送モード=パッシブ]を指定します。
　[文字セット]はデフォルトのままの[自動検出=on]です。

■結果
　意外と簡単にさくらレンタルサーバーへのアップロードが可能になりました。
　複雑さゆえ敬遠してきた表示画面は必要な画面のみにしてイメージが変わりました。
　設定はさくらサーバーのWebに記載のNextFTPと同じ内容にしてあります。

投稿者: admin 日時: 2015年10月11日 21:59 |

検索


About 2015年10月

2015年10月にブログ「cbreeze」に投稿されたすべてのエントリーです。過去のものから新しいものへ順番に並んでいます。

前のアーカイブは2015年9月です。

次のアーカイブは2015年11月です。

他にも多くのエントリーがあります。メインページやアーカイブページも見てください。

このブログのフィードを取得
[フィードとは]
Powered by
Movable Type