2016/03/31

FlexSlider実装に必要なファイル

FlexSliderはとっても便利な jQuery プラグインです。あちこちのホームページでよく見る、画像をスライドさせたり、ぐるぐる回したりできるものです。
楽してカッコイイWebページが作れます。

しかし、いざ実装しようとすると、ちょっと迷うことがあります。
FlexSliderをダウンロードすると、沢山のファイルが展開されるのですね。

「これ、全部要るの?」

FlexSliderの使い方のWebページは沢山あるけど、どのファイルを実装対象のWebサイトにアップロードしたら良いか、ほとんど書いてないです。

答えは、「全部は必要ありません」

デモページなども入っていて、全部だと容量が4MB近くあり、全てをアップロードするのはムダです。

基本的なスライダー Basic Slider を使う場合しか実証していないので、他のスライダーやカルーセルを使う場合は足りないかもしれません。あしからずご了承くださいませ。

【必要なファイルは3つです】
  1. jquery.flexslider-min.js
  2. flexslider.css
  3. fonts フォルダ

専用のフォルダやに入れると美しいですが、初心者の方は、ルートディレクトリか、実装するページと同じフォルダに全部入れちゃえばOKです。

fontsフォルダをアップロードしてやらないと、「左右の矢印(進む・戻る)が表示されない」とググることになります。fontsフォルダ内のどのファイルが必要かまではチェックしていませんので、興味のある方は調べてみて下さい。ちょっと頑張れば左右矢印に独自の画像を指定できるので、そのときはfontsフォルダは要らないかもね。

【html内の記述 <header>部】

  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  2. <link rel="stylesheet" href="flexslider.css" type="text/css">
  3. <script src="jquery.flexslider-min.js"></script>
  4. <script type="text/javascript" charset="utf-8">
  5.   $(window).load(function() {
  6.     $('.flexslider').flexslider({
  7. animation: "fade",
  8. slideshowSpeed: 6000,
  9. animationSpeed: 800
  10. });
  11.   });
  12. </script>

フォルダに格納した人は、href や src にそのとおりに指定してください。
1行目は、googleさんが提供してくれている Query の読み込みです。
4行目以降は、実装例です。

7~9行はFlexSliderのオプションです。
これ以外にも様々な設定ができますので、詳しくはググって下さい。
この例では、表示をスライド(デフォ)ではなくフェードにする(スライダーじゃないじゃん、というツッコミはナシで)、表示間隔(ms)、アニメーションする時間(ms)を指定しています。オプションは、カンマでどんどん増やすことができます。

【html内の記述 <body>部】

  1. <div class="flexslider"><ul class="slides">
  2. <li><img src="OCCHIALI01.jpg" /></li>
  3. <li><img src="OCCHIALI02.jpg" /></li>
  4. <li><img src="OCCHIALI03.jpg" /></li>
  5. </ul>
  6. </div>

1行目はおやくそく。
2~3行目が表示したい画像ファイルの羅列です。何行でも書けるみたい?
リンク(aタグ)で括ると、それぞれの画像からリンクできます。詳しくはググって~。

css で div.flexslider の高さ(height)と、下マージン(margin-bottom) を指定をしてやると良いでしょう。(flexslider.css ファイルの .flexslider のところです)
高さが決まっていないと表示中にぺこんと動いてかっこ悪いのと、下マージンがデフォルトでは広すぎます。

楽にカッコイイWebページを!
GoodLuck!

inoue

2016/03/28

トラブルや課題は私たちのチャンス

「トラブルや課題」は私たちにとってのチャンスです。解決やお役立ちのための、新たなサービス商品をつくりだしたり、新しいアプローチをしてみるきっかけになります。

今回発覚したプロジェクト進捗の停滞にしても、お客様でのウィルス感染にしても、どうしたら、問題解決に役立てるかを考えることができます。
例えば、感染予防サービスセット商品として対策ソフトと教育指導をセットで提供したり(ウィルス感染は人的要因が非常に大きい)、自らプロジェクトの推進役を引き受けて、プロジェクトマネジメントをサービスとして提供することなどができるでしょう。

お客様はそのような提案を待っておられます。もちろん、対価は頂戴しますが、納得頂ける、内容や満足、感動を提供できることが重要になります。

なので、「トラブルや課題」という名のチャンス、切っ掛けはムダにせず、さっそく、朝礼やMTなどで考えていきましょう。

さて、3月もついに最終週です。月次と同時に、四半期の良い仕上げとなるように考え、動いていきましょう。

2016/03/25

一生のおつきあい 2016/03/25

我々インプラスは、縁あって出会えた1つ1つのお客様と、一生のおつきあいをしていきたいと考えています。

私たちが開発したシステムがお客様に長く使って頂ける、こんなに嬉しいことはありません。お客様を現代社会を共に生きるのパートナーと位置づけ、友人だったらどうするかを意識しましょう。もちろん、自社の継続はお客様にとっても最重要ですので仕事に対する正当な利益は頂戴します。
大海を進むインプラス号の羅針盤である経営理念の通り、お客様の存在価値と我々の存在価値をを高めること、すなわち、お客様の会社が成長し良くなることと、我々の会社が成長し良くなることをめざし続け、一生のおつきあいをするにはどうするのかを考えて進んでいきましょう。

3月もあと1週間、同時に4半期の終わりでもあります。今月をふり返り、また、1~3月をふり返り、できた事、良かったこと、課題を再認識して「今からどう動くのか」を考えましょう。

2016/03/08

計画を立てる切っ掛けに 2016/3/8

3月に入り、世間では新年度の4月に向けた動きになっています。それに伴ったオファーも出てきて少し慌ただしくなっているかと思います。この時期に、お客様に対して、「新年度のシステム改善や増強などのIT投資はどのようにお考えか」を伺えると、我々の計画の見通しになる上に、お客様の方でも計画を立てる切っ掛けにして頂けることもあると思います。

また、連絡をしていなかったお客様とコンタクトが取れているようで何よりです。最低でも年に1度、いや、半年に1度は何らかのやりとり、コミュニケーションを取れるようにしましょう。それ以下になったら、お客様に、客と思っていないなどと思われてしまいます。我々を支えて下さっているお客様に対する姿勢が問われます。

各銀行さんから、そろそろ決算書が出来上がった頃でしょうから見せて下さいと連絡が入っています。今回も、優秀な成績表を見て貰えると思うと楽しみです。融資や借り換えなどのアプローチもあると思われます。PRO5の開発での先行投資もあるため、自己資本比率をにらみながらバランス良く金融機関を利用します。

第一四半期である1~3月は、ほんとうにあっという間に過ぎていきます。
お役立ちと成長は常に意識しながら、優先順位や生産性を考え、1つ1つ確実に前に進めていきましょう。