問題解決ログ

2011-05-30 スライドショーのタブ切り替えをJavaScriptで実装したい

スライドショーのタブ切り替えをJavaScriptで実装したい

最近、サイトのUIに凝っていて、閲覧者になじみのあるブラウザのUIをホームページに実装できないか考えていた。白羽の矢が立ったのがjQuery+Cycleプラグインだ。Cycleは多機能スライドショーだが、特性を利用してタブとして実装したい。

目的

スクロールの排除による利便性の向上
視点移動を減らして、閲覧者の疲労削減
操作や表現の簡略化で記憶に残りやすくする

実装したい内容

JavaScriptでの実装(Flashは使わない)
JavaScriptを切った環境でも閲覧可能にする
スライドショーをタブクリックで切り替える
現在表示しているタブを強調する
タブに画像名(img alt要素)を表示する
タブに自動でサムネイル画像を表示する
スライドショーを前後ボタン「次へ」、「戻る」で1つずつ切り替える
タブ、前後ボタンをスライドショー本体から切り離し、レイアウトの自由度を高める
初期状態に表示されるタブを、GETで指定切り替え

デモ

デモのイメージ

ダウンロード

ソースファイル：slide_tab.zip

備考

核となるタブ切り替えはCycleオプションの"pagerAnchorBuilder"で実現しているが、日本語の解説が少なかったので骨が折れた
中でも、CSSで使現在表示しているタブを強調する"activeSlide"クラスは、たまたま存在に気付いた(ソースを読むといいことがある)
もともとはスライドショーだが、テキスト要素を表示させることも可能
基本はjQuery Cycle Pluginで紹介されているまま。ソースには、実装で困ったところだけ日本語でコメントを書いている
JavaScriptに明るくなくてもCSSが分かればすぐに使えると思う

参照

▽ jQuery Cycle Plugin

http://jquery.malsup.com/cycle/

言わずとしれたCycle配布元

▽ Cycle jGlycy

http://semooh.jp/jglycy/jquery-plugins/cycle

Cycleのオプションを日本語で解説してくれている

　平成23年5月28日(土) 記述

##### 平成23年6月2日(土)に追記 #####

GETで受け取った値をそのままJSに出力しないよう修正

JavaScriptインジェクションやXSSを警戒して。それでなくても記号や英字を入れるだけで誤作動していた。

参考

▽ JavaScriptインジェクション攻撃

http://itpro.nikkeibp.co.jp/article/COLUMN/20081006/316276/

▽ C# #29. JavaScript インジェクション攻撃の防止

http://msdn.microsoft.com/ja-jp/asp.net/ff652519

サイト利用者からの入力をHTML エンコードする

▽ XSS対策:JavaScriptのエスケープ(その3)

http://d.hatena.ne.jp/ockeghem/20070519/1179592129

「JavaScriptの動的生成は推奨していない」を証明するかのようにエスケープ処理を何度も考察している。

2011-05-16

考察) 飲食店スタッフがブログをどんどん更新できる方法

インターネット技術, 企業・団体 | 14:55 |

世の中には仕事としてブログを書く人がいる。企業や店舗の広報ブログがそれだ。ただし、物書きが本業ではない人が大半なので、どこでも継続が課題となっている。さらに、人気を集めて注目されるようにするならなおさら困難を極める。

そこで、最低限5行書けばブログ記事が完成するよう頭をひねった。

旬のキーワードを拾う

キーワードの中から自分が付いていける話題を選択後、なにがあったのかを調べる。

▽ 今日の急上昇ワード - グーグルトレンド

http://www.google.co.jp/trends

▽ 急上昇ワードランキング - ヤフー!ジャパン

http://searchranking.yahoo.co.jp/burst_ranking/

▽ トレンドサーフィン - ヤフー!ジャパン

http://searchranking.yahoo.co.jp/trend/

▽ バズッター (ツイッターの人気キーワード)

http://buzztter.com/ja

キーワードを元にしてブログの本文を書く

起承転結

起：キーワードへの導入
- 天気や季節の話などをしてキーワードにつなげる
承：キーワードの事象を紹介
- キーワードの話題を取り上げる、いつ、どこで、だれが、何を、どのように、どうやってしたのかなどが書かれると読者も記憶を連想しやすい
転：それに対する自分の意見、もしくは対案
- 好きか、嫌いか、過去に似たような経験があるなどを書く
結：オチ
- 何かを心に誓ったり、笑いに走ったりする

ブログタイトルを書く

チートシートを参考に、本文にあったタイトルを書く

▽ 『読者を惹き付けるブログのタイトル』Cheat Sheetを作らされたｗ

http://www.popxpop.com/archives/2006/12/post_80.html

記事を投稿

ねっ、かんたんでしょ。

あとがき

タイトルに考察とあるように、再検証性があるにもかかわらず検証していない。

そのため、あとでリボン日記を使って検証する予定だ。

(問題解決ログは「過去にぶつかった問題の記録」だけを掲載するので趣旨に反するという理由で対象外に)

2011-04-24

XAMPP Control PanelでApacheおよびMySQLが正しく再起動できなくなるのを正常にしたい - Windows7 64bit

インターネット技術 | 14:15 |

自宅環境でXAMPPを使えるよう、Windows7 64bitにインストールしたが、パソコンを再起動するとXAMPP Control PanelでApacheおよびMySQLが正しく再起動できなくなる。

原因を探るため何度もXAMPPのインストールを繰り返した結果、問題が見えなくなった。

結論としては、Windows 7のファイアーウォールがApacheおよびMySQLの起動を阻害していた。

