読者です 読者をやめる 読者になる 読者になる

そうきたか

技術的なことや読んだ本など雑多にブログを書きます。

商用OK・会員登録の有無などが一発でわかる!フリー素材サイトが簡単に見つかる「素材サイト」をリリースしました。

f:id:ryskit:20160930005806p:plain

フリー素材(写真・イラスト・アイコン)をダウンロードできるサイトが簡単に見つかる「素材サイト」というサービスをリリースしました。

素材サイト

「素材サイト」をつくった経緯

f:id:ryskit:20160930102918p:plain

普段、自分で何かサービスや作品を作ろうとした時に「フリー素材」を提供してくださるサイトで素材や写真をダウンロードして使うことがありました。

その際、素材を検索して探すのですが、検索結果には「◯◯なフリー素材サイト30選」といったような「まとめ記事」がたくさん登場しました。

その記事のリンクから探すことになったのですが、そもそも情報が古くリンク切れになっているものがあったり、その記事を読んだだけでは、そのサイトではどんな素材が手に入り、商用利用は可能なのかどうかダウンロードできるファイルの形式(pngなのかai・psdなのか)は何なのか、など詳細情報がわからないという問題がありました。

最終的には、自分でそのサイトまでいって調べる必要がありました。

さらに困ったのは、海外のサイトだと利用規約やライセンス周りの話は英語で書かれているので、本当にこの写真を使って大丈夫だろうか、ライセンスに引っかかったりしないかと心配になって、使いたかった素材を使うのをやめたりすることもありました。

こういった問題を、少しでも解決できれば良いなと思って作ったのが今回の「素材サイト」というサービスです。

いい作品は、いい素材から生まれる。

いい素材があれば、組み合わせ次第でいい作品は生まれるもの。

素材探しに使っていた時間を、作品をブラッシュアップする時間に使えたら、もっと効率的に世の中にいいサービスや作品が増えるのではないか。

そういった思いでこのサービスを製作しました。

一覧では、

f:id:ryskit:20160930005820p:plain

  • 商用利用が可能かどうか
  • ダウンロードできる形式は何か
  • 会員登録は必要なのか
  • どうやってそこのサイトの素材をダウンロードできるのか
  • どんな素材を手に入れられるのか

などが、ひと目でわかるようになっています。

検索ページ

素材を探す時に、

  • 欲しい素材はAiデータで欲しいな
  • 商用利用な素材がほしい
  • 会員登録は面倒臭いな

など様々なニーズがあるかと思います。検索ページでは、それがプルダウンとチェックボックスで絞り込めて簡単に一覧で探せるようにしてみました。

f:id:ryskit:20160930005845p:plain

カテゴリや小カテゴリ、会員登録の有無、ファイル形式、利用形式、国内・海外のサイトかどうかで絞り込むことができます。

個別ページ

f:id:ryskit:20160930005841p:plain

個別ページでは、大きく3つに分けてフリー素材サイトの紹介をしています。

まずは「どんなサイトか?」です。

素材の種類はもちろんのこと、サイトで配布される素材の特徴、利用規約や禁止事項についての要約を読むことができます。

f:id:ryskit:20160930005837p:plain

次に「サイトの使い方」です。

無料で素材をダウンロードできることはわかったけれど、いまいちどこからダウンロードすれば良いのか分からない、といった問題を解決するため、画像でわかりやすく素材をダウンロードする方法を書いています。

f:id:ryskit:20160930005828p:plain

3つ目に「サンプル素材」です。

そのサイトでダウンロードできる素材を何種類か、画像で確認することができます。そこから自分が求める素材の雰囲気に合うかどうかを、判断できるかもしれません。

f:id:ryskit:20160930005824p:plain

最後に

フリー素材をダウンロードできる素敵なサイトは世の中にたくさんあります。

素材サイトでは世の中にあるまだ一部のサイトだけしか紹介できていませんが、これから頑張って掲載するサイトを集めていこうと思います!

今後は、動画のフリー素材やBGMなどのカテゴリも増やしていくつもりです。まだまだ作ったばかりでサイトも未熟ですが、少しでも多くの方に使っていただければ嬉しいです。

sozai.site

WordPressの検索結果のページネーション2ページ目以降にトップページが表示される

f:id:ryskit:20160920010633j:plain

WordPressの検索結果ページで2ページ目以降がトップページが表示されて悩みまくっていたので、情報共有します。

