備忘録的なものなので、適当です。
@ModelAttribute
クライアントがContent-Typeをx-www-form-urlencodedでリクエストをするときに利用する。
@RequestBody
クライアントがContent-Typeをapplication/jsonでリクエストするときに利用する。
備忘録的なものなので、適当です。
クライアントがContent-Typeをx-www-form-urlencodedでリクエストをするときに利用する。
クライアントがContent-Typeをapplication/jsonでリクエストするときに利用する。
最近、仕事でコードを書いていて、将来拡張・保守しやすくて、わかりやすいコードをどんどん書けるようになりたいと思っていたところ、本屋で「オブジェクト脳のつくり方」という本を見かけて、さくっと読めそうだったので買ってみた。
内容としては、オブジェクト・クラス・継承・カプセル化・ポリモーフィズムとはなんぞやという話から、デザインパターン3種ぐらい(Factory Method, Composite, Template Method)を試しに書いてみよう、オブジェクト指向で開発するメリット、設計(ユースケース図、クラス図、オブジェクト図、シナリオ)、JSP、EJBあたりの話が出てくる。
最初のオブジェクトとはなんぞやから実際にデザインパターンを書くところらへんまでは良い復習になるな!ぐらいに思ってたが、設計図やらJSP、EJBやらの話が出てき始めたあたりから、オブジェクト指向の話とずれてきてないかという違和感がでてきた。
前半は、プログラミングを始めてオブジェクト指向ってなんや?って思ってる人には得るものが大きいと思う。ただ正直、後半は読まずにサッと流しても大丈夫な内容だ。
業務でもどうコードを書くのがベターなのか迷うときがあるので、デザインパターンを軽く押さえておくと良さそうな気がするので、結城浩さんのデザインパターン入門あたりを読んでみようと思う。
あと関係ないけど、オブジェクト指向設計実践ガイドは理解しやすくておすすめです。
WordPressでサイトを作っていると、記事の一覧を表示するときにアイキャッチ画像を表示することが多いと思います。
その際、任意のサイズのサムネイル画像を表示したくなるのが人情です。
この記事では、「任意のサイズのサムネイル画像を生成する方法」とWordPressでサイトを構築して運用し始めた後、新しくサムネイル画像のサイズを追加して再生成する方法をご紹介します。
WordPressで画像をアップロードすると、
上記の3パターンで自動的に画像が生成されます。
これはデフォルト設定の場合で、これ以外のサイズで画像をリサイズ・切り出して欲しい場合は少し手を加える必要があります!
といっても簡単で、テーマにある functions.php というファイルに一行加えるだけ。
<?php add_image_size( $name, $width, $height, $crop ); ?>
引数の$nameは、新しい画像サイズの名前を指定します。 $widthは、切り出したいサムネイル画像の幅をピクセル単位で指定します。 $heightは、切り出したいサムネイル画像の高さをピクセル単位で指定します。 $cropは、画像を切り出すかどうか。デフォルトはfalseで、指定の幅または高さに合わせてリサイズ、trueの場合は、指定のサイズで切り抜きます。
参考サイト:
関数リファレンス/add image size - WordPress Codex 日本語版
例えば、functions.phpに以下のように画像サイズを指定したとします。
<?php add_image_size('post_100x100_thumbnail', 100, 100, true); ?>
指定した後、画像をアップロードすると、100x100pxで画像が切り出されます。
100x100pxで切り出された画像を利用する場合は、こんな感じで指定します。 ※ループでpostを回している場合
<?php the_post_thumbnail('post_100x100_thumbnail'); ?>
めっちゃ簡単です!
WordPressでサイトを運用し始めたあと、サイトの改修などでサムネイル画像のサイズを新しく追加してそちらを使いたい場合があります。
そのときに問題になるのが、過去にアップした画像の新しいサムネイル画像をどう生成するのかという問題。
いまからアップロードする画像は指定したサムネイルの画像サイズで生成されるのですが、過去の画像については改めて画像をアップロードするなどしないといけません。
とてもめんどくさい......
でも、WordPressはプラグインが豊富!解決してくれるプラグインがありました!
使い方もめちゃ簡単!
まず、プラグインの新規追加からregenerate-thumbnails
で検索してインストールして有効化します。
すると、サイドバーのツールにRegen. Thumbnails
と表示されるようになるのでクリックします。
regenerate-thumbnailsの管理画面に遷移すると、Regenerate All Thumbnails
表示されたボタンがあるのでクリックするとサムネイル画像の再生成が始まります。
これで、functions.phpに追加した新しいサイズのサムネイル画像が再生成されるはずです。
いかがでしたでしょうか?
僕はあまり使うプラグインを増やしたくない方なので、今回はfunctions.php に一行追加して任意のサイズのサムネイル画像を生成する方法をご紹介しました!
WordPressにはプラグインがたくさんあるので、サムネイル画像のサイズを管理画面から登録できるプラグインとかありそうですよね。 なので、今回の記事でfunctions.phpに書き込むのは抵抗あるなって方はそういうプラグインを探してみるのも楽しそうですね!
では!
フリー素材(写真・イラスト・アイコン)をダウンロードできるサイトが簡単に見つかる「素材サイト」というサービスをリリースしました。
「素材サイト」
普段、自分で何かサービスや作品を作ろうとした時に「フリー素材」を提供してくださるサイトで素材や写真をダウンロードして使うことがありました。
その際、素材を検索して探すのですが、検索結果には「◯◯なフリー素材サイト30選」といったような「まとめ記事」がたくさん登場しました。
その記事のリンクから探すことになったのですが、そもそも情報が古くリンク切れになっているものがあったり、その記事を読んだだけでは、そのサイトではどんな素材が手に入り、商用利用は可能なのかどうかダウンロードできるファイルの形式(pngなのかai・psdなのか)は何なのか、など詳細情報がわからないという問題がありました。
最終的には、自分でそのサイトまでいって調べる必要がありました。
さらに困ったのは、海外のサイトだと利用規約やライセンス周りの話は英語で書かれているので、本当にこの写真を使って大丈夫だろうか、ライセンスに引っかかったりしないかと心配になって、使いたかった素材を使うのをやめたりすることもありました。
こういった問題を、少しでも解決できれば良いなと思って作ったのが今回の「素材サイト」というサービスです。
「いい作品は、いい素材から生まれる。」
いい素材があれば、組み合わせ次第でいい作品は生まれるもの。
素材探しに使っていた時間を、作品をブラッシュアップする時間に使えたら、もっと効率的に世の中にいいサービスや作品が増えるのではないか。
そういった思いでこのサービスを製作しました。
一覧では、
などが、ひと目でわかるようになっています。
素材を探す時に、
など様々なニーズがあるかと思います。検索ページでは、それがプルダウンとチェックボックスで絞り込めて簡単に一覧で探せるようにしてみました。
カテゴリや小カテゴリ、会員登録の有無、ファイル形式、利用形式、国内・海外のサイトかどうかで絞り込むことができます。
個別ページでは、大きく3つに分けてフリー素材サイトの紹介をしています。
まずは「どんなサイトか?」です。
素材の種類はもちろんのこと、サイトで配布される素材の特徴、利用規約や禁止事項についての要約を読むことができます。
次に「サイトの使い方」です。
無料で素材をダウンロードできることはわかったけれど、いまいちどこからダウンロードすれば良いのか分からない、といった問題を解決するため、画像でわかりやすく素材をダウンロードする方法を書いています。
3つ目に「サンプル素材」です。
そのサイトでダウンロードできる素材を何種類か、画像で確認することができます。そこから自分が求める素材の雰囲気に合うかどうかを、判断できるかもしれません。
フリー素材をダウンロードできる素敵なサイトは世の中にたくさんあります。
素材サイトでは世の中にあるまだ一部のサイトだけしか紹介できていませんが、これから頑張って掲載するサイトを集めていこうと思います!
今後は、動画のフリー素材やBGMなどのカテゴリも増やしていくつもりです。まだまだ作ったばかりでサイトも未熟ですが、少しでも多くの方に使っていただければ嬉しいです。
WordPressの検索結果ページで2ページ目以降がトップページが表示されて悩みまくっていたので、情報共有します。
location / { if (!-e $request_filename) { rewrite ^.+?(/wp-.*) $1 last; rewrite ^.+?(/.*\.php)$ $1 last; rewrite ^ /index.php last; } }
この記事を参考にしました。
パーマリンクをデフォルト設定にすると検索結果のページネーションも正常に動いていて、ずっとページネーションか設定、search.phpなどコードの記述方法が間違っていると思い、そのようなキーワード関連で調べていたため、一向に解決できない問題でした。
ふと、Webサーバの設定が間違ってるんじゃないかと思って修正すると、パーマリンクが数字ベースでも正常に動作するようになったので、同じような問題で詰まっている人は参考にしてみてください。
Angular2を書いてて、各コンポーネントごとにmain.tsを作って、tscして、さらにwebpackでbundle.jsを作りたくて、うまくいかなかったけど、最近やっと上手くいったので、個人用にメモしておきます。
僕はAngular2を使うにあたってTypeScriptで書いていて、webpackを使っています。 また、tsconfig.jsonのfilesの部分をgulpのプラグインを使って更新をしています。
で多分いける。
gulp-tsconfig-updateは@laco0416さんが作られたgulpのプラグインで、tsconfig.jsonのfilesの部分をgulpで更新できるので、今回すごく助かりました。 記事は、Qiitaの記事で書かれているので、参考にしていただければと思います。
準備に必要なものはインストールされた前提で話を進めます。
ファイル名: 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にファイルパスを書かなくて済みます。
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"を指定しています。
オプションの一覧は、この記事とか読んでみると良いかもです。
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がフォルダ構造を考えてよしなにやってくれるからです。 エントリーポイントの指定の仕方は他にもあるので調べてみてください。
tsc -p .
webpack
これで、build配下に各コンポーネントのディレクトリが作成され、各コンポーネントのディレクトリには、ビルドされたjsファイルとbundle.jsが出力されたかと思います。
Angular2で各コンポーネントごとにエントリーポイント作ってビルドしたりするのが正しいのかはよくわからないですが、この記事が同じようなことで詰まってる人の役に立てれば幸いです。
Angular2でwebpackを使いたいのに、Tutorialはsystemjsを使っていて、Githubのangular2-webpack-starterのリポジトリはよく分からない状態だったので、とりあえず自分でなんとか動かせるように設定ファイルを書いてみた。
Angular2もwebpack も初めてなので、書き方が正しいのか分からないですが、設定ファイルを晒します。
package.json
{ "name": "angular2-webpack", "version": "1.0.0", "description": "trying angular2 + webpack", "scripts": { "tsc": "tsc -p . ", "start": "webpack-dev-server", "webpack": "webpack", "build": "npm run tsc && npm run webpack", "postinstall": "typings install" }, "dependencies": { "@angular/common": "2.0.0-rc.4", "@angular/compiler": "2.0.0-rc.4", "@angular/core": "2.0.0-rc.4", "@angular/forms": "0.2.0", "@angular/http": "2.0.0-rc.4", "@angular/platform-browser": "2.0.0-rc.4", "@angular/platform-browser-dynamic": "2.0.0-rc.4", "@angular/router": "3.0.0-beta.1", "core-js": "^2.4.0", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.6", "zone.js": "0.6.12" }, "devDependencies": { "angular2-template-loader": "^0.4.0", "css-loader": "^0.23.1", "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^0.8.5", "html-loader": "^0.4.3", "html-webpack-plugin": "^2.15.0", "jasmine-core": "^2.4.1", "null-loader": "^0.1.1", "phantomjs-prebuilt": "^2.1.7", "raw-loader": "^0.5.1", "rimraf": "^2.5.2", "style-loader": "^0.13.1", "ts-loader": "^0.8.1", "typescript": "^1.8.10", "typings": "^1.0.4", "webpack": "^1.13.0", "webpack-dev-server": "^1.14.1", "webpack-merge": "^0.14.0" } }
tsconfig.json
{ "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "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": [ "./app/main.ts", "./node_modules/typescript/lib/lib.es6.d.ts" ] }
webpack.config.js
var webpack = require("webpack"); var path = require("path"); module.exports = { entry: { bundle: ["./app/main.js"] }, output: { path: path.resolve(__dirname, "build"), publicPath: "/assets/", 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' } ] } };
この設定ファイル書いて、
npm install
実行して、チュートリアルでも始めれば良いと思います。
いろいろ理解が深まったら、もう少し詳しい記事書きますね。 あぁ難しい。。。。