Forem: Ichi

Build is possible but Archive fails when using CocoaPods in Xcode

Ichi — Tue, 09 May 2023 06:39:55 +0000

I've no knowledge of Swift or Xcode at all, this is a reminder. (It may not be a fundamental solution, but it is a first aid measure.)

I got the following error and investigated it thoroughly.

sent 29 bytes received 20 bytes 98.00 bytes/sec
total size is 0 speedup is 0.00
rsync error: some files could not be transferred (code 23) at /AppleInternal/Library/BuildRoots/hogehogehogehoge/Library/Caches/com.apple.xbs /Sources/rsync/rsync/main.c(996) [sender=2.6.9].
Command PhaseScriptExecution failed with a nonzero exit code

I looked through StackOverflow and couldn't figure out what was going on. But I found a way to archive the files.
Fix the following part of /Pods/Target Support Files/{Proj Name}/Pods-{Proj Name}-frameworks.sh.

  if [ -L "${source}" ]; then
    echo "Symlinked..."
- source="$(readlink "${source}")"
+ source="$(readlink -f "${source}")"
  fi

Starter Template of Laravel+Vite+Vuetify3+TypeScript+Router+Sass

Ichi — Mon, 13 Mar 2023 17:41:33 +0000

Memorandum on building a Laravel + Vuetify3 environment. (I'm all about React)

I've also published the environment template I created on Github. please check below repository and use as template.

ichii731 / laravel9-vite-vuetify3-starter

laravel9-vite-vuetify3-starter

composer install
cp .env.example .env
php artisan key:generate
npm install
npm run build
php artisan serve

View on GitHub

Laravel is changing rapidly, and Vuetify v3 is still in beta, so please issue or comment if you have any fixes.

Manually Setup

Laravel+Vite

composer create-project --prefer-dist laravel/laravel:^9.x *********

When the Laravel project setup is complete, you may have found Laravel Mix-related packages in package.json, but now they have been replaced with Vite packages, so install them.

npm i

Vue3+Vuetify3+Vue Router

The next step is to install Vue-related items.
For Vue3, just install the Vite plugin package called @vitejs/plugin-vue

npm i @vitejs/plugin-vue vue

npm i vuetify@next vue-router

(caution)about TypeScript

In the case of Laravel Mix, it is originally necessary to install various transpilers here, but in Vite's environment, TypeScrip is not required. Continue on to the next step.
But be careful that Vite with Laravel does not perform TypeScript type checking. The point seems to be to just transpile and use Volar or something.

Vite only performs transpilation on .ts files and does NOT perform type checking. It assumes type checking is taken care of by your IDE and build process. SOurce: Vite with Laravel Using TypeScript

Also, for Sass, install a transpiler.

npm i sass -D

create app.ts

Create app.ts, the main JavaScript source, and load Vuetify, Router, etc.

import './bootstrap'
import 'vuetify/styles' // Global CSS has to be imported
import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import App from './App.vue'
// Route(next section)
import router from "./route"

const app = createApp(App)
const vuetify = createVuetify()

app.use(router)
app.use(vuetify)
app.mount('#app')

create Vue SFC

As with Laravel Mix, we will develop the front-end in the /resources directory, including Router configuration files, components for each page, and so on.
Note: If you omit the extension when importing Vue components, an error will occur.

<template>
  <v-container class="counter">
  <!-- class="container" is added to check Sass behavior. -->
    <router-view></router-view>
  </v-container>
</template>

import TopPage from './pages/TopPage.vue';
import NextPage from './pages/NextPage.vue';
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
    {
        path: '/',
        name: 'TopPage',
        component: TopPage,
    },
    {
        path: "/next",
        name: 'NextPage',
        component: NextPage,
    },
];
const router = createRouter({
    routes,
    history: createWebHistory(),
})
export default router;

Make components for each page as well. (Omit all but the top page.)

<template>
  <p>Top Page</p>
  <h1>{{ count }}</h1>
  <v-btn color="blue" @click="count++">Increment</v-btn>

  <router-link to="/next">To Next Page →</router-link>
</template>

<script setup lang="ts">
import { ref } from "vue";
const count = ref<number>(0);
</script>

create Sass file

#app {
    .counter {
        margin: 0 auto;
        text-align: center;
    }
}

vite-related settings

Finally, let's configure the necessary settings for building with Vite.

vite.config.ts(build configuration)

Place the vite build configuration file in the root directory. In laravel(), specify the file you want to build. You can put SaSS, TypeScript, or whatever you want.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        vue(),
        laravel([
            'resources/sass/app.scss',
            'resources/js/app.ts',
        ]),
    ],
});

Basically, this is the end of the Vite setup, but for Vuetify, continue below.

TreeShaking with Vuetify

If you bundle Vuetify in its entirety as it is, the post-build file will be large, and to prevent bloat, set up TreeShaking in Vuetify's Vite plugin.
Install the plugin and add it to vute.config.ts.