わたしの環境では、ファイアーウォールで「ホーム/社内(プライベート)」だけが許可されていて、「パブリック」を許可していなかったため、中途半端な動作になっていた。

ファイアーウォールの状態を変更する

「スタート＞コントロールパネル＞システムとセキュリティ＞Windows ファイアーウォールによるプログラムの許可」を選択

右上「設定の変更」ボタンをクリックした後、「Apache HTTP server」と「mysqld」のそれぞれの「ホーム/社内(プライベート)」と「パブリック」にチェックマークを入れて「OK」ボタンを押す。

難解だった点

XAMPPは最初のインストールで正しく起動した
ApacheおよびMySQLはサービスにインストールすると、起動した
- この状態だと、「パソコンを再起動すればApacheなども再起動できる」

##### 平成23年5月16日(月)追記 #####

しかし、XAMPPを起動するとき、ショートカットを右クリックして「管理者として実行する」をクリックしないと上記の障害が継続することが分かった。

難儀なことにショートカットごとに「特権レベル」を変更できるため、ショートカットからXAMPPを「管理者としてこのプログラムを実行する」ように設定変更する必要があった。

ショートカットの特権レベルを変更する

「XAMPP ショートカットを右クリック＞プロパティ

　＞「互換性」タブ＞特権レベルで「管理者としてこのプログラムを実行する」にチェックを入れてOK」

これで、このショートカットをダブルクリックすると特権レベルでXAMPPが起動できるようになる。

2011-04-08 飲食店の発展手順

飲食店の発展手順

06:35 |

　編集日：2011年4月7日（木）

友達が突然「俺、飲食店の経営担当になるから何か注意することがあるか?」と質問してきた。そのままだとわたしに飲食店経営の経験はないと答えるだけだったが、それだと芸がないので自分が担当されたら何をしていくかを箇条書きにして回答した。

TQMで行うこと

3ヶ月先の結果、6ヶ月先の目標を明確にする
現状を調査し、期間内に目標を達成するためにPDCAを持続する
日常勤務にある程度余裕を残し、影響度の高い問題やアイデアを発見したら検討し、対策を実施する

※TQMとは、Total Quality Managementの略で「企業・組織における経営の“質”向上に貢献する管理技術、経営手法」です。

管理にはPDCAのサイクルを活用する

P：計画（プラン）: 計画を立てる
D：実施（ドゥ）: 実施する
C：確認（チェック）: 計画どおりに実施できているか、できていない場合は原因をさぐる
A：処置（アクション）: 行動を修正する処置の実施

評価基準

品質
- 商品の美観、味、温度、におい、食感
- 外観、内層の状態
- 店員の身だしなみ
- 応接、電話応対
- 店内での意思疎通
安全
- 店内、店外の客の流れ
- 厨房内
- 配達
原価
- 営業利益、利益率
- 食材
- 消耗品の原価
- 光熱費
- 交通費
工数
- 調理
- 装丁
- レジ
- 配達
- 4S（整理、整頓、清潔、清掃）
チームワーク
- あいさつ
- 意思の疎通
- 情報共有
- 目的意識の共有（店で働く者として）
トレンド
- 時勢、流行の取り入れ
- 季節感の先取り
- 変化のあるおもてなし

評価方法

週の頭に前週を評価
月単位で評価値を出す
評価に時間をかけない
- 気付いた点などあればメモ書き、再利用できるよう時系列で保存する
良かった点を前月比で加算評価する

TQMの行動内容

方針管理と方針展開
プロセス・マネジメント(継続的に改善活動を続けるためのサイクル)
- PDCAの実施
継続的改善

それぞれの対策について

対策は緊急度、重要度、影響度の高いものからテーマとして取り上げる
チームで行う（必ず2人以上）
柔軟性を持たせつつ、効果測定を丁寧に行う
チームのモチベーションを高めるために行う
状況を判断し、早い段階で対策を打てるチームにする

最初に行うこと

　▽ 下記2点をまとめて上司に説明、意識を刷り合わせる

店舗紹介
- どのようなお店なのか、店名、理念、キャッチコピー、店舗紹介、提供するサービスを簡潔に書き出す
自身の役割の紹介
- 要求されている業務と自分が掲げる目標を提示

次に行うこと

方針決定
- 方針を社内、店舗従業員に共有
プロセスの管理
- 評価のチェックリストを作成し、現場でチェック
- 問題を発見したときには状況を調べ、適切な対応を実施
- 実施した対策は3週間継続して効果を確認する
- 対策が効いていれば歯止めをして効果を維持、効果がない場合は再度対策に問題がないか確認して対処法を検討･実施

柱となる経営戦略

主力商品の開発・提供: 店の看板を担う定番の作成
話題性のあるキャンペーン、商品、サービスの持続的な企画・提供: お客様を飽きさせない工夫
品質管理: 商品･サービスの向上、コスト･工数の削減

注意事項

管理者は全体を見通してバランスをとる
- 1つの対策に集中すると他の評価が低下し、弱体化を招く
- 意識して余裕を作り、緊急の対策にそなえる
人間観察に気を配る
- 従業員の顔を常に見て声をかけ、士気を計る
- 時間帯ごとの客の顔を見て、彼らが何を意識しているかを探る
  - 暑い、寒い、快適、不快、快活、疲労、嬉しい、悲しい、などなど
小さいことから協力して士気を高める
- 一人で背負わない
- よく話しかける
- 他の社員や知人を捕まえて相談する（機密は守りながら）