HOME

システム開発の株式会社システックス

システックス公式ブログ

2010年09月06日

SUPER WEEKEND2010開催されました

先週の土日にエムウェーブでSUPER WEEKEND2010が今年も開催されました。
システックスでは入場の際に入場証明IDとしてお渡しする、リストバンドをご提供させていただきました。

superweekend2010
superweekend2010

イベント会場のエムウェーブは大勢のお客様で大混雑&大盛況!
全国各地から集められた珍しい車やバイクのMOTOR SHOWなどのイベントや大規模なフリーマーケットで大賑わいでした。
superweekend2010


2010年09月02日

【AC長野パルセイロ】天皇杯県予選決勝戦が行われました。

こんにちは。黒岩です。

8月最後の日曜日の29日、松本アルウィンにおいて、
第15回長野県サッカー選手権大会決勝戦が行われました。相手は松本山雅FCです。

決勝戦

天皇杯予選の大事なこの試合、AC長野パルセイロサポーターは気合十分で敵地に乗り込みました。
が、結果は 0-1 …惜敗です。
またしても松本山雅FCの壁を越えられませんでした。

山雅サポーター

松本山雅のチームカラーはグリーン。さすがホームゲームだけあって、大応援団でした。

 パルセイロサポーター パルセイロサポーター2

オレンジがパルセイロのチームカラーです。人数は山雅サポーターには敵いませんが、懸命に応援しました。

暑い中、選手の皆さん、サポーターの皆さん、大変お疲れ様でした。
また来年頑張りましょう!


2010年08月19日

【サッカー】真夏の決戦を制覇。まずは、1冠!AC長野パルセイロ 全国社会人サッカー選手権北信越大会優勝!!

AC長野パルセイロ

こんにちは。竹村です。

お盆期間中の8月15日に行われた「第46回全国社会人サッカー選手権北信越大会決勝戦」でAC長野パルセイロはテイヘンズFCと優勝をかけて戦いました。

試合当日、会場となった石川県の物見山陸上競技場は、風もなく気温36.0度の猛暑日。猛烈な暑さ中の厳しい試合でしたが、4-1 で勝利し、優勝しました!!

全国大会は2010年10月16日(土)から山口県で行われます。一昨年のチャンピオンの意地を掛けて全国優勝を目指して欲しいところです。

また、8月29日(日)には天皇杯出場を掛けた長野県サッカー選手権決勝が松本市アルウィンにて行われます。相手はパルセイロより一足先にJFL昇格を果たした宿敵、松本山雅FCです。今年初めての信州ダービーとなります。みんなで応援し、パルセイロを、そして長野県のサッカーを盛り上げていきましょう!


2010年08月12日

びんずる終了後、実は・・・こんなことが行われています

こんにちは。竹村です。

びんずる終了後に行われていたこと

皆さん知っていましたか?びんずるが終わった翌朝、運営陣や参加連の方々による早朝清掃活動が行われていた、ということを。

早朝清掃活動について

びんずる後の早朝清掃

北村:私は運営側として参加しました。長野の街を祭り前よりも美しくすることを心掛けて早朝清掃。運営側だけでなく、参加連の連長さんや副連長さんにも参加頂きました。多人数での清掃作業となったため、短時間で済んだように思えます。

ゴミはたくさんありましたか?

北村:実はゴミが少なかったことに逆に驚きました。参加連がゴミをまとめて持ち帰る、という習慣がしっかりと浸透しているからだと思います。本当にありがたいことだと思います。

参加連や観客のマナーについて

北村:もちろん、マナーの良悪はあります。でも、多くのお客様はマナーを守って祭りを楽しんでいました。ただ、喧嘩だけはやめて欲しいです。他のお客様にも迷惑が掛かりますし、準備、運営、片付けの妨げにもなりますから・・・楽しい祭りが台無しになってしまいます。

暑い中お疲れ様でした

北村:観客の皆さん・参加連の皆さんのご協力のおかげで、今年のびんずるは大成功で幕を閉じることができました。この伝統あるびんずるを継承し、永久的に続けていってほしいと願っております。


2010年08月10日