npm i vite-plugin-vuetify

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
* import vuetify from 'vite-plugin-vuetify'

export default defineConfig({
    plugins: [
        vue(),
+         vuetify({ autoImport: true }),
        laravel([
            'resources/sass/app.scss',
            'resources/js/app.ts',
        ]),
    ],
});

Loading in Blade

Load the built JS file in the Blade, using @vite instead of @mix() in Laravel Mix. Enter the name of the pre-built file in parentheses.
In other sites, you can also load CSS and JS separately as follows.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Laravel 9</title>
    @vite('resources/sass/app.scss')
</head>
<body>
    <div id="app"></div>
    @vite('resources/js/app.ts')
</body>
</html>

Also, the Vite plugin is very good, and if you do a Production build, it will give you a random number and do version control on its own.

Build test

## Development build (hot read)
npm run dev
## Build production build
npm run build

If the development build successfully shows the Vuetify component, let's enjoy!

"Twitter for xxx" disappeared, so I created Check Tool

Ichi — Sat, 17 Dec 2022 16:49:13 +0000

Hi dev.
Recently, Twitter's tweet page no longer shows the origin of tweets such as "Twitter for Android," "Twitter for iOS," and "Twitter Web App," which previously existed.

But if you use Twitter API, you can get it. So I created a mini-tool to make that available to everyone.

▼You can try it now :D
https://tools.ic731.net/twitter/for/en

(note) It seems that some environments can see it and some can't.

About API

In this case, I used Twitter API v2 with PHP, which extract tweet ID from URL and throw a GET request to /2/tweets.

For API operations, I used well-known library abraham/twitteroauth.
So, please note that setApiVersion("2") is required to use v2.

$connection = new TwitterOAuth($ck, $cs, null, $brarer);
$connection->setApiVersion("2");
$id = '123456789';
$params = [
  "ids" => $id,
  "tweet.fields" => "source"
];
// GET
$tweets = $connection->get("tweets", $params);

And "Twitter for xxx", which is the key this time, is stored in $tweets->data[0]->source. That's all for this simple application. Please try it!

Get over 100 tweets using Twitter API v2

Ichi — Wed, 29 Dec 2021 16:40:32 +0000

This is an example of implementing a tweet search using the Twitter API v2 using PHP.
There are no PHP implementation examples for retrieving more than 100 tweets at a time, so I'll give a brief introduction along with the specifications of the API itself. (Python and other languages are available)

Overview

Twitter API v2 is a new API that was released in August 2020.
Also, just last month, in mid-November, v2 became the default API, and it is recommended to migrate from v1.1.

Major PHP library support

In this article, we will focus mainly on PHP implementations.
The most famous Twitter API library, "TwittterOAuth", released version 3.0.0 in July of this year to support v2.

https://github.com/abraham/twitteroauth/releases/tag/3.0.0
https://github.com/abraham/twitteroauth/issues/874

Register v2 app

You will not be able to access with v1.1 credentials and will need to create a new v2 application, but if you have already passed the Developer application, you can issue it as soon as possible.
You can register an application for v2 from the left column of the Developer Portal.

By the way, if you make a request using the authentication key of the v1.1 app, it will kindly return with the registration URL, telling you that you need to register for v2, as shown below.

["detail"]=>
string(201) "When authenticating requests to the Twitter API v2 endpoints, you must use keys and tokens from a Twitter developer App that is attached to a Project. You can create a project via the developer portal."
["registration_url"]=>
string(55) "https://developer.twitter.com/en/docs/projects/overview"
// ︙

Search & Get over 100

Limitations and two endpoints

Endpoint Types
In v1.1, there were categories such as Premium plan, but in v2, it depends on the usage.

/2/tweets/search/recent ... Get tweets from the past week.
Full-archive search ... retrieve tweets from all time periods. Only for academic research users.

API request limits
The rate limit changes for the application and user authentication used, which is almost the same as v1.1.

	User	Application
Request Limit	180 / 15min	450 / 15min
Tweets per once	10-100	10-100

There is also a monthly limit of 2 million tweets per month for the entire v2 app. You can check the status of the limit from the Twitter Deleloper app page.

Code Example

See Repo
Sample code is shown below, using PHP 7.x or 8.x with the Composer library installed.

The rate limit restriction process is usually a good way to get and check the limit status, but this time we will introduce a method to specify the number of times to access in advance. A bearer token with a loose limit is used.
If you are doing personal development or just want to get the information, you can record the number of requests made on the client side and stop the access when it reaches 150. If you want to do it properly, do it yourself as it is the same as v1.1.

<?php
require_once "vendor/autoload.php";
use Abraham\TwitterOAuth\TwitterOAuth;

