新たにブログのデザインを新しくしたので報告と苦労を書いて行きます。

現在制作しているテンプレートにちょっと変わった「新着情報リスト」を作りたかったので、色々考えた結果、日付だけを右側に固定で表示し、それにマウスが触れると内容が見れると言う様な物を作ってみました。

 
2014/08/22
    
2014/09/01

#new_view { position: fixed; top: 110px; left: 0px; }    /*親要素で、固定配置する*/

#new_view li{
 background-color: rgba(254,101,104,0.89);
 border-top-right-radius: 5px;
 border-bottom-right-radius: 5px;
 border-left: 8px solid rgba(64,145,238,1.00);
 padding-left: 10px;
 padding-right: 10px;
 color: rgba(255,255,255,1.00);
 line-height: 30px;
 margin-bottom: 20px;
 transition: .42s;
 width: 100px;
 height: 30px;
 overflow-y: hidden;        /*はみ出る内容を非表示にする*/
 margin-right: 10px;
 -webkit-box-shadow: 0px 5px 5px rgba(140,140,140,0.63);
 box-shadow: 0px 5px 5px rgba(140,140,140,0.63);
}
#new_view li:hover{
 background-color: rgba(255,143,144,0.90);
 height: 30px;
 width: 100%;
}
#new_view li:after{
 content: attr(data-new);
 margin-left: 10px;
 color: rgba(245,245,245,1.00);
}

今回紹介するのは、「Editor」です。


このEditorは様々なプログラミング言語に対応し、UIもシンプルで使いやすいです。
一応有料となりますが、たった1,000円なので大丈夫。

私自信主に、PHP/C等の開発に使う予定なので、十分です。

個人的に気に入っている機能

とうとうこの私にもMacが使える日が来るなんて!!
実際は昨日来たのですが、昨日はテンションが上がり基本Google+に居ましたww


今回Macを+竹内史 さんに譲ってもらい、今回初めてMacに触れました。
もうWinに戻る事はないでしょうね。


開梱して始めに思ったのが、「何このスタイリッシュなPCは。」と思いました。
それから電源を接続し、竹内先輩の言う通りマウスを接続し、いざ起動!!



初めてMacが僕に顔を見せてくれた時は涙が出そうになりましたね。
第一感想と言えば、フォントが美しくて文字を沢山書きたくなりました。




それから直にGoogle+へ行き、竹内先輩にお礼後、iTunes・App Storeの設定等済ませました。もちろんマウス、キーボード、トラックパットの設定も最初から済ませましたよ。

この日の為YouTubeで基本的な設定や操作方法を学びましたから。
いやーホントMacはいいですね。

実際に使ってみないと分からない物ですね。



YouTubeでの段階ではiPhoneアプリ作る為専用と考えていましたが、
余裕でMainPCですよwww

Winでは一応開発環境が整っているのでC#/VB/Javaとかの開発が主流になるかと思います。
Macは個人的に好きなC系統の開発が出来るのでそれらはMacでやりますね。


っと今回はここまでです。
次回また、Macについて色々お話をして行きたいと思います。

今回ローカルサーバー上で試しに"EC-CUBE"をインストールしてみました。
このEC-CUBEは何なのかと言うと、ネットショップを構築出来るシステムです。

機能もよく、独自で制作した商品等を出品するのもいいですね。

個人的に興味深いCMSなので、システム自体の解析をしてアルゴリズムを盗みたいと思います。w




こういった系統のオープンソースはホント魅力的ですよね。
私の知識・技術のほとんどがオープンソースのおかげです。
WordPressのアルゴリズムも参考になるし、OpenPNEにもお世話になりました。


っで今回まず、このシステムの魅力を説明します。


管理画面home


これは管理画面ホームのスクリーンショットです。この画面でも既に色々な情報が表示されていますね。

個人的にUIは何かヘタレですが、十分だと思います。

[システム情報]->[詳細]のリンクではPHPの詳細情報を閲覧可能です。

開発者であれば必要な情報ですね。





デザインの設定も可能です。
レイアウト設定ではコンテンツの配置を自由に変更可能で、[テンプレート追加]ではダウンロードしたテンプレートをセッティング出来る様です。

この際自分もテンプレートの制作のお勉強をして現在ある依頼をチャチャっと終わらせようかと思っています。

また、自分の参加しているグループでの利用も検討していて、自分らの力を合わせれば原型をとどめないぐらいカスタマイズ出来るかと期待しています。




お決まりのあのファイル


このファイルでは見て分かるとおり、MySQLのテーブル設定のクエリが記述されています。

って事はどこかのファイルにクエリをSQLに渡す処理があると言う事。

これも実に参考になる情報だ。
クエリ文も参考になるから得だらけだwww








ダウンロードコンテンツの販売も可能らしい。

今回jQuery Mobileテンプレート(スマートフォンテンプレート)の使い方をご紹介したいのですが、
まず以下のサイトにあるテンプレートを使用します。

jQuery Mobileのテンプレート


こちらのサイトでもある程度詳しく書いてありますが、ここでは更に詳しく書いて行きたいと思います


ではまずダウンロードして展開して編集する準備をしましょう。





展開したフォルダーには[images]と[index.html]と[style.css]のフォルダー・ファイルが含まれていると思います。このテンプレートでは大体1つのファイルで複数のページを作る事が出来ます。


コンテンツはdiv要素ごとに管理出来ます。

リンクの設定

この[id=""]部分だけは複重しない様にして下さい。

この部分が他と同じだと正しくリンクしませんのでご注意下さい。