長野びんずる、盛大に開催

こんにちは。竹村です。

長野びんずる、盛大に開催されました

8月7日、長野びんずるが開催されました。今年の参加連は250連、参加人数12,300人、観客は16万人!!盛大に行われました。びんずるの運営陣として参加させていただいた社員、北村に運営側から見たびんずるの感想を聞いてみました。北村は広報担当として参加させていただきました。

前日・当日の仕事の内容を教えてください

北村:私は広報担当だったため、前夜祭も当日もひたすらカメラ撮影を行っていました。重たいカメラを首にぶら下げ、広範囲を走り回らなければならないため、見た目以上に大変な作業だと実感しました。また、広報と言っても警備や設営の手伝いもしました。実は、夜中の2時~4時にセントラルスクウェアの駐車場警備も行っていました。これが何よりも辛かったです。

運営側として初めて参加したびんずる。いかがでしたか?

北村:もうこれしかありません。「素晴らしい祭りだった」の一言に尽きます。運営側だけでなく、各連の皆様、観客の皆様のご協力があったからこそ、素晴らしい祭りだった、とはっきり言えるのだと思います。ご協力ありがとうございました。

大変だったことはありますか?

北村:大変だったことはたくさんあり過ぎて、一言では言い切れません。強いて言えば、多くのことが当日になってみなければ分からないことです。天気の良悪、動員数、準備に掛かる時間等々、事前に計画していたことが当日になって変更になることも多いので当日の緊張感はMAXでした。

逆にうれしいことはありましたか?

北村:カメラを撮影していたら、ある連から「大変だね、ご苦労さま」と声を掛けられ、冷茶を頂きました。その気遣いがとても嬉しかったです。本当にありがとうございました。

最後に・・・一言

北村:来年はどのような祭りになるか分りませんが、この伝統ある祭りを永久的に続けていきたいです。


2010年08月04日

SUPER WEEKEND2010のスポンサーです

superweek20101

システックスは、「SUPER WEEKEND 2010」のスポンサーです。
ご入場の際にお渡しするリストバンドを提供させていただいております。

エキサイティングな週末!
ウエア、ファニュチャー、雑貨、そして車にバイク…
フリーマーケットとカー&モーターサイクルショーが合体した国内屈指のエンターテイメントショー!!

開催日: 2010年9月4日(土)/ 5日(日) 2日間開催
開 場 : 4日(土)11:00~18:00 / 5日(日)10:00~16:00
会 場 :エムウェーブ(長野市オリンピック記念アリーナ及び駐車場)長野市北長池195番地
TEL:026-222-3300 / FAX:026-222-3222
superweekend

チケットはお得な前売り券(大人1,500円)でどうぞ。当日お買い求めいただくと、2,000円になります。


2010年07月28日

長野びんずる、間近!!

いよいよ・・・

8月7日土曜日、、長野では「第40回長野びんずる」が開催されます。長野の街にはポスターが貼られ、宣伝カーが走りまわり、いよいよびんずる!と いう活気づいた雰囲気に包まれております。

システックスでは毎年、社員有志の連が参加していたのですが、今年は募集定員の10000人から溢れてしまったため、残念ながら参加できません・・・

しかし、びんずるの運営陣として参加している社員がおります。 びんずる広報担当、北村です。

広報担当 北村から一言

びんずるの広報活動全般に関わらせていただいております。

長野びんずる公式ガイドブック

宣伝カーに乗ってアピールしたり、ポスターや公式ガイドブックを街中に配布しております。当日に向け、参加連やイベントなど多方面の準備風景の撮影や取材に駆け回っております。またFMぜんこうじという、地元のラジオ番組にも出演し、びんずるを盛り上げていきます。

今年は記念すべき第40回目の長野びんずるです。記念すべき今回のびんずる、新しい挑戦をしようとしています。
ひとつ例を挙げますと、踊りの列が渋滞してしまう、という例年の課題を改善、軸となる踊りのルートを「ロの字型」に変更しました。これで完全に一方通行の大きな円になります。

例年にも増して賑やかなお祭りになるよう、みんなで盛り上がれるよう、運営していきたいと思います。
よろしくお願いいたします。