$connection = new TwitterOAuth(
    "************************", // API Key
    "************************", // API Secret
    null,
    "************************" // Bearer Token
);
$query = "#keyword";
// Set API version
$connection->setApiVersion("2");
$params = [
    /*
    - Reference:https://developer.twitter.com/en/docs/twitter-api/tweets/search/api-reference/get-tweets-search-recent
    - query and max_result are required
    */
    "query" => $query . " -is:retweet", // if you exclute retweets
    "start_time" => "2021-12-12T00:00:00", // UTC
    "end_time" => "2021-12-03T00:00:00",
    "tweet.fields" => "created_at", // additional posting date and time
    "max_results" => 100 // set between 10-100
];
// Set the number of requests to $req_count
// set the number of requests to $loop_count
$req_count = 0;
$loop_count = 400;

for ($i = 0; $i < $loop_count; $i++) {

    /**
     * When request is limited
     * We have set the time longer than 15 minutes and shorter than 450 times to allow for this.
     * Please take care of these issues on your own.
     */
    if($req_count > 400){
        echo "Wait for 15 minutes";
        $loop_count = 0;
        sleep(1000000);
    }
    // Request using v2 API
    $request = $connection->get("tweets/search/recent", $params);
    // Process the acquired information
    foreach ($request->data as $data) {
        // Your code here
    }
    echo "Success Request";
    // If you have more than 100 cases
    if (isset($request->meta->next_token)) {
        echo $req_count;
        $req_count++;
        // Add next_token to the query parameter array
        $params["next_token"] = $request->meta->next_token;
    } else {
        // If not, quit
        break;
    }
}

Mechanism

Save the query parameters as an associative array $params with the conditions you want to retrieve.
Make a request using twitteroauth
Next_token is included in the JSON returned from the request, so acquire it.
Put the next_token into the associative array
Repeat the request using for or while

I think it's okay to sleep in the for as needed so as not to bother the Twitter side. It's working!

Parameters

Please refer to the documentation for the parameters and information you can get. It is especially nice to be able to put the start and end time directly into the query.

https://developer.twitter.com/en/docs/twitter-api/tweets/search/api-reference/get-tweets-search-recent

https://developer.twitter.com/en/docs/twitter-api/data-dictionary/object-model/tweet

Have a great New Year!
Twitter @ichii731 | GitHub

Extra

Code to get more than 100 items in the previous v1.1
Finally, a bonus. Here is a sample code to get more than 100 items with v1.1.

<?php
require "vendor/autoload.php";

use Abraham\TwitterOAuth\TwitterOAuth;


function tweet_loop($keyword, $loop_count)
{
    global $CK, $CS, $AT, $ATS;
    $connection = new TwitterOAuth($CK, $CS, $AT, $ATS);
    $params = [
        'q' => $keyword,
        'count' => 100
    ];
    for ($i = 0; $i < $loop_count; $i++) {
        $results = $connection->get("search/tweets", $params);
        foreach ($results->statuses as $val) {
            // Write the post-acquisition process here
            $tweet_results[] = $val->text;
        }

        //Conditional branching to see if there are more tweets that can be retrieved
        if (isset($results->search_metadata->next_results)) {
            // Get max_id
            $max_id = preg_replace('/.*?max_id=([\d]+)&.*/', '$1', $results->search_metadata->next_results);
            // Add max_id to params
            $options['max_id'] = $max_id;
        } else {
            break;
        }
    }
    return $tweet_results;
}

Let's Connect&Show MongoDB with Laravel!

Ichi — Sat, 02 Oct 2021 17:27:57 +0000

Let's operate and display MongoDB from Laravel!

Fortunately, drivers with abundant functions are prepared in PHP and Laravel, so it's super easy to implement! Let's do it.

Sample Project

I'll distribute the sample project as usual this time as well.

Rename the .env.example file to .env, enter your Mongo credentials, and use it with php artisan serve!

Sample Code Repository

But please read the whole thing and understand how it works, even if you're just "in the mood"...

DEV Envinorment

Laravel is an active project and the specifications can change quite a bit depending on the version!
In this article, I'll use the Laravel 6.x LTS series that I usually use.

OS -> Ubuntu 20.04.2 LTS (GNU/Linux 5.4.0-74-generic x86_64)
Laravel -> Laravel Framework 6.20.32
PHP -> PHP 7.4.3 (cli) (built: Jul 5 2021 15:13:35) ( NTS )
MongoDB -> 4.4.6

Envinorment Setting

First, create the Laravel Project via Composer.

composer create-project laravel/laravel mongodb-sample "6.*"

Make MongoDB available

Install the MongoDB driver for PHP using Pecl.
(Pecl comes with PHP when you install it.)

pecl install mongodb

And introduced a library via Composer that allows query builders etc. to be used in the Laravel project.

Composer require jenssegers/mongodb

[Note]
which package version to include depends on your Laravel version!
You can find it on GitHub below. For Laravel 6.x series, use 3.6.x!
Official Documentation

Make sample Database