状況

  • パーマリンクの設定は、数字ベースを設定
  • 検索結果1ページ(http://example.com/?s=)は正しく絞り込んだ数の記事数とページネーションが表示される
  • 検索結果2ページ目以降(http://example.com/page/2/?s=)は、なぜかトップページの2ページ目以降が表示される
  • カテゴリやカスタムタクソノミの一覧ページは、正しくページネーションされる
  • WebサーバはNginxを利用

原因

  • Nginxのlocation / の設定が上手くいっていなかった
location / {
    if (!-e $request_filename) {
        rewrite ^.+?(/wp-.*) $1 last;
        rewrite ^.+?(/.*\.php)$ $1 last;
        rewrite ^ /index.php last;
    }
}

この記事を参考にしました。

最後に

パーマリンクをデフォルト設定にすると検索結果のページネーションも正常に動いていて、ずっとページネーションか設定、search.phpなどコードの記述方法が間違っていると思い、そのようなキーワード関連で調べていたため、一向に解決できない問題でした。

ふと、Webサーバの設定が間違ってるんじゃないかと思って修正すると、パーマリンクが数字ベースでも正常に動作するようになったので、同じような問題で詰まっている人は参考にしてみてください。

Angular2でのtsconfig, webpack.config, gulpの設定

f:id:ryskit:20160919183535j:plain

Angular2を書いてて、各コンポーネントごとにmain.tsを作って、tscして、さらにwebpackでbundle.jsを作りたくて、うまくいかなかったけど、最近やっと上手くいったので、個人用にメモしておきます。

  • やりたいこと: 各コンポーネントのディレクトリ構造を保ったまま、build/各コンポーネントディレクトリ名/bundle.jsを作りたい

f:id:ryskit:20160919173747p:plain

前提

僕はAngular2を使うにあたってTypeScriptで書いていて、webpackを使っています。 また、tsconfig.jsonのfilesの部分をgulpのプラグインを使って更新をしています。

準備

  • webpackのインストール
  • gulpのインストール
  • gulp-tsconfig-updateのインストール

で多分いける。

gulp-tsconfig-updateは@laco0416さんが作られたgulpのプラグインで、tsconfig.jsonのfilesの部分をgulpで更新できるので、今回すごく助かりました。 記事は、Qiitaの記事で書かれているので、参考にしていただければと思います。

流れ

  1. gulpfile.jsにタスクを書き込む
  2. gulp実行で、tsconfig.jsonを出力
  3. tsc -p . で、tsファイルをjsファイルに変換
  4. webpack で各コンポーネントのbundle.jsを出力

How to

準備に必要なものはインストールされた前提で話を進めます。

  1. まず、gulpfile.jsを作成し以下のコードを書きます。
ファイル名: gulpfile.js


var gulp = require("gulp");
var tsConfig = require('gulp-tsconfig-update');
gulpfile.js

gulp.task('default', ['tsConfig']);

gulp.task('tsConfig', function() {
return gulp.src([
  "node_modules/typescript/lib/lib.es6.d.ts",
  "./app/**/main.ts"
]).pipe(tsConfig());
});

gulp.src()の配列の中の**(アスタリスク2つ)は、"app配下の全て" という意味です。 これで、いちいちコンポーネントを作っては、tsconfig.jsonのfilesにファイルパスを書かなくて済みます。

  1. gulpコマンドを実行

gulpを実行すると、先ほど書いたgulpのタスクが走って、tsconfig.jsonが出力されます。 出力された内容はこんな感じ。

ファイル名: tsconfig.json


{
  "compilerOptions": {
  "target": "es5",
  "module": "commonjs",
  "moduleResolution": "node",
  "outDir": "build",
  "rootDir": "app",
  "sourceMap": true,
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "removeComments": false,
  "noImplicitAny": true,
  "suppressImplicitAnyIndexErrors": true
  },
  "filesGlob": [
    "./**/*.ts",
    "!./**/*.d.ts",
    "!./node_modules/**/*",
    "./node_modules/typescript/lib/lib.es6.d.ts"
  ],
  "files": [
      "node_modules/typescript/lib/lib.es6.d.ts",
      "app/component-a/main.ts",
      "app/component-b/main.ts"
  ]
}

ちなみに、files以外のオプションは自分で書いています。 最初、オプションのrootDirを設定していなくて、tscでビルドされた際にコンポーネントのフォルダ構造が保たれないまま、ビルドされていたので、rootDirを設定するのが肝です。

outDirはビルドしたファイルをどこに出力するかを変更できるので、今回は"build"を指定しています。

オプションの一覧は、この記事とか読んでみると良いかもです。

  1. webpack.config.jsを編集する

webpack.config.jsは以下のように編集しました。

ファイル名: webpack.config.js

var webpack = require("webpack");
var path = require("path");
var glob = require("glob");
var HtmlWebpackPlugin = require('html-webpack-plugin');

var entries = {};
glob.sync("./build/**/main.js").map(function(file) {
  let matchResult = file.match(/\/build\/(.*?)\/.*/);
  let subscript = matchResult[1] + "/" + "bundle";
  entries[subscript] = file
})

console.log(entries);

module.exports = {
entry: entries,

output: {
  path: path.join(__dirname, "test"),
  filename: "[name].js"
},

resolve: {
  root: __dirname,
  extensions: ['', '.webpack.js', '.web.js', '.js', '.ts']
},


module: {
  loaders: [
    {
      test: /\.ts$/,
      loaders: ['ts', 'angular2-template-loader']
    },
    {
      test: /\.html$/,
      loader: 'html'
    }
  ]},
};

var entries にオブジェクトでエントリポイントを指定しています。 entriesのkeyに、各コンポーネントフォルダ名(例: component-a) + /(スラッシュ) + "bundle" entriesのvalueに、エントリーポイントのパスを入れています。

entriesのキーを["component-a/bundle"]のように指定してしているのは、webpackがフォルダ構造を考えてよしなにやってくれるからです。 エントリーポイントの指定の仕方は他にもあるので調べてみてください。

  1. あとは、tsc コマンドと webpack コマンドを実行
tsc -p .
webpack

これで、build配下に各コンポーネントのディレクトリが作成され、各コンポーネントのディレクトリには、ビルドされたjsファイルとbundle.jsが出力されたかと思います。

最後に

Angular2で各コンポーネントごとにエントリーポイント作ってビルドしたりするのが正しいのかはよくわからないですが、この記事が同じようなことで詰まってる人の役に立てれば幸いです。