2009年12月22日

Ajax入門(jQueryとThickbox)

何はともあれ

百聞は一見に如かず、です。

まずは、下記に続くサンプルを試して頂きながら、
「Ajax対応のJapascriptライブラリ」の“便利さ”を感じて頂ければ、と思います。

jQuery

【公式サイト】
・「jQuery」(英語)

【特徴】
Javascriptライブラリ(Javascriptの塊)の一つ。
Webページ内の要素(文字とか段落とか画像とか)に対して、比較的簡単なJavascriptのコードを記述するだけで、様々な効果を与えることができます。

【ダウンロード】
上記公式サイトにて、「Download(jQuery);」ボタンをクリックすると、最新版をダウンロードする画面に遷移するので、下記のファイルをダウンロードして下さい。
 ・jQuery-X.X.X.min.js

【コード例】
≪sample.html≫

<html>
<head>
    <title>jQueryサンプル</title>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <link href="sample.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    <!--
    $(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")
        });
    });
    //-->
    </script>
</head>
<body>
    <div id="Area1">
        ココのエリアに、マウスカーソルを重ねたり外したりすると、色が変わります。
    </div>
    <div id="Area2">
        ココのエリアをクリックすると・・・<br />
        <br />
        <span>文字がフェードインされます。</span>
    </div>
</body>
</html>

≪sample.css≫

div
{
    border-right: #000000 1px solid;
    border-top: #000000 1px solid;
    border-left: #000000 1px solid;
    border-bottom: #000000 1px solid;
}
div#Area1
{
    width: 400px;
    height: 100px;
    left: 100px;
    top: 100px;
}
div#Area2
{
    width: 400px;
    height: 100px;
    left: 100px;
    top: 400px;
}
div#Area2 span
{
    display: none;
}

【参照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≫

<html>
<head>
    <title>Thickboxサンプル</title>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="thickbox.js"></script>
    <link href="thickbox.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <a class="thickbox" title="1" rel="group1" href="images/1.jpg"><img alt="1" src="images/1_t.jpg" /></a>
    <a class="thickbox" title="2" rel="group1" href="images/2.jpg"><img alt="2" src="images/2_t.jpg" /></a>
    <a class="thickbox" title="3" rel="group1" href="images/3.jpg"><img alt="3" src="images/3_t.jpg" /></a>
</body>
</html>

【参照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年09月28日

国定忠治縁の地「権堂」を忠治に扮してパレード

9月26日(土)、長野市の権堂商店街で「国定忠治まつり」が行われました。
縦じまの合羽姿の忠治に扮した50人もの人が権堂の町を長野駅方面まで練り歩きました。
国定忠治パレード

権堂商店街にある秋葉神社の境内には国定忠治の墓があり、縁の深い地。
地域の活性化のためのイベントは、和太鼓の演奏、地元劇団による忠治の演劇、落語など盛りだくさん。
大盛況で幕を閉じました。

この日の衣装はなんと40年前のイベント時のものだとか。

忠治に扮した社長の北村です

忠治に扮した社長の北村です


2009年09月10日

Ajax入門(JavaScriptとAjax)

はじめに

IT業界に(特にWebの世界で)「Ajax」という言葉が流行りだして、しばらく経ちます。
そして、現在では、もはや開発技術の一つとして立派に確立した地位を得るまでに至りました。
システックスでも、PartyWebをはじめ、いくつかの開発事例の中で Ajax が採り入れられるようになっています。

『Ajax入門』では、そんな「Ajax」とシステックスの関わりを書いていこうと思います。

Ajaxとは?

IT業界の方なら、もうご存知の方も多いでしょうけど、何事も基本から、ということで。

「Ajax」の正式名称は、「Asynchronous JavaScript + XML」といいます。
直訳すれば、「非同期通信するJavascript と XML の技術の集まり」といったところでしょうか。
(ちなみに、略称の「Ajax」の読み方は、「エイジャックス」とか「アジャックス」が主流のようです。)

いきなりコムズカシイですが、その実体は、・・・ただの“Javascriptの塊”です。