As a preliminary step, We will create a sample collection.
Type the following directly into the mongo shell, and a collection named Post will be created.

use <DB Name>
db.post.insertOne({"body": "Orange","date": "2021-08-19"});
db.post.insertOne({"body": "Grape","date": "2021-08-22"});
db.post.insertOne({"body": "Apple","date": "2021-08-17"});

※When using MongoDB Compass (CRUD software for GUI), you can create it just by reading the following JSON.
JSON File

Implemented with Laravel!

Edit Config

Edit/add to the following contents in the Config directory.
/config/app.php（Edit）

<?php
// ～Omitted～
    'providers' => [

// Add the following to End.
        Jenssegers\Mongodb\MongodbServiceProvider::class,
// ～Omitted～
    'aliases' => [
// Add the following to End.
        'Moloquent' => Jenssegers\Mongodb\Eloquent\Model::class,

/config/database.php（Edit）

<?php
//  'default' => env('DB_CONNECTION', 'mysql'),
    'default' => env('DB_CONNECTION', 'mongodb'),

    'connections' => [
// Added immediately after.
        'mongodb' => [
            'driver' => 'mongodb',
            'host' => env('DB_HOST'),
            'port' => env('DB_PORT'),
            'database' => env('DB_DATABASE'),
            // If you have login restrictions, you also need the following.
　　　　　　 'username' => env('DB_USERNAME'),
            'password' => env('DB_PASSWORD'),
        ],

Credentials in `.env`

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=xxxx
DB_USERNAME=xxxx
DB_PASSWORD=secret
# Delete the above and replace with the below, and enter the information as appropriate.
DB_CONNECTION=mongodb
DB_HOST=127.0.0.1
DB_PORT=27017
DB_DATABASE=xxxx

Make Model

Next, we will create the Model, which is "M" in MVC.
That's handy because we can use them separately for each collection!

php artisan make:model Models/Post

This will automatically create a Model in /app/Models, so please copy and paste all of the following and replace it.

/app/Models/Post.php（New）

<?php
namespace App\Models;
use Jenssegers\Mongodb\Eloquent\Model as Moloquent;

class Post extends Moloquent
{
    protected $collection = 'post';
}

Create a Routing

routes/web.php（Edit）

<?php
Route::get('/', 'TestController@index');

// ↑ When you access /, it will reference the TestController.

Create a Controller

Well, that's the point. Create a controller with the following artisan command.

php artisan make:controller TestController

Then copy and paste all of the following.
/app/Http/Controllers/TestController.php(New)

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Post;

class TestController extends Controller
{
    static function index() {
        $posts = Post::orderBy('_id', 'desc')->get();
        return view('Test', ['posts' => $posts]);
    }
}

Create View

Finally, create a View and you're done!
I used Blade.It's the one that receives the variable from the Controller and displays it in foreach.

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>MongoDB Show</title>
</head>
<body>
    <div>Data Count:{{ count($posts) }}</div><br>
    <!-- You can use the count() function to output the number of data in the collection. -->
    <ul>
        @foreach ($posts as $post)
            <li>{{ 'Date:' . $post['date'] . ' | Value:' . $post['body'] }}</li>
        @endforeach
    </ul>
</body>
</html>

That's All!

Operation Check

Start the build-in server with php artisan serve, access http://localhost:8000/, and if you can see it without any problems, successful!

I'll also post it on the repo on GitHub. Please try it. (GitHub pushes only laravel diff directories/files)

https://github.com/ichii731/php-examples/tree/main/laravel_mongodb-show

Please also check the blog and Twitter@ichii731 if you like :D

Create a very Cool 404/503 Error Page with Laravel!

Ichi — Mon, 30 Aug 2021 14:47:46 +0000

Hi. This time, let's create a cool 404/503... error page with Laravel.

Error page structure in Laravel

Laravel can display the error page just by placing files in the specified directory without adding any special controller. So it's very easy to support.

All you have to do is to add a file like 400.blade.php to resources->view->errors directory.
In addition, I would like to add base.blade.php to the layout directory to make it a template.

The file tree looks like below.



└─resources
  └─views
    └─errors
           404.blade.php
      └─layouts
              base.blade.php

Let's make it!

Now let's actually make it using a template etc.
A sample of the completed site has been uploaded to GitHub.

https://github.com/ichii731/php-examples/tree/main/laravel_error-page

Dev Environment



ubuntu20.04 LTS
PHP 7.4.3
Laravel Framework 6.20.26
Template Engine: Blade

404 page template

This time, I changed a part of the template introduced in DEV Commynity and diverted it. The original template CodePen is here.

It's a cool-looking template that counts up numbers and animates them to 404 and 503.

It may look difficult at first glance, but it's a simple configuration using "for" statements in Javascript. We will use this one.

Customize Template

I did the following changes.

Converted SCSS to CSS
Changed the file path for loading CSS, JS to be described in the asset helper←asset('filepath').
Created a base blade to handle various errors, and then modified it to switch the display depending on the error content.

The process of changing the text displayed depending on the error implement using @yield("").

After typing the asset element, the file and directory structure looks like below.

Sample Code

Blade Files

Base：resources/views/errors/layouts/base.blade.php



<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>@yield('title')</title>
  <link rel='stylesheet' href='{{ asset('/css/flexgrid.min.css') }}'>
  <link rel="stylesheet" href="{{ asset('/css/style.css') }}">
</head>
<body>
  <!-- partial:index.partial.html -->
  <div class="container">
    <div class="row">
      <div class="xs-12 md-6 mx-auto">
        <div id="countUp">
          <div class="number" data-count="@yield('http-request')">0</div>
          <div class="text">@yield('title')</div>
          <div class="text">@yield('message')</div>
          <div class="text">@yield('detail')</div>
        </div>
      </div>
    </div>
  </div>
  <!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
  <script src="{{ asset('/js/in-view@0.6.1.js') }}"></script>
  <script src="{{ asset('/js/script.js') }}"></script>
</body>
</html>

404 Error：resources/views/errors/404.blade.php



@extends('errors.layouts.base')
@section('http-request', '404')
@section('title', 'Page not found')
@section('message', 'This may not mean anything.')
@section('detail', "I'm probably working on something that has blown up.")

For other problems like 403 forbidden, 500 Internal Server Error, 503 Service Unavailable, etc, just copy and paste the above file and add something like 500.blade.php.

CSS/JS Assets

StyleSheet:public/css/style.css



@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:300,500');
html,
body {
  width: 100%;
  height: 100%;
}
body {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/257418/andy-holmes-698828-unsplash.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 100vh;
  min-width: 100vw;
  font-family: "Roboto Mono", "Liberation Mono", Consolas, monospace;
  color: rgba(255,255,255,0.87);
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.container,
.container > .row,
.container > .row > div {
  height: 100%;
}
#countUp {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
#countUp .number {
  font-size: 4rem;
  font-weight: 500;
}
#countUp .number + .text {
  margin: 0 0 1rem;
}
#countUp .text {
  font-weight: 300;
  text-align: center;
}

Javascript:public/js/script.js



var formatThousandsNoRounding = function(n, dp){
  var e = '', s = e+n, l = s.length, b = n < 0 ? 1 : 0,
      i = s.lastIndexOf(','), j = i == -1 ? l : i,
      r = e, d = s.substr(j+1, dp);
  while ( (j-=3) > b ) { r = '.' + s.substr(j, 3) + r; }
  return s.substr(0, j + 3) + r + 
    (dp ? ',' + d + ( d.length < dp ? 
        ('00000').substr(0, dp - d.length):e):e);
};

var hasRun = false;

inView('#countUp').on('enter', function() {
    if (hasRun == false) {
        $('.number').each(function() {
            var $this = $(this),
                countTo = $this.attr('data-count');

            $({ countNum: $this.text()}).animate({
                countNum: countTo
            },
            {
                duration: 500,
                easing:'linear',
                step: function() {
                    $this.text(formatThousandsNoRounding(Math.floor(this.countNum)));
                },
                complete: function() {
                    $this.text(formatThousandsNoRounding(this.countNum));
                }
            });
        });
        hasRun = true;
    }
});

Let's try it out

Let's start a simple server with the artisan command. The actual behavior is like below GIF Image.



php artisan serve

Isn't it cool? Please refer to it ...

I'll also post it on the repo on GitHub. Please try it. (GitHub pushes only laravel diff directories / files)

https://github.com/ichii731/php-examples/tree/main/laravel_error-page

Please also check the blog and Twitter@ichii731 if you like :D

How to get RSS from wordpress using PHP

Ichi — Mon, 21 Jun 2021 14:32:55 +0000

Good evening. Today, I'll introduce how to get arbitrary information from RSS feed and display it in HTML.
Recently, I'm developing only with Laravel, so I didn't write PHP in the vanilla environment, so make a note so that you don't forget it.

Sample & Code

Sample

This time, I got the latest 5 articles from the RSS feed https://0115765.com/feed/ of this blog.(It’s displayed in Japanese)

https://0115765.com/samples/rss.php

Source Code

It's a very simple mechanism that just reads and parses the XML.

<?php
// Get RSS&Pursing XML
$rss = simplexml_load_file('https://0115765.com/feed');

$cnt = 0;
foreach($rss->channel->item as $val){
    // Make HTML
    echo "<a href='" . $val->link . "'>" . $val->title . "</a><br>";
    echo date("Y/m/d", strtotime($val->pubDate)) . "<br>";
    $cnt++;

    // End with the number of items you want to display.
    if ($cnt==5) {
        echo "View Older Article";
        break; // Be sure to end with break.
    }
}

Please also check the blog and Twitter if you like :D
Twitter @tomox0115
My Profile&Portfolio

XML Composition

The XML structure of each article in the RSS feed looks like this.

<item>
    <title>
        Article Title
    </title>
    <link>
        https://0115765.com/archives/xxxx
    </link>
    <comments>
        https://0115765.com/archives/xxxx#respond
    </comments>
    <creator>
        Creator
    </creator>
    <pubDate>
        Publish Date
    </pubDate>
    <category>
        Category
    </category>
    <guid isPermaLink="false">
        https://0115765.com/?p=xxxx
    </guid>
    <description>
        Article Discription
    </description>
    <commentRss>
        https://0115765.com/archives/xxxx/feed
    </commentRss>
    <comments>
        xxxx
    </comments>
</item>

How to output tomorrow's date in PHP

Ichi — Wed, 05 May 2021 05:19:48 +0000

Simply add a parameter called "+1 day" when instantiating the DataTime class.

<?php
// today
$today = new DateTime();
echo $today->format('Y-m-d') . PHP_EOL;
// tomorrow
$tomorrow = new DateTime('+1 day');
// or
$tomorrow = new DateTime('tomorrow');
echo $tomorrow->format('Y-m-d');

Output result

How to easily make PWA compatible with offline display

Ichi — Fri, 30 Apr 2021 03:08:37 +0000

Hello. Suddenly, PWA's offline display support is mandatory.

The Chrome update will review the criteria for installing web apps as PWAs.

Announcement from Google

Starting with Chrome 89, if the PWA does not return a valid response when offline, a warning will be displayed in the developer tools console.
Starting with Chrome 93 (scheduled to be released later this year), web apps that don't work properly offline can no longer be installed as PWAs.

In other words, make it available offline. That's right.
Currently, there aren't many PWA sites that support offline, so we should take immediate action.

It's very easy to get around this problem, just have an offline page. Well, of course.
So this time, I will make a template for offline support with HTML + JS.

Implementation

Note

SSL support is required for PWA. Please be careful. (For the time being, localhost works even with non-SSL)

Constitution

html
├ img
│ └ logo.png
├ index.html
└ sw.js

manifest.json

Create the usual manifest.json to recognize it as a PWA. Below is the template.

{
    "name": "PWA Offline Test",
    "short_name": "PWA",
    "icons": [
        {
            "src": "/img/icon.png",
            "sizes": "144x144",
            "type": "image/png"
        }
    ],
    "start_url": "/",
    "display": "standalone",
    "theme_color": "#99d9ea"
}

There are a lot of detailed ways to write Manifest.json, so please refer to it.

ServiceWorker

Write the Service Worker required for PWA to work.

// Version definition
var CACHE_VERSION = 'ca-v1';
var DISP_VERSION = 'ca-d-v1';

// Directory to be cached (css / js is added individually)
var resources = [
  '/',
  '/img'
];

// Add cache
self.addEventListener('install', function (event) {
  console.log('ServiceWorker Install');
  event.waitUntil(
    caches.open(CACHE_VERSION)
      .then(function (cache) {
        console.log('cache.addAll');
        cache.addAll(resources);
      })
  );
});
// Shiw cash
self.addEventListener('fetch', function (event) {
  console.log('ServiceWorker fetch');
  event.respondWith(
    // Check if cache exists
    caches.match(event.request)
      .then(function (response) {
        if (response) {
          return response;
        } else {
          // If there is no cache, put it in the cache
          return fetch(event.request)
            .then(function (res) {
              return caches.open(DISP_VERSION)
                .then(function (cache) {
                  console.log('cache.put');
                  cache.put(event.request.url, res.clone());
                  return res;
                });
            })
            .catch(function () {
              // do nothing
            });
        }
      })
  );
});
// Delete old cache
self.addEventListener('activate', function (event) {
  console.log('activate ServiceWorker');
  event.waitUntil(
    caches.keys()
      .then(function (keyList) {
        return Promise.all(keyList.map(function (key) {
          if (key !== CACHE_VERSION && key !== DISP_VERSION) {
            console.log('cache.delete');
            return caches.delete(key);
          }
        }));
      })
  );
  return self.clients.claim();
});

HTML Template

Write HTML to display offline. At that time, let's read the one I wrote earlier.
Below template

<head>
    <link rel="manifest" href="/manifest.json">
    <!-- Character code setting & mobile support -->
    <meta charset="utf8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script>
        // Load ServiceWorker
        window.addEventListener('load', function () {
            if ('serviceWorker' in navigator) {
                navigator.serviceWorker.register('/sw.js')
                    .then(function (registration) {
                        return registration.pushManager.getSubscription().then(function (subscription) {
                            console.log("subscription", subscription)
                            if (subscription) {
                                return subscription
                            }
                            return registration.pushManager.subscribe({
                                userVisibleOnly: true
                            })
                        })
                    }).then(function (subscription) {
                        var endpoint = subscription.endpoint
                        console.log("pushManager endpoint:", endpoint)
                    }).catch(function (error) {
                        console.log("serviceWorker error:", error)
                    })
            }
        })
    </script>
</head>
<body>
    PWA offline display test (front page)
    <br>
    <a href="https://hoge.com/index2.html">To the second page</a>
    <!-- You can also transition pages.  At that time, it may not work well unless Service Worker is loaded on the transition destination page as well. -->
    <br>
    <img src="/icon.png">
</body>
</html>

You can also transition pages. At that time, it may not work well unless Service Worker is loaded on the transition destination page as well.

This completes the implementation.
Let's try it.

Operation check

A pop-up prompting you to install will be displayed at the bottom of the screen, so try installing it.

When the installation is complete, a notification will be displayed. Open it and check the display.

If you can display it properly, try setting it to airplane mode.
It is OK if you can display it without any problem even if you open the application with this.

You can display it properly. There is no problem with page transitions.
Please also check the blog and Twitter if you like :D
Twitter @tomox0115
My BLOG

Get ALL video information about specific YouTube Channel

Ichi — Wed, 28 Apr 2021 19:18:00 +0000

I tried to get the information of the all video in a specific channel.

Overview

I wrote it with reference to StackOverflow.
Due to API restrictions, even if I make a request, I can only get 50 requests at a once, so I sent requests many times at regular intervals to get them.
You can get the following information.

Title/ID/Summary
Thumbnail
Post date and time

It may be better to stop trying it indiscriminately because there are restrictions on API calls.

The sample JSON file is uploaded to GitHub.

https://github.com/tomox0115/randomhikakin/blob/main/database/hikakin.json

Get API key

There is a lot of information, so please google around.

Sample code

For the time being, the sample is also uploaded to Gist.

<?php
/*
If you get an error related to the date and time, please specify the default term zone like ↓
date_default_timezone_set("America/Los_Angeles");
*/

//YouTube API v3
$API_KEY = "***************************************";

// Get the channel ID from the user name (skip OK if you know the ID)
function get_user_channel_id($user){
    global $API_KEY;
    $url = 'https://www.googleapis.com/youtube/v3/channels?key=' . $API_KEY . '&part=id&forUsername=';
    return search($user,$url)['items'][0]['id'];
}

// 
function search($searchTerm,$url){
    $url = $url . urlencode($searchTerm);

    $result = file_get_contents($url);

    if($result !== false){
        return json_decode($result, true);
    }

    return false;
}

function push_data($searchResults){
    global $data;
    foreach($searchResults['items'] as $item){
        $data[] = $item;
    }
    return $data;
}

function get_url_for_time_period($channelId, $time){
    global $API_KEY;
    // Date and time type specification
    $publishedAfter = date("Y-m-d\TH:i:sP",strval($time));
    //　Specify the period of 60 days
    $publishedBefore_ = $time + (60 * 60 * 24 * 60);
    $publishedBefore = date("Y-m-d\TH:i:sP",$publishedBefore_);
    // Make request URL
    $url = 'https://www.googleapis.com/youtube/v3/search?part=snippet&type=video&key=' . $API_KEY . '&maxResults=50&channelId=' . $channelId . '&publishedAfter=' . urlencode($publishedAfter) . '&publishedBefore=' . urlencode($publishedBefore);

    return array("url"=>$url,"utc"=>$publishedBefore_);
}


$start_date = "YYYY-MM-DD"; // Set date
$time = strtotime($start_date);
$username = "*****"; // ex. hikakintv

$channelId = get_user_channel_id($username);

while($time < time()){
    $url = get_url_for_time_period($channelId, $time);
    $searchResults = search("", $url['url']);
    $data = push_data($searchResults);
    $time += 60 * 60 * 24 * 60; // Add 60 days
}

// If you want to display the returned data
echo "<pre>";
var_dump($data);
echo "</pre>";

// If you want to save the array in JSON format
$json = json_encode($data, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
file_put_contents($username . ".json" , $json);

// If you want to output the number of videos
print count($data);

JSON that can be acquired

The returned video information is stored in $data as an associative array, so you should output it as JSON.
Below is an example of JSON.
Only the first video information is posted. It will continue forever ...

[
    {
        "kind": "youtube#searchResult",
        "etag": "cRtdkU1jXJ6Abga3q5S490FrsP0",
        "id": {
            "kind": "youtube#video",
            "videoId": "0t8CH5BAgLY"
        },
        "snippet": {
            "publishedAt": "2011-07-20T15:19:55Z",
            "channelId": "UCZf__ehlCEBPop-_sldpBUQ",
            "title": "世界一おいしい飲み物『ピルクル』 - The World Best Juice『Pirukuru』 -",
            "description": "ピルクルに勝る飲み物なし。",
            "thumbnails": {
                "default": {
                    "url": "https://i.ytimg.com/vi/0t8CH5BAgLY/default.jpg",
                    "width": 120,
                    "height": 90
                },
                "medium": {
                    "url": "https://i.ytimg.com/vi/0t8CH5BAgLY/mqdefault.jpg",
                    "width": 320,
                    "height": 180
                },
                "high": {
                    "url": "https://i.ytimg.com/vi/0t8CH5BAgLY/hqdefault.jpg",
                    "width": 480,
                    "height": 360
                }
            },
            "channelTitle": "HikakinTV",
            "liveBroadcastContent": "none",
            "publishTime": "2011-07-20T15:19:55Z"
        }
    },

Please also check the blog and Twitter if you like :D
Twitter @tomox0115
My BLOG

Get a list of follow/follower infomation of Twitter account in 4 lines

Ichi — Mon, 19 Apr 2021 04:23:54 +0000

Today, I will try to get the follower list in 4 lines.
However, I only use the usual Twittroauth, but if you do not have abraham / twitteroauth, please do so from Composer.

composer require abraham/twitteroauth

The API limit is 5000 per user. If you want to get more, you can loop with "for". Note that oauth_token and oauth_token_secret are not required and can be accessed.
For details ↓
TwitterDev Official Reference

Get list of follower

require 'vendor/autoload.php';
use Abraham\TwitterOAuth\TwitterOAuth;
$connection = new TwitterOAuth("APIKey", "APISecret");
$followers = $connection->get("followers/list",array('cursor' => '-1', 'screen_name' => 'screen_name','count'=>'100'));

Simply

Auto loading
Namespace import
Credential settings & instantiation
Get

that's all.
Information is returned as a class object

Get list of Follow

Just change followers/list on the 4th line to friends/list.

Thanks.
My Website
Twitter@tomox0115

[PHP] Get information about a specific YouTube video

Ichi — Sun, 11 Apr 2021 15:53:11 +0000

If you want to get the video information of a specific channel or the playlist list, I think you will use YouTube API v3.
With PHP, it's good to use the official Google library with Composer, but for specific videos you can get the video information more easily.

Specifically, the JSON that stores the video information is called from the API.
that's all!

JSON URL Structure

https://www.googleapis.com/youtube/v3/videos?id=[VideoID]&key=[APIKey]&part=snippet,contentDetails,statistics,status

Enter the API key obtained from Google API in [API Key].
There are many ways to get the key on the internet, so please check it yourself.

Sample Code

Try to get the title of a specific video from YouTube API v3.

$api_key = "API Key"
$video_id = "Video ID"
$url = "https://www.googleapis.com/youtube/v3/videos?id=$video_id&key=$api_key&part=snippet,contentDetails,statistics,status";
$json = file_get_contents($url);
$getData = json_decode( $json , true);
foreach((array)$getData['items'] as $key => $gDat){
    $title = $gDat['snippet']['title'];
}
// Output Title
echo $title;

Forem: Ichi

Build is possible but Archive fails when using CocoaPods in Xcode

Starter Template of Laravel+Vite+Vuetify3+TypeScript+Router+Sass

ichii731 / laravel9-vite-vuetify3-starter

laravel9-vite-vuetify3-starter

Manually Setup

Laravel+Vite

Vue3+Vuetify3+Vue Router

(caution)about TypeScript

create app.ts

create Vue SFC

create Sass file

vite-related settings

vite.config.ts(build configuration)

TreeShaking with Vuetify

Loading in Blade

Build test

"Twitter for xxx" disappeared, so I created Check Tool

About API

Get over 100 tweets using Twitter API v2

Overview

Major PHP library support

Register v2 app

Search & Get over 100

Limitations and two endpoints

Code Example

Mechanism

Parameters

Extra

Let's Connect&Show MongoDB with Laravel!

Sample Project

DEV Envinorment

Envinorment Setting

Make MongoDB available

Make sample Database

Implemented with Laravel!

Edit Config

Credentials in .env

Make Model

Create a Routing

Create a Controller

Create View

Operation Check

Create a very Cool 404/503 Error Page with Laravel!

Error page structure in Laravel

Let's make it!

Dev Environment

404 page template

Customize Template

Sample Code

Blade Files

CSS/JS Assets

Let's try it out

How to get RSS from wordpress using PHP

Sample & Code

Sample

Source Code

XML Composition

How to output tomorrow's date in PHP

How to easily make PWA compatible with offline display

Announcement from Google

Implementation

Note

Constitution

manifest.json

ServiceWorker

HTML Template

Operation check

Get ALL video information about specific YouTube Channel

Overview

Get API key

Sample code

JSON that can be acquired

Get a list of follow/follower infomation of Twitter account in 4 lines

Get list of follower

Get list of Follow

[PHP] Get information about a specific YouTube video

JSON URL Structure

Sample Code

Credentials in `.env`