2018年8月8日水曜日

ボタンをつかう Font Awesome


Font Awesome

https://fontawesome.com/


手順1. 以下のコードをコピー

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">


Font Awesomeの使い方

3. Font Awesomeの使い方

準備さえ済ましてしまえば、アイコンフォントを表示させるのはとても簡単です。

手順1:使いたいアイコンフォントを探す

アイコン一覧
アイコン一覧から使いたいアイコンを選びます。このページは何度も使うことになるかと思うのでブックマークしておくと良いでしょう。
使いたいアイコンをクリック
使いたいアイコンをクリックします。薄いグレイで表示されているアイコンは、PRO(有料)プランでのみ使うことができます。

手順2:アイコンフォントのコードをコピー

使いたいアイコンのコードをコピー
アイコンの詳細ページが開きます。下にスクロールして、<i class〜></i>というコードをまるっとコピーします。

手順3:アイコンを表示させたい位置に貼付け

コピーしたコードをHTML内のアイコンを表示させたい位置に貼り付けます。これだけで以下のようにアイコンフォントを使うことができます。
HTMLコード
<p><i class="fab fa-twitter"></i>ここにアイコンを表示</p>
ブラウザ表示
ここにアイコンを表示






2018年7月26日木曜日

PHP・larabel 写真撮影した画像をlaravelでリサイズして保存する方法

【1】カメラを起動して写真を撮影

カメラ起動の参考URL

<input type="file" accept="image/*">
とすることで
クリックしたときに
スマホのカメラを起動することができます


【2】 laravelで画像処理

intervention/image というパッケージを利用します。
以下のコマンドでインストールします。
$ composer require intervention/image
つづいて、intervention/imageのセットアップを行ないます。
編集ファイル:app/config/app.php

// 124行目に以下を追加
'InterventionImageImageServiceProvider',

// 192行目に以下を追加
'Image' => 'InterventionImageFacadesImage',
以上でセットアップが完了です。かんたんですね( ◜◡‾)

Laravelで画像処理をするさまざまな方法

まずは、Web上から画像をもってきて表示してみます。
以下の画像を利用してみます。
テスト用画像
以下のプログラムを実行すると画像が取得されていることがわかります。

Route::get('/', function(){

  $image = Image::make(file_get_contents('http://goo.gl/uDTEzv'));

  return $image->response('jpg');

});
つぎに画像をリサイズしてみます。
以下のプログラムを実行してみてください。

Route::get('/', function(){

  $image = Image::make(file_get_contents('http://goo.gl/uDTEzv'));

  $image->resize(100,100);

  return $image->response('jpg');

});
幅だけを設定して、高さは自動処理にしたい場合は以下のように記述します。

$image->resize(100, null, function ($constraint) {
  $constraint->aspectRatio();
});
クロップしたい場合は以下のように記述します。
$image->crop(100, 100);
デフォルトでは中心部からクロップされますが、クロップ位置を調整した場合は以下のように記述します。

// 左上からクロップする
$image->crop(100, 100, 0, 0);
白黒にした場合は以下のように記述します。
こりゃ便利ですね。
$image->greyscale();
もちろんチェーンメソッドも使えます。
以下が例となります。
$image->crop(200, 200)->greyscale();
その他のコマンドは公式マニュアルからご覧ください。

2018年7月20日金曜日

WEBページから記事を投稿する

wp_insert_post()を活用する。

参考記事1
WP関連リファレンス

こんな感じで使います。
[php]
//投稿
$post_id = wp_insert_post( array(
‘post_author’ => $user_id,
‘post_title’ => $post_title,
‘post_content’ => $post_content,
‘post_status’ => ‘publish’
) );
//画像を投稿サムネイルに。
set_post_thumbnail( $post_id, $post_photo_id);
//画像に投稿を関連づける
wp_update_post( array(‘ID’ =>$post_photo_id,’post_parent’ => $post_id ) );
[/php]
画像などのメディアも投稿として管理されているので、wp_update_post()でいじくる事ができます。
コレをページテンプレートに組み合わせることで、管理画面外から投稿の追加・編集ができるページを作成することができます。
ただ、当然のことながら、セキュリティにはかなり気を遣わないといけない事になりますね。
PHPのhtmlspecialchars()や、WordPressのattribute_escape()等の文字列のエスケープや、wp_nonce_field()・check_admin_referer()でフォームからの投稿かどうかをちゃんとチェックする等はやっぱり最低限やっておきたいですね。

laravel – フォルダの構成を把握する

  1. 【MODEL】
    ⇒\app
  2. 【rouets】
    ⇒\app\Http
  3. 【Controllers】
    ⇒\app\Http
  4. 【views】
    ⇒\resourses
  5. 【css/IMG】
    ⇒\public
  6. 【migration】
    ⇒\database\migrations