はて?
ただの“Javascriptの塊”に何ができるんでしょう? 何がそんなにスゴいんでしょう?

・・・と、その前に、すこしWebの世界の思い出話を紐解いてみましょう。

Javascript黎明期

実は、Ajaxを構成する「Javascript」「XML」「非同期通信するJavascript」という技術自体は、別に、目新しい技術でもなんでもありません。
「Javascript」に至っては、それこそ、Web(インターネット)の世界が普及し始めた頃から、すでに存在している技術です。

当時、Javascript の出現により、動きのないタダのHTMLファイルだけのWebサイト(ホームページ)に対して、様々な動きやギミックが付けられるようになりました。
それにより、ユーザーに使いやすいWebサイトをつくることができるようになりました。

ただ、当初のJavascriptはまだ黎明期で、今で言う「Google Map」のようなホームページを作ることは非常に困難でした。
なにせ、
「Webページ内で、再読込することなしに、地図をドラッグする」
なんてフクザツカイキな動き、当時のJavascriptだけで実現できる人は、そうはいませんでした。
もちろん、当時だって、やろうと思えばJavascriptでも実現することはできたと思います。
でも、そう“簡単”にはいきませんでした。

簡単にいかなかった理由の一つとして挙げられるのが、
「ブラウザ(のバージョン)ごとに、Javascriptの命令の書き方や挙動が異なる時がある。」
という事実でした。
例えば、全く同じJavascriptを書いたとしても、IE5ではうまく動いても、IE6では全く動かなかったりしたわけです。
(その逆のパターンもありました。)

当時は、まだ「Web標準」という言葉が定着していなかった時代でした。
各社・各団体が、それぞれ独自色を備えたブラウザを提供していた時代だったのです。

この事実は、Webサイトの作り手としては、大変な労力を強いられることになりました。

Webサイトを公開したとしても、ユーザーとしては、どのブラウザで閲覧するかは自由です。
つまり、作り手としては、ユーザーがどのブラウザで閲覧するか分からないわけです。
前述の通り、ブラウザが異なれば、動きが変わってしまうかもしれません。

どんなブラウザでも同じような動きになるように対応するのであれば、まず、各ブラウザに合わせて、Javascriptの命令を書き換えなくてはならず、かつ、ちゃんと動くか全てのブラウザで確認していかなくてはならなかったのです。
メジャーで使われているブラウザに限定したとしても、バージョン違いも含めれば、最低2~3個以上のブラウザに対応する必要があります。

極めてメンドーです。
「Webページ内で、再読込することなしに、~」のような複雑な動きをつけるとしたら、そのメンドーさは莫大になります。

他にも、メンドーだった理由として、
「特殊なHTMLの使い方をしないといけなくて、それによりWebページの作り方が多少制限されてしまう。」
「まだ技術的にバグが多く、それを回避するための労力を必要としてしまう。」
などが挙げられます。

・・・そのメンドーさ加減を“劇的に”解消したのが、「Ajax」でした。

Ajax の登場

「Ajax」という言葉が流行りだしたのは、「Google Map」の登場がきっかけでした。

思い出してみてください。
「Google Map」の登場以前だって、地図検索できるWebサイトはいくらでもあったはずです。
でも、「Google Map」が他社・他団体のサービスより優れていたのは、
「一度表示した地図を、“再読込なしで”ドラッグして動かしたり、拡大・縮小できること」でした。
このインタラクティブかつ軽快な動きは、当時のユーザーの度肝を抜きました。(私もその一人です。)

同時に、当時のWeb開発者にとっては、
その「Google Map」が、特別な新技術を使って作られたのではなく、
元からあった「Javascript」を応用したに過ぎないことを知ったときには、さらに度肝を抜かれたことでしょう。

この出来事は、Webサイトの新たな可能性を開いた、とも言えます。
この「Google Map」の登場が、Ajaxの知名度を爆発的に増加させてくれました。

次回予告

次回は、Ajaxの中でも比較的とっつきやすい jQuery や Thickbox などの活用例をもとに、
Ajax の導入の仕方とその容易さについてご紹介できればと思います。


<<前へ 次へ>>