サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
デスク環境を整える
www.geekzshu.com
ajaxを使うと、Javascriptを使ってホームページを再度読み込まなくても、サーバーとデータをやり取りをして表示を変更することができます。 .loadを使う サンプルでnews.htmlの中の#news要素を読み込ませます。 $(function(){ $("button").click(function(){ $(".load").load("news.html #news"); }); }); $("button").click(function(){ 要素buttonをクリックしたときに命令が行われます。 $(".load").load("news.html #news"); セレクタで選んだ.loadの部分に news.htmlの#newsを読み込ませて表示しています。 別ページにある部分を読み込ませたいという時にも使えますよ。 .ajaxを使う サーバーからのリクエストやレ
今回は、phpの軽量フレームワークとして有名なcodeigniterを使って簡単にウェブサービスを作っていく方法を紹介していきます。 ○公式サイト ○公式ユーザーガイド codeigniterと他のフレームワークとの比較 phpで一番有名なフレームワークといえば、cakephpなのではないでしょうか? cakephpはruby on Railsの考え方を引き継いでいるので、大規模なウェブサービスをつくりあげやすい。 ですが、決められた構文や学ぶことが多く、まず使えるようになるまでに時間がかかります。さらに自由度が少なく、簡単なウェブサービスを作るときでも、多くのプログラムが動くので、ページのレスポンスが遅く感じられます。 その点、codeigniterは学ぶことが少なく、自由度が高いため、phpを知っていれば、簡単にウェブサービスを構築することができます。また軽量なフレームワークであるため
phpをやっていると配列を読み込んでデータを表示することはありませんか? 全部読み込まなくて、5個ぐらいでよかったりするのに foreachでは指定できない…。そんなときの書き方です。 $rssが配列です。 if文を使って、5個読み込んだら分岐させてあげます。 $i = 0; $kiji = 5; foreach ($rss->items as $item ) { if($i >= $kiji){ break;} else{ $title = $item['title']; $link = $item['link']; echo "<li><a href="$link">$title</a></li>n"; $i++; } } wordpressとかでも使えます。 <?php if(have_posts()): ?> <?php $count =0 ;?> <?php while(have
ウェブサイトの中で認証が必要なページを作るのは今や必需品となりましたよね。 ということでここではいろいろな認証を解説していこうと思います。 Rails3.1以上でのbasic認証 Rails3.1から簡単にbasic認証ができるようになりました。 ※basic認証は簡単にページの利用制限を行うことができます。 今回はnameをgeekz、passwordをpassと設定しています。 app/controllers/????_controller.rb class ????Controller < ApplicationController http_basic_authenticate_with :name => "geekz", :password => "pass" def index end end たったこれだけで、 ????Controllerを使うページは全てbasic認証がか
phpのフレームワークcodeigniterとライブラリのSimpleLoginSecureを使って簡単なユーザー認証管理を紹介します。 下準備 codeigniterを使う準備は入門編で ライブラリのSimpleLoginSecureをダウンロードします。 赤枠からダウンロードしてください。 詳しくはこちら versionの違いでの変更 SimpleLoginSecureのライブラリがCodeIgniter 1.6.3対応なので、現在最新は2.0と書き方が違う部分を変更します。 SimpleLoginSecure.php $this->CI->db->getwhere ↓ $this->CI->db->get_where 2箇所あるので変更してください。 SimpleLoginSecureを使えるようにする ・application/libraries の中に書き直したSimpleLog
今回は、codeigniterを使ってwebアプリケーションの基本であるデータの入力、表示、編集、削除ができるようになるために、簡単なブログを作っていきます。 codeigniter入門の初期設定編はこちら テーブルの作成 まずはphpmyadminを使ってブログのデータを入れるテーブルを作っていきます。 使い方を詳しくは知るにはこちら>> phpmyadminでテーブル作成 ○sql文で書くと下記みたいな感じです。 CREATE TABLE `blog_data` ( `id` int(7) NOT NULL AUTO_INCREMENT, `title` varchar(60) DEFAULT NULL, `description` text, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8; ブログの投稿部分を作成 デー
railsには簡単に管理画面を作れるライブラリactive_adminがあります。 インストールの仕方から簡単にブログを作るところまで解説していきます。 active_adminのインストール Gemfileにライブラリ名を書きbundleでインストールします。 $vi Gemfile ~略~ gem 'activeadmin' ~略~ $bundle install これでライブラリのインストールは完了です。 基本的な使い方 Railsにactive_adminをインストールします $rails g active_admin:install 最後に ======================================== Some setup you must do manually if you haven't yet: 1. Setup default url options
フリーランスのデータベースの「wordpress」についての投稿一覧です。
今回は、よく見かける画像表示を簡単におしゃれに見せれるpluginであるlightboxをご紹介。 lightboxはもともと、prototype.jsという違うjavscriptlibraryで作られていたのですが、Lokesh Dhakarによってjqueryの軽量版ができているみたいです。感謝感謝→jquery lightboxのサイト Get the new versionをクリックしてダウンロードします。 必要になるのがjsとcssとimagesのフォルダです。 まずはサーバーにjsとcssとiamgesをあげ、下記のタグを拡大表示させたいページの部分に付け加えていきます。 jqueryの部分 <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/
jqueryで作るプルダウンメニューを以前(こちら)紹介したのですが、今回は2階層プルダウンをするやり方です。このやりかたで何階層までも作っていけます。 html <ul id="menu"> <li><a href="">メニュー</a> <ul id="sub"> <li><a href="">サブメニュー</a></li> <li><a href="">サブメニュー</a></li> <li><a href="">サブメニュー</a> <ul id="sub"> <li><a href="">サブサブメニュー</a></li> <li><a href="">サブサブメニュー</a></li> <li><a href="">サブサブメニュー</a></li> </ul> </li> </ul> </li> <li><a href="">メニュー</a> <ul id="sub"> <l
ここで使っているのが $("セレクター").fadeIn(スピード) $("セレクター").fadeOut(スピード) スピードは slow・何も書かない・fast で 600・400・200ミリ秒 スピードを変更でき 数字を入れることで?ミリ秒で表示、非表示スピードを調整できます。 プレビューはslowで0.6秒です。 html <button id="fadeIn">表示</button> <button id="fadeOut">非表示</button> <p><img src="img.jpg" /></p> $(function(){ $("button#fadeIn").click(function(){ $("img:not(:animated)").fadeIn("slow"); }); $("button#fadeOut").click(function(){ $("im
jqueryは、javascriptでやっていることをより簡単なプラグラムでできるようにしてくれています。 そのため、ちょっとした書き方の違いで裏でやっている作業が違います。 高速化するためには 1、セレクタで同じものを選ぶ時は変数に代入 2、classだけのセレクタは使わず要素を前に書く(IE対策) 3、#id要素を極力使う などがあります。※jqueryのセレクタスピード比較 スピードを早くするための書き方をjqueryとjavascriptを比較して考えてみます。 要素で選ぶとき div要素のフォントの色を赤く変更します。 jquery $(function(){ $('div').css('color','#f00'); }); javascript window.onload = function(){ var elements = document.getElementsByT
フリーランスのデータベースの「Jquery」についての投稿一覧です。
ファイルのアップロード用ライブラリとしてよく使われるCarrierWaveを使って簡単アップロードを紹介します。 CarrierWaveをインストール $vi Gemfile Gemfileに下記を書いてライブラリを追加します。 gem 'Carrierwave' ライブラリをインストールします。 $bundle install 基本的な使い方 まずはcarrierwaveを使えるようにします。 アップロード用のクラスの生成 $rails generate uploader image するとImageUploaderというクラスが作られます。 create app/uploaders/image_uploader.rb 画像のURLを保存するテーブルの列を追加 $ rails g migration add_image_to_テーブル名 image:string modelsのファイルに
通販サイトなどのトップページでよく使われる商品を紹介し、アニメーションで別の商品に切り替えていくようなデザインを簡単にjqueryプラグインを使って表現することができるツールです。 jquery featureList→公式サイト サンプルデータ ※サイトが消えているので以前のサイトを保存しているサイトから参照 表示まで時間がかかるかも… プレビュー <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.6.1");</script> <script type="text/javascript" src="jquery.featureList-1.0.0.js"></script> <
wordpressで記事が増えてくると次のページへだけでは、ユーザービリティ上あまりやさしくありません。 今回は、下のような次のページへだけではなくページ数できりかえれる様にする方法を解説します。 wordpressでのタグ <?php $pagemax = $wp_query->max_num_pages; $current = $paged; if(!$current){$current = 1; } ?> <?php previous_posts_link('<'); ?> <?php for($i=1; $i <= $pagemax; $i++): ?> <?php if( $i == $current): ?> <span><?php echo $i; ?></span> <?php else: ?> <a href="<?php echo get_pagenum_link
wordpressでの次のページや前のページへ進むリンクを作るときは、 次のページが内容が複数あるページなのか、個別のページなのかで ○記入する場所 ○postsかpost が違ってきます。 トップページ(is_home)、カテゴリページ(is_category)の場合 <?php next_posts_link('次のページ»'); ?> ↓上記のタグをテーマに記述することで <a href="www.wwww.www/www/">次のページ>></a> が吐き出されます。 <?php previous_posts_link('« 前のページ');?> ↓上記のタグをテーマに記述することで <a href="www.wwww.www/www/"><<前のページ</a> 個別ページ(is_single) の場合 個別ページの場合、ループの中に記述しなければなりません。 ○ループ <?php
さくらのVPS(CentOS)を使ってruby on railsの環境を構築します。 まずはrubyのインストール yum install -y rubyでもいいのですが、インストールできるバージョンが1.8.6なので 1.8.7以上じゃないとRails3をインストールできないので makeでコンパイルして新しいバージョンをインストールします。 cd /usr/local/src wget ftp://ftp.ruby-lang.org/pub/ruby/1.9/ruby-1.9.2-p290.tar.gz tar xvzf ruby-1.9.2-p180.tar.gz cd ruby-1.9.2-p290.tar.gz ./configure --prefix=/usr make make install wget→データをダウンロード。 tar xvzf→圧縮データを解凍。 ./con
もう一ページ読んで頂くために、最新の記事をサイドバーに表示させる方法 wordpress関数によって書き方が変わってきます。 例:最新の記事を5件表示させる wp_get_archives 月別や日付別、最新記事順に記事のタイトルを表示することができる関数です。 <?php wp_get_archives('type=postbypost&limit=5');?> type(日付、最新記事、タイトル文の文字コード)を指定して使います。 最新記事の場合:type=postbypost 年別なら:type=yearly、月別なら:type=monthly 週別なら:type=weekly、日別なら:type=daily limitは記事数、今回は5件表示されます。 query_posts wordpressのループを選別して表示させるのに絶大なる力があるquery_post(※詳細) <?ph
apacheは初期状態から少し設定するだけで、メモリの消費量を減らし、スピードを早くすることができます。 変更は基本的にhttpd.conf上を書き換えていきます。 いらないmoduleを消す httpd.confを開いて、 /LoadModule でモジュールを探します。 使っていないモジュールの頭に#をつけて動かさないようにします。 例えばこんな感じです。 #LoadModule userdir_module modules/mod_userdir.so 基本的にあまり使わないモジュール群 mod_userdir ユーザーファイルでホームページ表示をするためのモジュール /home/user名/????とかでホームページを表示していなかったらいりません。 mod_status apacheサーバの状態を監視するためのモジュール いつもサーバーの状態を監視する必要性がないかたはいりません
jqueryの基本はセレクターでhtmlの要素や属性を選び操作することで、動きのあるホームページを作ることが可能です。 $("セレクター").jquery命令 そこで、今回は、 セレクターの方法を紹介します。 スタイルシートでよく使う選び方 スタイルシートでよく使う要素やID、classを使って選ぶ方法 $("div"),$("div#header"),$("div#header p"),$("#nav ul"),$("#nav ul,#header") 同じ要素の並びから一つの要素を指定する方法 ・last-child ・first-child ・nth-child htmlの例(1) <ul> <li id="first">変更前</li> <li id="second">変更前</li> <li id="last">変更前</li> </ul>
一つ一つコマンドを打っていくのはめんどくさいですよね。 もちろん、簡単にできるショートカットキーやコマンドは数多くはじめから用意されています。 初心者サーバー管理者が知っていたほうが早くなるキーやコマンドを解説します。 Tabキー コマンド上でTabキーを押すと補完してくれる機能があります。 例えば、 $ls test report rack $cd re ここで、Tabキーを押すと $cd report と次はreportが来ると考えれるときは補完してくれるのです これが $cd r でTabキーを押してもピーと音ができて、補完されません。 そんなときは、Tabキーを2回押すと report rack とそれ以降に考えられるフォルダを表示してくれます。 カーソル移動 コマンドを入力時にカーソルの移動もめんどくさいですよね。 たとえば、 $rails g scaffold user nam
ruby on rails では簡単にtwitterやfacebookと認証ができるライブラリがあります。 それがomniauthです。 Twitterdeveloperに登録する Twitter Developer 上記から入って登録していきます。 今回必要なのは赤枠でくくっている。 ・Consumer key ・Consumer secret ・Callback URL※戻り先のURL Facebookdeveloperに登録する Facebook Developer 上記から入って登録していきます。 ここで必要なのは赤枠の部分です。 ・App ID ・App Secret Gemのインストール gemでomniauthをインストールします。 gem 'omniauth' 後は、ライブラリをインストールします。 bundle install nokogiriのinstallエラー li
nginx+passengerのインストール gemを使ってpassengerをインストールします。 gem install passenger curl-develのインストールができていない場合は yum install curl-devel nginxのモジュールをインストールします。 passenger-install-nginx-module 基本的にほとんどEnterで進めて大丈夫です。 カスタムしたnginxかスタンダードのnginxをインストールするか聞かれます。 カスタマイズを別段する必要がなければ、1を選んでください。 最後にnginxに記入する必要がある部分を聞かれます。 上記のようにnginx.confを書き換えます。 vi /opt/nignx/conf/nignx.conf ・rootの部分にrailsのpublicを指定します。 ・passenger_enab
ajaxとは、ページ全体を再度読み込みをせずに、一部だけを非同期で切り替える手法です。 これを行うことで、ユーザーがページが切り替わるときにかかるストレスを減らせます。 はじめに1.htmlを読みこみ、下の1、2、3、とクリックすることでページを2.html、3.htmlと切り替えます。 サンプル 解説 html <div id="photo_conteiner"> <p id="title">フォトギャラリー</p> <div id="photo_cont"> <p class="loading"><img src="loading.gif" /></p> </div> <ul class="pager"> <li><a href="1.html">1</a></li> <li><a href="2.html">2</a></li> <li><a href="3.html">3</a><
地方の店舗もホームページを持つのが当たり前になってきた昨今、 出来る限りお金をかけずに集客したいですよね。SEO+こつこつ集客ということで、費用対効果が期待できるいろんな事をまとめてみました。 必須の登録サイト やはりgoogleプレイスとyahooロコの登録は必須です。 googleプレイス googleマップに表示されるサービス、地域の検索キーワードのときに検索にも表示されます。 電話確認か、はがきによる住所確認が必要です。店舗<ホームページがあるなら必須ですね。 ・googleプレイスサイトへ yahooロコ yahooマップに表示されるサービス、yahooロコも、地域の検索キーワードのときに検索にも表示されます。 無料なのですがクレジットカードの登録が必須になります。 ・yahooロコサイトへ 業種・地域別登録サイト 業種や地域によって登録できるポータルサイトを紹介します。 食べロ
wordpressにカレンダーを表示するのは簡単 <?php get_calendar(); ?> のタグをメニューに入れるだけで <table id="wp-calendar" summary="カレンダー"> <caption>2011年2月</caption> <thead> <tr> <th scope="col" title="月曜日">月</th> <th scope="col" title="火曜日">火</th> <th scope="col" title="水曜日">水</th> <th scope="col" title="木曜日">木</th> <th scope="col" title="金曜日">金</th> <th scope="col" title="土曜日">土</th> <th scope="col" title="日曜日">日</th> </tr> </
デフォルトである検索だけではなく、カテゴリやカスタムフィールド、タイトルなどで絞り込んで検索したいときに使えるpluginが WP Custom Search インストール方法 プラグインの中から検索してWP Custom Searchをインストールします。 日本語に変換 日本語に変更はこちら まずは上記をダウンロードして、解凍します。 その中にあるwp-custom-fields-search-ja.moを /wp-content/plugins/wp-custom-fields-search の中にFTPを使ってアップします。 設定の仕方 wordpressの管理画面→設定→WP Custom Fields Searchをクリック。 右上に表示されているテンプレート用のコードか投稿ページ用のタグかを使うことで検索まどを表示することができます。 テンプレートコード <?php if(fu
2011年8月28日 Railsでomniauthを使ってtwitter,facebookの簡単ログイン認証
次のページ
このページを最初にブックマークしてみませんか?
『フリーランスのデータベース|ウェブデザイナーのプログラム初心者入門サイト』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く