ラベル ホームページ:webdesign の投稿を表示しています。 すべての投稿を表示
ラベル ホームページ:webdesign の投稿を表示しています。 すべての投稿を表示

2015年10月20日火曜日

PHPの正規表現で文字列を抽出


ある法則で書かれた文章をphpを使って文字列を抽出する方法です。(備忘録)
デザイナーであるため良く忘れますw

置換にはpreg_replaceを使いますが、これでも抽出はできます。この方法はまた説明します。

ここではpreg_matchでターゲットとなる文字列を正規表現で抽出する方法です。

$string = '<img src="http://nonull.jp/img/001.png" />';
preg_match('/src="([^\"]+)"/u',$string, $match);
$var = $match[1];

画像のパスを取得したい場合の記述です。
$varにはhttp://nonull.jp/img/001.pngが代入されます。

また、ページ全体などある規則で記述されている内容を抽出したい時もあると思います。
そのようなときはpreg_match_all関数を使います。

$string = "<div>1</div><div>2</div>";
preg_match_all("/<div>(.*?)<\/div>/", $string, $matches);
foreach($matches[1] as $var) {
 echo $var;
}

この場合$varに12と代入されます。
通常<div>は単体で使われていません。
<div>が入れ子になっていたり、class属性が入っていたりもしますので
二行目の正規表現を少し変えたりする必要があります。
三行目の$matchesは$matches[0]と変えると
$varには<div>1</div><div>2</div>が代入されます。

要は[0]の場合は/~/のマッチした情報
[1]の場合は(~)のマッチした情報となります。

正規表現はわかっておくとperlやjavascriptなどにも使われていますので
理解しておくといいかもしれません。
デザイナーにとってはとっつき辛いですがねw

ホームページ制作 東京!null ホームページ制作 東京!null

2015年10月15日木曜日

Coreserverで.htaccessを使ってmod_rewriteを書く【解決】

coreserver コアサーバー


Coreserver(コアサーバー)はバリュードメインが運営しているレンタルサーバーです。 2014年にサーバー全体に大幅なバージョンアップがありました。
安く運用できるため、未だに使ってますが仕様が色々と特殊です。

mod_rewriteを使おうと思いかなり経ってしまい色々調べましたが、
Wordpressを使った場合という前提の内容が多く、どうもこちらの目的と違います。
Wordpress特化でなく、もっと汎用的に使いたいと思っていたからです。

通常のサーバーはウェブルート(public_htmlなど)に.htaccessというテキストファイルを作成し
そのファイルをアップロードすればいいのですが、なぜか、サーバーエラー 500が起こったり
動いているように見えて、not foundになったり試行錯誤。
ようやく解決しました!

要はサーバー仕様のせいですw

.htaccessは以下のように記載します。

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
### Straight Search
RewriteRule (.*)$ /mt/mt-search.cgi?IncludeBlogs=1&search=$1 [QSA,L]


1~3行目は割愛します。沢山検索できます。
4行目の#はコメントアウトするときに記載します。
一番重要となる5行目のRewriteRuleのところですが、括弧内の文字列がURL内にあるとき、$1に置換しますという意味です。
movabletypeを使っている方はよく分かると思いますが、文字列検索の一文です。
上記の.htaccessを新しく作ったディレクトリにアップロードします。(超重要)

例えば、keywordsというディレクトリにアップロードしたときは
/keywords/webdesign  というURLが /mt/mt-search.cgi?IncludeBlogs=1&search=webdesign
になります。 

なぜ、こんな事で長い期間頓挫してしまってたんだろうと自己嫌悪ぎみw

ホームページ制作 東京!null ホームページ制作 東京!null

2015年9月17日木曜日

HTML版 twitter、facebook、google+ ボタン

いいね グッド like good

忘れやすいSNSボタン。これも備忘録。
headタグに何も入れなくていい書き方のため、比較的楽に記述ができます。
例としてtwitter、facebook、google+の記述方法を記載します。

Twitter いいね
自分のタイムラインに表示されます。

<a href="https://twitter.com/share" class="twitter-share-button" data-url="①" data-lang="②" data-related="anywhereTheJavascriptAPI" data-count="③">④</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
①URLをhttpから入力
②ja(日本語)、en(英語)
③ボタンの形 左から vertical、horizontal、none
④適切な文言を入力 (通常「ツイート」など)


Facebook いいね
自分のタイムラインには表示されず、右側のリアルタイムフィードに表示されます。
また友達の中で関連性が高い人にフィードされます(2015/09時点)
シェアボタンの場合は以下の方法では不可能です。

<iframe src="//www.facebook.com/plugins/like.php?href=①URL&amp;send=false&amp;layout=②&amp;width=③&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=④&amp;appId=⑤" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:③px; height:④px;" allowTransparency="true"></iframe>

①URLをhttpから入力 ※URLはURLエンコード
 エンコードはここなどを参照ください。
②ボタンの形 左から box_count、button_count、button
③横サイズを数字(半角)のみで入力
④縦サイズを数字(半角)のみで入力
⑤appidはfacebook developerから取得し、15桁の半角数字を入力



google+ ボタン
G+された内容は自分のタイムラインに表示されます。
<g:plusone href="①" size="②"></g:plusone>
①URLをhttpから入力
②ボタンの形 左から tall、standard、medium


※サイトやブログサービスの仕様により適切に表示されない可能性がありますが
レンタルサーバーでのウェブサイトでは、ほとんど表示されています。
●参考サイト
SNSボタンの設置とカスタマイズ方法


ホームページ制作 東京!null ホームページ制作 東京!null

2010年11月22日月曜日

!null更新: 紙辞典

・依頼主:株式会社 弥生洋紙店
色々なメーカの様々な紙の情報をデータベース化してウェブサイトで再現しまし
た。管理システムを含め全てこちらで依頼された案件です。データベース化したの
で数千種類の紙、色を含めたら万レベルの紙の種類がご覧になれます。商品管理は
追加・編集・削除が可能になっています。
アクセスが30倍に上がりました