システックス公式ブログ
2009年12月29日
システックス公式ブログ年末のご挨拶
一年間ありがとうございました
今年も残すところ僅かとなりました。これが2009年最後のエントリーになります。
今年の2月にシステックス公式ブログを開設し、公式サイトでは伝えきれない当社の情報やお役立ち情報を発信してきました。不慣れなところもあり、思うように更新できませんでしたが、購読していただいた皆様には、この場を借りて御礼申し上げます。
システックスの大きなニュース 2009
思い返せば2009年のシステックスもいろいろありました。
大きなニュースでは、Salesforce CRMの提供をはじめとするクラウドコンピューティングへの参入がありました。長野県で初となるセールスフォース・ドットコム認定コンサルタントも2名の社員が取得しました。
もう一つの大きなニュースが最近ありました。
先日行われたスケルトン全日本選手権でシステックススケルトンクラブ所属の田山選手が優勝しました。越選手は３位で表彰されました。バンクーバーオリンピック出場に大きく弾みをつけた二人は、年明け早々のワールドカップに参戦いたします。
今年に引き続き、来年も応援よろしくお願いいたします。
来年もよろしくお願いいたします
2010 年は 2009 年以上に良い情報を発信できるように、スタッフ一同頑張りますのでどうぞよろしくお願いいたします。
一年間ありがとうございました。良いお年をお迎えください!
2009年12月22日
Ajax入門（jQueryとThickbox）
何はともあれ
百聞は一見に如かず、です。
まずは、下記に続くサンプルを試して頂きながら、
「Ajax対応のJapascriptライブラリ」の“便利さ”を感じて頂ければ、と思います。
jQuery
【公式サイト】
・「jQuery」（英語）
【特徴】
Javascriptライブラリ（Javascriptの塊）の一つ。
Webページ内の要素（文字とか段落とか画像とか）に対して、比較的簡単なJavascriptのコードを記述するだけで、様々な効果を与えることができます。
【ダウンロード】
上記公式サイトにて、「Download（jQuery）;」ボタンをクリックすると、最新版をダウンロードする画面に遷移するので、下記のファイルをダウンロードして下さい。
・jQuery-X.X.X.min.js
【コード例】
≪sample.html≫
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<span class="tag"><html></span> <span class="tag"><head></span> <span class="tag"><title></span>jQueryサンプル<span class="tag"></title></span> <span class="tag"><script <span class="attr">type=</span><span class="value">"text/javascript"</span> <span class="attr">src=</span><span class="value">"jquery-1.3.2.min.js"</span>></span><span class="tag"></script></span> <span class="tag"><link <span class="attr">href=</span><span class="value">"sample.css"</span> <span class="attr">rel=</span><span class="value">"stylesheet"</span> <span class="attr">type=</span><span class="value">"text/css"</span> /></span> <span class="tag"><script <span class="attr">type=</span><span class="value">"text/javascript"</span>></span> <span class="rem"><!-- $(function() { $('#Area1').mouseover(function(){ $(this).css("background-color","#ff0000") }); $('#Area1').mouseout(function(){ $(this).css("background-color","#ffffff") }); $('#Area2').click(function(){ $('div#Area2 span').fadeIn("slow") }); }); //--></span> <span class="tag"></script></span> <span class="tag"></head></span> <span class="tag"><body></span> <span class="tag"><div <span class="attr">id=</span><span class="value">"Area1"</span>></span> ココのエリアに、マウスカーソルを重ねたり外したりすると、色が変わります。 <span class="tag"></div></span> <span class="tag"><div <span class="attr">id=</span><span class="value">"Area2"</span>></span> ココのエリアをクリックすると・・・<span class="tag"><br /></span> <span class="tag"><br /></span> <span class="tag"><span></span>文字がフェードインされます。<span class="tag"></span></span> <span class="tag"></div></span> <span class="tag"></body></span> <span class="tag"></html></span> |
≪sample.css≫
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<span class="keyword">div</span> { <span class="keyword">border-right</span>: <span class="value">#000000</span> <span class="num">1px</span> <span class="keyword">solid</span>; <span class="keyword">border-top</span>: <span class="value">#000000</span> <span class="num">1px</span> <span class="keyword">solid</span>; <span class="keyword">border-left</span>: <span class="value">#000000</span> <span class="num">1px</span> <span class="keyword">solid</span>; <span class="keyword">border-bottom</span>: <span class="value">#000000</span> <span class="num">1px</span> <span class="keyword">solid</span>; } <span class="keyword">div</span>#<span class="keyword">Area1</span> { <span class="keyword">width</span>: <span class="num">400px</span>; <span class="keyword">height</span>: <span class="num">100px</span>; <span class="keyword">left</span>: <span class="num">100px</span>; <span class="keyword">top</span>: <span class="num">100px</span>; } <span class="keyword">div</span>#<span class="keyword">Area2</span> { <span class="keyword">width</span>: <span class="num">400px</span>; <span class="keyword">height</span>: <span class="num">100px</span>; <span class="keyword">left</span>: <span class="num">100px</span>; <span class="keyword">top</span>: <span class="num">400px</span>; } <span class="keyword">div</span>#<span class="keyword">Area2</span> <span class="keyword">span</span> { <span class="keyword">display</span>: <span class="keyword">none</span>; } |
【参照URL】
・「jQuery: jQuery実践サンプル」
豊富なサンプル量を公開しています。
・「はじめてのjQuery」
jQueryを使って何かやってみたい方は、一度、これを見ておいてもいいかもしれません。
ThickBox
【公式サイト】
・「ThickBox 3.1」（英語）
【特徴】
jQuery対応のJavascriptライブラリで、ブラウザ上の特定のエリア（テキストや画像）を、ポップアップのように表示することができます。特に、画像の拡大表示やスライドショーとして応用されることが多いです。
「PartyWeb」では、Webアルバム機能に ThickBox を応用しています。
【ダウンロード】
上記公式サイトにて、「Overview」のところにある「Download」にリンクされている下記のファイルをダウンロードして下さい。
・thickbox.js、もしくは、thickbox-compressed.js
・ThickBox.css
・loadingAnimation.gif
（※loadingAnimation.gif は、thickbox.js を基点に「images/loadingAnimation.gif」となるように配置して下さい。）
【コード例】
≪sample2.html≫
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<span class="tag"><html></span> <span class="tag"><head></span> <span class="tag"><title></span>Thickboxサンプル<span class="tag"></title></span> <span class="tag"><script <span class="attr">type=</span><span class="value">"text/javascript"</span> <span class="attr">src=</span><span class="value">"jquery-1.3.2.min.js"</span>></span><span class="tag"></script></span> <span class="tag"><script <span class="attr">type=</span><span class="value">"text/javascript"</span> <span class="attr">src=</span><span class="value">"thickbox.js"</span>></span><span class="tag"></script></span> <span class="tag"><link <span class="attr">href=</span><span class="value">"thickbox.css"</span> <span class="attr">rel=</span><span class="value">"stylesheet"</span> <span class="attr">type=</span><span class="value">"text/css"</span> /></span> <span class="tag"></head></span> <span class="tag"><body></span> <span class="tag"><a <span class="attr">class=</span><span class="value">"thickbox"</span> <span class="attr">title=</span><span class="value">"1"</span> <span class="attr">rel=</span><span class="value">"group1"</span> <span class="attr">href=</span><span class="value">"images/1.jpg"</span>></span><span class="tag"><img <span class="attr">alt=</span><span class="value">"1"</span> <span class="attr">src=</span><span class="value">"images/1_t.jpg"</span> /></span><span class="tag"></a></span> <span class="tag"><a <span class="attr">class=</span><span class="value">"thickbox"</span> <span class="attr">title=</span><span class="value">"2"</span> <span class="attr">rel=</span><span class="value">"group1"</span> <span class="attr">href=</span><span class="value">"images/2.jpg"</span>></span><span class="tag"><img <span class="attr">alt=</span><span class="value">"2"</span> <span class="attr">src=</span><span class="value">"images/2_t.jpg"</span> /></span><span class="tag"></a></span> <span class="tag"><a <span class="attr">class=</span><span class="value">"thickbox"</span> <span class="attr">title=</span><span class="value">"3"</span> <span class="attr">rel=</span><span class="value">"group1"</span> <span class="attr">href=</span><span class="value">"images/3.jpg"</span>></span><span class="tag"><img <span class="attr">alt=</span><span class="value">"3"</span> <span class="attr">src=</span><span class="value">"images/3_t.jpg"</span> /></span><span class="tag"></a></span> <span class="tag"></body></span> <span class="tag"></html></span> |
【参照URL】
・「Thickbox・Examples」
ThickBox の公式サイトの「Example」にて、いくつかのサンプルが公開されています。
・「class=”thickbox” に rel をつけると画像が表示されない」
Thickbox 3.1 + jQuery 1.3.2 で、上記のコード例のようなスライドショーを作ろうとするとハマると思います。
対処としては、Thickbox.js の79行目の「@」を削除して保存するだけです。
【ちなみに】
2009年9月30日、ThickBox の作者・Paul Irish氏は、
「しばらく Thickbox のメンテは行わない。」という告知をしており、
Thickbox と同じような動きをする下記のようなJavascriptライブラリを紹介しています。
・「colorbox」
・「jQueryUI Dialog」
・「fancybox」
・「DOM window」
・「shadowbox.js」
それぞれ、表示の種類やHTML/CSSの書き方や異なりますので、自分の好みと状況によって使い分けるとよいでしょう。
次回予告
いかがでしょうか？
多少のコツは必要ですが、Javascriptライブラリを使えば、
比較的短いコードで、いろんな動き・効果・演出を付けることができそうではありませんか？
次回は、当社の「PartyWeb」の「スライドショー」機能を題材に、
より実用に向けたカスタマイズ方法についてご紹介できれば、と思います。
2009年12月21日
Googleカスタム検索の導入とサイト内検索レポート
Goolgeカスタム検索の導入
2ヶ月ほど前になりますが、当社の公式サイトにGoogleカスタム検索を導入しました。サイトリニューアル当初はサイト内検索を付けていませんでしたが、コンテンツが増えてきたので検索機能を入れて欲しいという要望があったためです。サイト内検索を実現する方法はいろいろありますが、検討の結果、Googleカスタム検索を導入することになりました。
カスタム検索エンジンの作成
Googleカスタム検索は簡単に導入することができます。
まずはGoogleカスタム検索のページにアクセスし、カスタム検索エンジンを作成します。必要な情報を入力してプレビュー画面で確認したら完了です。
検索ボックス コード・検索結果コードを貼る
カスタム検索エンジンを作成したら、検索ボックスと検索結果を表示させるコードを取得して、htmlに貼ります。
検索結果をサイト内に表示させる場合は、「iframe を使用して、自分のウェブサイト上で検索結果をホストする」を選択してください。当社の公式サイトはMovableType（MT）で構築されていますが、MTでサイト内に検索結果を表示する場合は、インデックステンプレートを作成するのが良いでしょう。ただし、検索結果ページは600px未満にすることができないので、当社の場合は本来3カラムであるところを無理やり2カラムにして対応しました。
使い勝手を考えると、やはりサイト内に検索結果を表示する方が良いと思います。
サイト内検索レポートの設定
Googleカスタム検索が優れているところは、検索されたキーワードをGoogleAnalyticsで解析することができるところです。
GoogleAnayticsの設定で、サイト内検索レポートを有効にして、クエリパラメターを入力してください。
設定をしてしばらくすると、データが反映されるようになります。
サイト内検索を設置されていないウェブマスターの方は、是非Googleカスタム検索を使ってみてください。
2009年12月18日
【学生の皆さんへ】信濃毎日新聞社主催 合同企業ガイダンスに参加いたします
システックス参加ガイダンス
２００９年１２月１９日に行われる【信濃毎日新聞社主催 合同企業ガイダンス】に
システックスが出展いたします。
- 日時：2009年12月19日（土） 13:00～17:00
- 場所：東京ドームシティプリズムホール
東京近郊にお住まいの学生さん、どうぞいらしてください。
2009年12月17日
【学生の皆さんへ】リクナビ2011開幕★LIVE長野にお越しいただきありがとうございました
合同説明会へお越しいただいた学生の皆さんへ
採用担当の橘田です。
１２／１３、長野市内で行われた合同会社説明会に参加してきました。
うーん、すごい人出でした。
出展会社数は２９社でしたが、システックスと同業のＩＴ関連はゼロ。
そのためか、８０名以上という非常に多くの学生さんがブースに来てくださいました。
大混雑！ですみません
イベント開始３０分前からロビーに人が溢れ、
きっと収まりきらなかったのでしょうね。
開始時刻より少し前に、会場の中に入れていました。
スタート直後から、お目当ての企業になだれ込む学生で、通路が大渋滞。
立ち見の学生さんに、追加の椅子すらもらえない、というか置けない状態。
そんな状況だったので、あまり説明に時間をかけず、
それぞれができるだけたくさんの企業を回れるように、説明は簡潔にしてみました。
システックスを訪問して下さった方、ありがとうございました。
立ったまま聞いてくださった方、すみませんでした。
次回合同ガイダンスのお知らせ
- １２月１９日 東京ドームプリズムホール
- １２月２６日 メルパルク長野
- １２月２８日 松本市ホテルブエナビスタ
今月は上記ガイダンスに参加いたします。
ぜひお越しください。
直接お話ししましょう！
2009年12月10日
【学生の皆さんへ】リクナビ2011開幕★LIVE長野に参加いたします
開幕★LIVE in長野
１２月１３日（日）、システックスはリクナビ主催の合同ガイダンス、【開幕★LIVE in長野】に参加いたします。
場所：JA長野県ビル アクティホール（長野市大字南長野北石堂町１１７７番地３）
駅から歩いて10分ほど
時間：12：00～17：00（受付11：30～）
詳しくはリクナビ2011をご覧ください。
システックス採用担当者から学生の皆さんへ一言
採用担当の橘田です。
１２月１３日（日）、私としては今期はじめての「合同会社説明会」に参加します。
システックスのデビュー戦としては、
１１月８日の開幕ライブ（東京ビックサイト）があり、
他の採用担当者が参加したのですが・・・
そのときの話を聞いたら、ものすごい数の学生さんがいらしたようで。
やはり昨年来のニュースから、尋常でない危機感を感じているのですね。
皆さんの心境としては、
今のこの時期は「数多くのブースを回りたい」でしょうから、
なるべく短時間で端的に説明したいと思っています。
上手く話せるかな？？頑張ります！
１２月１３日、長野市近郊にお住まいの方は
どうぞブースに来てください。
2009年12月09日
システックス映画試写会【のだめカンタービレ最終楽章】
システックス映画試写会のお知らせです。
１２月１７日（木） １８：３０～
長野グランドシネマズへ抽選で５０組１００名様をご招待いたします。
12月19日（土）全国東宝系にて公開です。
応募はハガキ・インターネットをご利用ください。
応募の際、CM内の「応募キーワード」を入力が必要となります。
今回のキーワードは、８文字！
詳細・応募方法はCMでご確認ください。
2009年12月08日
システックス互助会主催「2009忘年会」が行われました
システックス2009忘年会行われる
先日、年末恒例のシステックス本社の忘年会が行われました。
役員・社員ともに少し早いのですが、２００９年の労をねぎらいました。
忘年会でも新入社員は大活躍。
サンタクロースに扮して、社員全員にシステックスのロゴマーク入りガムをプレゼントしてくれました。
今年の商品は・・・カニ！！
いつも豪華賞品が当たる忘年会ビンゴ大会。
今年の一位の商品は
タラバガニ・ズワイガニ・毛ガニの【豪華カニ三点セット】
カニをかけたビンゴ大会、とても盛り上がりました。
カニ、おめでとうございます！
社長も豪華賞品を当てました。
2009年11月25日
システックス映画鑑賞券プレゼント【ニュームーン／トワイライト・サーガ】
システックス映画鑑賞券プレゼントのお知らせです。
全国共通特別鑑賞券を30名の方にプレゼントいたします。
１１月２８日（土）全国ロードショーです。
応募はハガキ・インターネットをご利用ください。
応募の際、CM内の「応募キーワード」を入力が必要となります。
詳細・応募方法はCMでご確認ください。
2009年11月24日
第104回えびす講煙火大会が行われました
昨日、晩秋の花火大会第１０４回長野えびす講煙火大会が行われました。
会場の犀川河川敷は大勢の観客でにぎわい、花火が上がるたびに大きな歓声が上がっていました。
今年は景気回復を願って、例年より１，０００発多い過去最多の７５００発。
システックスもこの大煙火大会に協賛し、晩秋の寒空に大きな大きな【システックスの華】を咲かせました。
