PSO2公式 RSS
    --------(--)

    スポンサーサイト

    上記の広告は1ヶ月以上更新のないブログに表示されています。
    新しい記事を書く事で広告が消せます。
    2015-12-02(Wed)

    jQueryは便利だった

    こんにちは、saltです。

    先日、非同期通信がしたかったので、
    ようやくjQueryに手を出しました!!
    ajaxのついでのつもりだったんですがね・・・

    率直に感想を言うと、

    すごい便利

    てかjQueryはjavascriptのライブラリなので、
    書き方は変わるものの、使っていて抵抗はありませんでした。
    今まで使わなかったのが悔やまれますね。

    しかも、導入方法が
    <script type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>


    を書くだけ!!

    また、私があまり得意ではない、
    異なるブラウザへの対応なども勝手にやってくれるので、
    そこらへんもあまり気にせずやれるのもいいですね。

    なにより、各コード量が少なくてすむ!

    例えば、id が salt の要素を指定したいとき、
    javascript:
    document.getElementById("salt")

    jQuery:
    $("#salt")

    コレだけでも、短いことが分かります。
    書く量が増えることを考えると、明らかにjQueryのほうがいいですね。

    最後に、
    上のコードを見てもらうと分かるかもしれませんが、
    cssと同様の部分があるのも、大変助かります。

    これからは使う機会が増えてくるかもしれないです。

    今回はこの辺でノシ
    2015-11-25(Wed)

    クラス追加・削除による擬似クラス維持


    こんにちは、saltです。

    最近はcss・htmlいじりにはまっています。

    pso2チームブログで複数枚の画像がスクロールするものを作ってみました。
    完成版?はこちら (ヘッダー部分がそうです)

    今回は、その時つまづいた部分を書いて置きます。

    といっても何個かあったので、ボタンで画像が切り替わる部分のみにします。
     ↓この部分





    ボタンを押すとボタンに対応した画像までスクロールするというもの。
    ただ、↑のサンプルを使ってみると分かると思いますが、
    ボタンの色で現在位置を示してはいるものの、一度通ると色が固定されてしまっています

    色が変わった後、マウスをボタンの上にあわせてもhoverが発動しないではないか!!

    最初は↓こんな感じで色を変えていました。
    element.style.backgroundColor = "#db7093";

    何が問題だったかというと、javascriptでstyleを変更すると、
    hoverなどの擬似クラスが反映されなくなるようです。上書きされるみたいな?

    そこで、試行錯誤の末、
    色を保存したクラスを追加&削除で変更すれば、
    hoverを保持したまま色変更ができることがわかりました。
    ググっても意外に出てこなかったので時間かかりました。
    (jQueryならすぐにできそうだったのですが、なんか負けた気がして・・・)

    cssで色変更のクラスを作ります
    .acolor{
    background-color:#db7093;
    }


    変更するときはこんな感じ↓
    // 色変更
    element.classList.add("acolor");
    // 元の状態に戻す
    element.classList.remove("acolor");

    classListを使ってクラスの追加・削除をしています。


    修正版がこちら↓




    しっかりhoverが維持されて、マウスを乗せた時に色が変わりますね。
    分かればなんということでもないですね。

    さて、ここまで書きましたが、jQueryだとhoverを直接いじれる関数があるようです。
    私はjQuery使ったことないんですよね(恥ずかしながら・・・)
    jQueryに乗り換えなければならないのですかね。
    短くかけるのはいいことのはずなんだけどな~乗り気になれない。
    ではまた~ノシ
    2015-11-20(Fri)

    Apaheとtomcatの連携とか2

    こんにちは。

    では、前回の続きから書いていきたいと思います。

    前回: Apaheとtomcatの連携とか

    tomcatの設定まで完了したので、次に行きます!!



    3.Apaheの設定

    httpd.confの編集をします。
    (C:/Apache/Apache2.2/conf/http.conf)

    c:/Apache2.2 と書かれている部分を自分のApache2.2がある場所に変更します。

    変更前変更後
    ServerRoot "c:/Apache2.2"ServerRoot "c:/Apache/Apache2.2"
    DocumentRoot "c:/Apache2.2/htdocs"DocumentRoot "c:/Apache/Apache2.2/htdocs"
    <Directory "c:/Apache2.2/htdocs"><Directory "c:/Apache/Apache2.2/htdocs">
    ScriptAlias /cgi-bin/ "c:/Apache2.2/cgi-bin/"ScriptAlias /cgi-bin/ "c:/Apache/Apache2.2/cgi-bin/"
    <Directory "c:/Apache2.2/cgi-bin"><Directory "c:/Apache/Apache2.2/cgi-bin">

    検索かけて変更するのがらくだと思います。

    通信するポートの設定をします。
    デフォルトでは80番を使用して通信しています。
    このポートを使っているアプリケーションがない場合はそのままでいいですが、
    テストもかねて、今回は10001番に変更します。

    Listen 80  ⇒ Listen 10001 に変える

    次に、ServerNameを設定します。
    ローカルでやる場合は特に関係ないですが、付けておいたほうがいいようです。

    デフォルトでは、
     #ServerName www.example.com:80
    となっており、適応されていません。

    そのため、以下のように変更します。
     ServerName localhost:10001

    外部に公開する場合は、www.なんとか.co.jp とかになりますがね。

    ここまでで、一区切りです。
    Apacheを起動させて見ます。
    コマンドプロントで、
    C:/Apache/Apache2.2/bin へ移動

    % httpd

    と入力すると、おそらく処理が戻ってこないはずです。
    その状態ならOK

    ブラウザ上で http://localhost:10001 と入力します。
    「It works!」 と表示されれば大丈夫なので、
    コマンドプロント上で Ctrl と C を同時押ししてApacheを終了させます。



    4.Apacheからtomcatへ処理を送るための設定

    mod_proxy_ajp が標準で装備されており、かなり簡単に設定できます。

    Apacheのhttpd.confを再度編集します。

    #LoadModule proxy_module modules/mod_proxy.so
    #LoadModule proxy_ajp_module modules/mod_proxy_ajp.so

    #を消して、モジュールを使えるようにします

    LoadModule proxy_module modules/mod_proxy.so
    LoadModule proxy_ajp_module modules/mod_proxy_ajp.so


    最後に、tomcatへ処理を飛ばすために、
    httpd-proxy.confを作成し、その中に以下のように記述します。

    <Location /test>
    ProxyPass ajp://localhost:8009/test
    </Location>

    testの部分は、tomcatの設定時に使ったものを書きます。

    配置 c:/Apache/Apache2.2/conf/extra/httpd-proxy.conf

    httpd.confがhttpd-proxy.confを読み込めるようにパスを通します。
    httpd.conf内の一番下に以下を記述

    Include conf/extra/httpd-proxy.conf

    これで全ての設定が終了しました。



    5.サーバの起動

    tomcat→Apacheの順にサーバを起動します。
    (停止するときは、Apache→tomcatの順)

    その後、ブラウザで http://localhost:10001/test
    と入力し、

    「Successfully!」 が表示されれば成功です。


    ~あとがき~
    Apacheとtomcatの連携自体は、かなり前からあって、
    他のブログとかでもやり方が紹介されていたので、書く必要はなかったのですが、
    自分が忘れたときのために手順を書いておきました。
    サーバ立てる機会とかそうそうないと思うので・・・

    長々と書きましたが、やってみると結構簡単です。
    一度挑戦してみてはいかがですか。

    ではまた次回~ノシ
    2015-11-19(Thu)

    Apacheとtomcatの連携とか

    こんにちは、saltです。

    最近Apacheとtomcatを使用したサーバを立てたので、
    どう導入したか書いておこうかな。

    なぜApache、tomcatを連携するのかは、
    いろんなところで説明あるので、簡潔に・・・

    Apache: サーバとして優れている。
    tomcat: Java Servletを動かす。 サーバとして機能はするが簡易的なもの。
     ⇒ Apache + tomcat: 強い(確信)

    技術的には、かなり前からあるのに、今でも使われてるってすごいですよね。

    と、前置きはこのくらいにします。

    ~使用したバージョンとか~
     Apache 2.2
     tomcat 7.0.42
     OS: Windows7



    1.Apache と tomcatをダウンロード&インストールします。

     Apache: http://httpd.apache.org/
     
     ※MSVCR110.dllがないと動かせないので、Visual Studio 2012 更新プログラム 4 の Visual C++ 再頒布可能パッケージ からVC++をインストールします。標準で入っている可能性もありますが・・・

     tomcat: http://tomcat.apache.org/

    インストールは、zipなら展開して好きなディレクトリに保存するだけです。
    C:ドライブ直下とかが分かりやすいと思います。
    インストーラーなら、ダブルクリックで実行して、指示に従ってインストールします。

    私はzip展開でやったので、それで説明していきます。



    2.tomcatの設定

    eclipseなどで、jsp/servletの 「.warファイル」 を作成します。 
    (説明しやすいように test.war にします

    面倒な方は↓使ってください


    warファイルをtomcatのwebappsフォルダに入れます。
    C:/tomcat/webapps/test.war

    tomcatを起動するために、
    環境変数を追加します。
    (スタート→プログラムとファイルの検索→環境変数と入力→環境変数を編集)

       変数    :          値
    JAVA_HOME  :  C:/program Files/Java/jdk 1.8.0_05
       Path    :  C:/program Files/Java/jdk 1.8.0_05

    Javaのjdkをそれぞれ追加します。
    人によってjdkのバージョンが違っていたり、インストール場所が違うと思います。

    次に、tomcat-users.xmlを変更します。
    (C:/tomcat/conf/tomcat-users.xml)

    <tomcat-users>
    <role rolename="manager-gui"/> // 追加
    <role rolename="admin-gui"/> // 追加
    <user roles="tomcat,manager-gui,admin-gui" password="tomcat" username="admin"/>    // 追加
    </tomcat-users>

    passwordとusernameは好きに決めてください。

    tomcatを起動します。
    コマンドプロントから
    C:/tomcat/bin へ移動します。

    % startup.bat
    (shutdown.batで停止)

    と入力し、tomcatが起動すれば概ね設定完了です。 
    サービス化とかもすると楽ですが、それはまた後ででいいでしょう。

    後は、ブラウザで http://localhost:8080/ と入力して、tomcatのページが出ればOK

    ついでに, http://localhost:8080/manager/html も起動してみます。
    passとusernameを聞かれるので、設定したものを入力します。
    管理ページが出ればOK

    test.warファイルで作ったページも開いてみます。
    http://localhost:8080/test と入力。
    「Successfully!!」 が表示されればOK


    最後に、Apacheとの連携をするために、
    8080ポートでの通信がされないように server.xml を変更します。
    (C:/tomcat/conf/server.xml)

    <Connector port="8080" protocol="HTTP/1.1/"
    connectionTimeout="20000" redirectPort="8443" />



    <!--
    <Connector port="8080" protocol="HTTP/1.1"
    connectionTimeout="20000/" redirectPort="8443" />
    -->

    先ほど繋がった http://localhost:8080/ も繋がらなくなっているはずです。

    これで、tomcatの設定は終わりです。
    tomcatを停止させます。

    コマンドプロントから
    C:/tomcat/bin へ移動します。

    % shutdown.bat


    今日は疲れたので、続きはまた明日書きます。
    画像とか乗せればよかったな~

    ではまたノシ

    2015-11-13(Fri)

    RSS Reader 導入してみた

    こんにちは、pso2esで44回スクラッチまわしたのに何も出なかったsaltです。

    せっかくメダルためたのに、☆11が一枚しか出ないとか・・・
    聞いた話によると、acスクラッチでも確率は変わってないんだとか・・・
    それ聞くと、acのほうはもっとやりたくないですよね。

    とまあ、スクラッチに対する愚痴はこのぐらいにしておいて
    このブログのある部分が変わったの気づきましたかね。

    そう!!
    RSS Reader導入しました。

    すごい、いまさら感です。

    RSS Readerとは・・・
     「RSSリーダーとは、Webサイトを巡回してRSS/Atom形式の更新情報を受信し、リンク一覧の形で表示するソフトウェア。(IT用語辞典 e-Wordsより)」
    だそうです。

    つまり、よくみるサイトの最近の更新情報がそのページにいかなくても分かるってことですね。

    んで、私もついにそんなRSS Readerを導入したんですよ。

    今まで導入しなかったのは、
    ブログに置いておく必要のある更新情報がなかったわけでして。

    では、どうして導入しようと思ったのかというと・・・


    チームブログの方で少し動きがありまして、
    そっちのブログのほうで私のブログのRSSを入れようかなと思ったのが発端です。


    チームブログのほうのRSS Readerは、
     FeedWind を使って作成しました。

     ・貼るだけで使える無料ブログパーツ!(登録不要)
     ・広告なし!
     ・スクロール機能や、テンプレートでらくらく!

    結構楽に作ることができました。
    RSSのリンクを貼り付けて、項目を選ぶだけですからね。


    だだ、作ってみて思ったのですが、
    確かに、カスタマイズはそこそこできるのですが、
    日付の位置やオートリシェイプでのサイズ変更とか細かい部分はさすがにできなかったです。

    これが嫌だったので、
    このブログ内に、RSS Readerを自分で作ることにしました!!

    という流れです。


    ここから本題
    ではどうやって作ろうかなと思ってぐぐったところ、
    なかなかいいブログがあるではないですか!

    Google Feed APIを使って外部ブログのRSSを表示する方法

    ※2015/12/02 現在:
    Google Feed API は使用不可になりましたのでご注意を!!


    タイトルのとおり、Google Feed APIを使用してRSSを表示します。
    これを利用させてもらいました。

    作成順は、

     1.javascriptのソースコード書く
       ↓
     2.htmlに必要なコードを書く
       ↓
     3.cssを好みに合わせて変更する

    こんな感じです。

    1.javascriptのソースコードを書く
    javascriptのソースコードは省略します。
    大本はそのままですからね。

    2.htmlに必要なコードを書く
    RSS Readerを入れたい場所に埋め込みます。


    PSO2公式 RSS







      あと、作成したjavascriptも忘れずに置きます。
      場所は headタグ の中に入れます。
      追記:最近では表示速度の関係からbodyの最下部に配置するのが一般的でしたね。


      3.cssを好みに合わせて変更する
      ここは、人によって違いますが、
      一応、私の設定を載せておきます

      /* Start RSS Reader Layout */
      div#rssreader{
      margin-right: 30px;
      margin-left: 30px;
      margin-top: 30px;
      margin-bottom: 30px;
      height: 200px;
      width: auto;
      border-bottom-width: 1px;
      border-left-width: 1px;
      border-bottom-style: solid;
      border-left-style: solid;
      border-bottom-color: #f5deb3;
      border-left-color: #f5deb3;
      }

      div#rssreader .rssheader{
      height: 20px;
      text-align: left;
      color: #CC6600;
      background-color: #fffacd;
      border-width: 1px;
      border-style: solid;
      border-color: #f5deb3;
      }

      div#rssreader .rsscontent{
      height: calc(100% - 20px);
      width: auto;
      white-space: nowrap;
      overflow-x: auto;
      overflow-y: auto;
      }

      .rsscontent ul li{
      margin-top: 5px;
      margin-bottom: 5px;
      margin-right: 1px;
      text-align: left;
      }
      /* End RSS Reader Layout */


      今は、一つのRSSしか入れてないですが、
      ボタン切り替えで複数実装するのもありですね。

      それについては今後の私のやる気しだいです・・・

      では今回はこの辺でノシ~
       
      プロフィール

      Author:salt
      saltの自由なブログへようこそ!
      週一ぐらい?で更新してます。

      ・好きなこと
         ゲーム
         アニメ鑑賞(ゼロ魔とか

      ・好きなゲーム
         太鼓の達人
         ドラゴンクエスト(Ⅹ以外は好き
         イース
         軌跡シリーズ
         etc...


      PSO2もやってます。プレイヤー名はSALT40(SALT400)です。
      シップは8です。
      よかったらフレ登録してね。

      PSO2関連のコメントあればうれしいです。
      PSN:saltp40

      カテゴリ
      最新記事
      最新コメント
      月別アーカイブ
      検索フォーム
      リンク
      スポンサーサイト
      上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。